Disable a11y warnings

readme.md

Svelte's a11y can be incredibly annoying when building quick prototypes for self use.

To disable them on Visual Studio Code and Webpack you have to:

1. Edit .vscode/settings.json by adding:

{
    "svelte.plugin.svelte.compilerWarnings": {
      "a11y-aria-attributes": "ignore",
      "a11y-incorrect-aria-attribute-type": "ignore",
      "a11y-unknown-aria-attribute": "ignore",
      "a11y-hidden": "ignore",
      "a11y-misplaced-role": "ignore",
      "a11y-unknown-role": "ignore",
      "a11y-no-abstract-role": "ignore",
      "a11y-no-redundant-roles": "ignore",
      "a11y-role-has-required-aria-props": "ignore",
      "a11y-accesskey": "ignore",
      "a11y-autofocus": "ignore",
      "a11y-misplaced-scope": "ignore",
      "a11y-positive-tabindex": "ignore",
      "a11y-invalid-attribute": "ignore",
      "a11y-missing-attribute": "ignore",
      "a11y-img-redundant-alt": "ignore",
      "a11y-label-has-associated-control": "ignore",
      "a11y-media-has-caption": "ignore",
      "a11y-distracting-elements": "ignore",
      "a11y-structure": "ignore",
      "a11y-mouse-events-have-key-events": "ignore",
      "a11y-missing-content": "ignore",
      "a11y-aria-activedescendant-has-tabindex": "ignore",
      "a11y-click-events-have-key-events": "ignore",
      "a11y-interactive-supports-focus": "ignore",
      "a11y-no-interactive-element-to-noninteractive-role": "ignore",
      "a11y-no-noninteractive-tabindex": "ignore",
      "a11y-no-static-element-interactions": "ignore",
      "a11y-role-supports-aria-props": "ignore",
    }
  }

(Check https://svelte.dev/docs/accessibility-warnings to see if new entries got added)

2. Edit webpack.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(svelte)$/,
        use: {
          loader: 'svelte-loader',
          options: {
              onwarn: (warning, handler) => {
                // ignore ally messages
                if (warning.code.includes('a11y-')) {
                  return;
                }
                handler(warning);
              },
          }
        },
      },
}