Disable certain a11y warnings globally in sveltekit

Sveltekit has very strict a11y checks, for instance you can't just add on:click to a div.

I can suppress it on a per-line bases, e.g.:

<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click={handleClick}></div>

But how can I disable it globally?

In sveltekit, a11y warnings nag you in several places.

1. squiggles in VSCode

In .vscode/settings.json, add:

"svelte.plugin.svelte.compilerWarnings": {
  "a11y-click-events-have-key-events": "ignore",
  "a11y-no-static-element-interactions": "ignore"
}

2. eslint

If your build steps include running eslint in the CLI, the build can fail.

Customize this rule in your eslint config:

"rules": {
  "svelte/valid-compile": ["error", { "ignoreWarnings": true }]
}

This will suppress non-fatal errors reported by the valid-compile rule, which is part of plugin:svelte/recommended.

3. svelte-check

If your build steps include running svelte-check in the CLI, the build can fail.

See if you're running svelte-check with the --fail-on-warnings flag. If yes, remove that flag so the warning will still show on screen, but won't raise an error.

This was quick and easy, but your codebase could deteriorate overtime, because all warnings are ignored, especially if the build pipeline runs remotely and nobody stares at the stdout. A better way is to disable things individually:

svelte-check --fail-on-warnings --compiler-warnings "a11y-click-events-have-key-events:ignore,a11y-no-static-element-interactions:ignore"

This is better but quite verbose, and pollutes your package.json. Personally, I choose to extract it to a svelte-check.sh, and call it from package.json:

"scripts": {
  ...
  "check": "bash svelte-check.sh",
  ...
}

4. vite dev and vite build

Both will show warnings on screen, but still work fine. No build pipelines will fail, so there isn't a necessity to change.

But if you still want to get rid of the warnings, add this in svelte.config.js:

const config = {
  onwarn: (warning, handler) => {
    // suppress warnings on `vite dev` and `vite build`; but even without this, things still work
    if (warning.code === "a11y-click-events-have-key-events") return;
    if (warning.code === "a11y-no-static-element-interactions") return;
    handler(warning);
  },
  kit: { adapter: adapter() },
};

Some people found they also needed to add similar things in vite.config.js, but I didn't find it necessary.