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.
"ignoreWarnings": false should actually be "ignoreWarnings": true if you want eslint to leave you alone
compilerOptions.warningFilter and use underscores instead of dashes as innomatic mentioned above.I added warningFilter to svelte.config.js. And it worked.
const config = {
kit: {
adapter: adapter()
...
},
compilerOptions: {
warningFilter: (warning) => {
const ignore = [
'a11y_media_has_caption',
'a11y_no_redundant_roles',
'a11y_consider_explicit_label',
'a11y_no_noninteractive_tabindex',
'a11y_click_events_have_key_events',
'a11y_no_static_element_interactions',
'a11y_no_noninteractive_element_interactions',
]
return !ignore.includes(warning.code)
},
}
};
warningFilter: (warning) => !warning.code.startsWith("a11y_").svelte lang-tools developers think it is necessary, this is an issue: https://github.com/sveltejs/language-tools/issues/650
You can add a property role="presentation" or role="none" to the element.
It removes an element's implicit ARIA semantics from being exposed to the accessibility tree.
ref: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role
to add to @ZYinMD answer for #4 in svelte.config.js
const config = {
onwarn: (warning, handler) => {
if (warning.code.startsWith('a11y-')) return;
handler(warning);
}
};
To disable almost all the blue warning in sveltekit, do this
open setting.json in vscode and add this
"svelte.plugin.svelte.compilerWarnings": {
"css-unused-selector": "ignore",
"unused-export-let": "ignore",
"a11y-aria-attributes": "ignore",
"a11y-incorrect-aria-attribute-type": "ignore",
"a11y-unknown-aria-attribute": "ignore",
"a11y-hidden": "ignore",
"a11y-autocomplete-valid": "ignore",
"a11y-misplaced-role": "ignore",
"a11y-no-static-element-interactions": "ignore",
"a11y-unknown-role": "ignore",
"a11y-no-abstract-role": "ignore",
"svelte-ignore a11y-autofocus": "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-click-events-have-key-events": "ignore",
"a11y-no-noninteractive-element-interactions": "ignore"
},
Then open the svelte.config.js file and do this
const config = {
preprocess: vitePreprocess(),
onwarn: (warning, handler) => {
if (warning.code.startsWith('a11y-')) return
if (warning.code === 'missing-exports-condition') return
if (warning.code === 'a11y-no-static-element-interactions') return
if (warning.code === 'svelte-ignore a11y-autofocus') return
if (warning.code.startsWith('css-unused-selector')) return
handler(warning)
},
kit: {
adapter: adapter(),
},
}
Add more rules you hate into those files/config.
https://github.com/sveltejs/language-tools/issues/650#issuecomment-1806928309
sed -i 's/warn(pos, warning) {$/\0 if (warning.code.includes("a11y")) { return; }/' node_modules/svelte/compiler.cjs
This worked for me. For those under Windows:
# Execute this under your project root
(Get-Content -Path "node_modules\svelte\compiler.cjs") -replace 'warn\(pos, warning\) {\$', '$& if (warning.code.includes("a11y")) { return; }' | Set-Content -Path "node_modules\svelte\compiler.cjs"
Ctrl-P -> Restart Svelte Language Server after patching the code
A11y is a good feature, troublesome sometimes, however. There should be some way that isn't that tricky for devs to disable it.
Btw any solutions other than this don't work for me.
