How can we disable svelte warnings? (a11y, etc)

[AlexGalays]

These warnings often do more harm than good and pollute our console real estate.
It's not acceptable to litter the code with <!-- svelte-ignore a11y-no-onchange --> etc.

We can usually filter these in the rollup.config but svelte-check won't pick that.

What's the best way to filter these:

• in the console when using svelte-check --watch
• in VScode (without having to tell everyone to manually add tons of entries in their IDE preferences)

Is it time perhaps to introduce a config file?

[dummdidumm]

You can use the --compiler-warnings option, for example --compiler-warnings "css-unused-selector:ignore,unused-export-let:ignore" will filter out all css-unused-selector and unused-export-let warnings. See the svelte-check readme for more info.
About the VS Code thing: You can always add a workspace settings json to your repo which all users will inherit. I'm hesitant to put this inside svelte.config.js since there's no official agreement in which direction this config file will go so I don't want to add things in a rush there.

[AlexGalays]

Thanks.

The --compiler-warnings would do the job for the cli, yes. As for the workspace settings json, is that something you often use in addition to a .editorconfig?

[dummdidumm]

Well, if you all use VS Code and you agree on certain settings, I would certainly use it - it's a kind of config file, too, after all. We do it in one of our projects right now.

[raxod502]

Does this apply to the language server as well? Or only to svelte-check? I tried running the language server as svelteserver --stdio --compiler-warnings a11y-autofocus:ignore,a11y-no-onchange:ignore, however the language server is still producing warnings:

This is in Emacs using lsp-mode.

[dummdidumm]

This only applies to vscode and svelte-check. How do other IDEs integrate with the language server? The language server expects a config object (structure as in the vscode extension readme) on startup during the initialisation command according to the language server protocol.

[raxod502]

Gotcha. All full-featured language server clients, including lsp-mode under Emacs, have support for passing a configuration over JSONRPC to the server. Now that I understand where this is intended to be configured, it should be straightforward to enhance the Svelte module in lsp-mode to hook that configuration key to a convenient user option. I will open an issue against lsp-mode accordingly.

It would probably be worth mentioning this explicitly in the README: "Configuration of the language server happens over the LSP protocol by passing a configuration object; your LSP client should have a way of setting the configuration object for a server. Here is a link to the spec for the configuration that is supported [...]"

It also might be worth actually parsing the command-line options and/or throwing an error when any are passed; it was not clear to me whether command-line options were supported, since --help did not function as expected.

Thanks for your help.

[dummdidumm]

@elianiva in a recent issue you mentioned that you also run the LSP directly and were able to configure some setting - any chance you use the same LSP-mode @raxod502 is talking about so might be able to help?

[elianiva]

nope, I don't use lsp-mode. I use neovim's builtin LSP and it can pass some options to the LSP. Here's how it's done.

I don't know how lsp-mode handle this option. I did a quick reading from its wiki and I think it's possible to do. It can pass some options to Lua LSP for example. https://emacs-lsp.github.io/lsp-mode/page/lsp-lua-language-server/

[raxod502]

Yes, this is fully supported by lsp-mode, and in a fairly advanced way: each configuration key can be easily mapped to a separately documented user option. Here is an example for gopls: https://github.com/emacs-lsp/lsp-mode/blob/0349a1cc0976829fab8f73ecc033252be31a7cf6/clients/lsp-go.el#L215-L221

[non25]

@dummdidumm I too decided to try neovim-lsp, and it works brilliantly even with zip-packed yarn 2 packages, thanks to overridable cmd option:

lspconfig.tsserver.setup{
  cmd = { "yarn", "typescript-language-server", "--stdio" };
  on_attach = on_attach;
}
  
lspconfig.svelte.setup{
  cmd = { "yarn", "svelteserver", "--stdio" };
  on_attach = on_attach;
  settings = {
    svelte = {
      compilerWarnings = {
        ["a11y-no-onchange"] = "ignore"; -- <<< This doesn't work, svelte still spams me with this warning
      }
    }
  }
}

language-server's readme lacks configuration options, which I've found in svelte-vscode package. 🤔
More editors make their lsp implementations, so it is better to have options in the language-server's readme too.
Do you want me to make a readme PR that clarifies configuration process for neovim-lsp and makes a link to the lsp options which are described in svelte-vscode package?

For some reason, when parsing svelte.config.js, language-server ignores onwarn, but uses preprocess. Is that intended?
I feel like it is more straightforward to configure that from svelte.config.js.
Can't seem to get compilerWarnings ignores to work by passing options from neovim-lsp. 😞

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess(),
  onwarn: (warning, handler) => {
    if (warning.code === 'a11y-no-onchange') return;
    handler(warning);
  },
};

[elianiva]

@non25 this should work because it's svelte.plugin.svelte.compilerWarnings, not svelte.compilerWarnings

lspconfig.svelte.setup{
  cmd = { "yarn", "svelteserver", "--stdio" };
  on_attach = on_attach;
  settings = {
    svelte = {
      plugin = {
        svelte = {
          compilerWarnings = {
            ["a11y-no-onchange"] = "ignore"
          }
        }
      }
    }
  }
}

[petrkoutnycz]

How do I suppress a waning when using e.g. "sapper dev" command? I don't see any "compiler-warnings" option at all. Thank you.

[leumasme]

How do I disable in-editor warnings via workspace settings.json?

"svelte.plugin.svelte.compilerWarnings": {
    "a11y-media-has-caption": "ignore"
  }

Adding this does not seem to do anything.

[peter-pakanun]

@leumasme To disable editor warning put this inside .vscode/settings.json

{
  "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",
  }
}

To disable compiler warning put this inside svelte.config.js

const config = {
  onwarn: (warning, handler) => {
    if (warning.code.startsWith('a11y-')) {
      return;
    }
    handler(warning);
  },
  kit: {
    adapter: adapter(),
  }
};

[tv42]

To disable compiler warning put this inside svelte.config.js

There's no onwarn property on type Config. https://kit.svelte.dev/docs/configuration

The only places where the svelte or svelte-kit source trees say onwarn are

svelte/CHANGELOG.md
1730:* `onwarn` and `onerror` receive default handlers as second arguments ([#883](https://github.com/sveltejs/svelte/pull/883))

svelte-kit/packages/kit/src/core/config/index.spec.js
171:			onwarn: () => {}

The language-tools source has zero instances of onwarn.

What's going on here? Where it onwarn defined, used, and documented?

[tv42]

Alright, onwarn resides in vite-plugin-svelte: https://github.com/sveltejs/vite-plugin-svelte/search?q=onwarn

I see 8fc5e524b20bdcd1c3c0dbb27dd67d17db3377c4 that changed Javascript logic -- without changing the Typescript definition to allow arbitrary keys!

[telamon]

Is it just me or are you guys bandaging a footgun blast?

This really should go into the rollup/svelte() configuration, setting up a development standard in a team by asking each individual dev to modify their respective editor configuration is well.. inefficient.

How do I get rid of A11y entirely? It's garbage :(

[PierBover]

How do I get rid of A11y entirely? It's garbage :(

Yep.

And I've encountered quite a few bugs. This really shouldn't trigger an A11Y warning:

Or this one: sveltejs/svelte#5967

Or when I just want to write <a> without an href or heref="#" because I'm in the middle of something I don't want the Svelte compiler yelling at me.

@leumasme To disable editor warning put this inside .vscode/settings.json

This doesn't work for me...

[quoid]

To disable editor warning put this inside .vscode/settings.json

This also no longer seems to work for me, but at one point it did. "svelte.plugin.svelte.compilerWarnings" no longer seems like a valid key.

I am able to silence the compiler warnings in my rollup.config.js via:

...
svelte({
    ...
    onwarn: (warning, handler) => {
        // disable a11y warnings
        if (warning.code.startsWith("a11y-")) return;
        handler(warning);
    }
    ...
})
...

[rogerfar]

This also no longer seems to work for me, but at one point it did. "svelte.plugin.svelte.compilerWarnings" no longer seems like a valid key.

This still works for me:

.vscode/settings.json

{
  "svelte.plugin.svelte.compilerWarnings": {
    "unused-export-let": "ignore",
    "a11y-click-events-have-key-events": "ignore"
  },
}

[quoid]

@rogerfar does that disable the editor (VSCode) warnings for you?

[Ohyenno]

To disable vscode warning:

Open View -> Command Palette -> Then write Settings -> Select Open User Settings (JSON)

Add to the end of the file:

"svelte.plugin.svelte.compilerWarnings": {
    "unused-export-let": "ignore",
    "a11y-click-events-have-key-events": "ignore"
},

restart vscode

[quoid]

@Ohyenno

To disable vscode warning: ....

That does not silence the vscode (Version: 1.72.1 (Universal)) warnings any longer for me, nor does editing project level settings at .vscode/settings.json.

[baronyoung]

Anyone using Webstorm have a solution for this issue? These warnings are highly annoying. I'm building an application for myself so why would I write all this extra a11y code???

[thecodewarrior]

@baronyoung The svelte compiler patch I posted has been working perfectly for me in IntelliJ, so it should work in Webstorm too.

[baronyoung]

It looks like the svelte.config.js change from sardapv above, sans the VS code config since I'm using Webstorm, is working for me.

[laszlo1337]

@baronyoung @thecodewarrior
I use WebStorm, I don't care about compiler warnings but editor warnings are driving me mad. How did you guys turn that off? I used this onwarn method but it doesn't work. The settings.json file is not present among .idea files

[baronyoung]

@laszlo1337 Actually I don't have a solution for that yet. Fortunately I don't have a lot of on:clicks on elements (I try to use anchor tags whenever possible) so it's not bothering me too much right now. I know it will at some point though and would love to have a solution.

[stegru]

sed -i 's/warn(pos, warning) {$/\0 if (warning.code.includes("a11y")) { return; }/' node_modules/svelte/compiler.cjs  

[thecodewarrior]

@laszlo1337 I'm using IntelliJ IDEA and it works fine. If you're using the Svelte language server, the compiler patch should work (after closing and opening the project). If you have an esoteric build setup it's possible it wouldn't work, but I'd be surprised.

In IntelliJ IDEA the Svelte language server setting is in Langauges & Frameworks > TypeScript > Svelte, so make sure you have it enabled.

[ZYinMD]

This stackoverflow question has a very thorough answer about this matter.

[MicroCBer]

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.

[pyronaur]

Please make this configurable in SvelteKit

[jsudelko]

Upvote sveltejs/svelte#9485 if you agree that moving a11y to ESLint for Svelte 5 would be helpful.

[PierBover]

Upvote sveltejs/svelte#9485 if you agree that moving a11y to ESLint for Svelte 5 would be helpful.

It doesn't make sense to rely on a third party tool for this. I use ESLint personally but others don't. And what if it disappears in a couple of years?

Even having to configure this in a VSCode plugin seems a bit absurd.

The only solution that makes sense to me is having some Svelte compiler settings about errors. Unfortunately, the Svelte team seems pretty stubborn with their ideological crusade.

[mustafa0x]

It doesn't make sense to rely on a third party tool for this.

It normally doesn't, but eslint is a pretty integral component, and svelte can take steps to improve integration. The new flat config format is quite nice.

Division of concerns when you have robust building blocks is the correct approach.

As for relearning configuration idioms for each component — I'd rather not.

[its-all-waves]

All I see is 3 years of people asking for a simple solution to this, many many words typed, and nothing meaningful accomplished.

[divmgl]

This is rough. Thinking about turning off the TypeScript configuration altogether. Which sucks because the app works fine even though the errors and warnings are coming up.

[craigcosmo]

this shit driving me nut, I tried all the steps here, but only some a11y is disabled. I wand to disable all of them together without tocuh 50 config files.

[divmgl]

this shit driving me nut, I tried all the steps here, but only some a11y is disabled. I wand to disable all of them together without tocuh 50 config files.

I only disabled it once in VSCode. It looks like this message is raised by VSCode directly thru the Svelte checker I believe.

[Sebi2020]

This so-called “issue” is truly frightening. If someone is talking about public apps, it sounds like the entire purpose is to ignore the accessibility needs of disabled people. Anyone complaining about this should perhaps ask themselves why these warnings even exist and learn how to develop accessible web applications.

[craigcosmo]

This so-called “issue” is truly frightening. If someone is talking about public apps, it sounds like the entire purpose is to ignore the accessibility needs of disabled people. Anyone complaining about this should perhaps ask themselves why these warnings even exist and learn how to develop accessible web applications.

do you build your house with accessibility for disability in mind? just asking. Not everybody is building facebook or Wikipedia, most guys just build little project for himself or at most for some thousand users. Why the F do we need to spend time to cater for the whole world ? we aint got no resource and time for that shi$, we will do it when we have a billion user. Alright ?

If you like accessibility so much, I suggest you can start with your own house first.

[ZYinMD]

@Sebi2020 sometimes it's a 1-person project for self use. Sometimes it's a mobile-only app that isn't applicable to keyboard navigation.

[Sebi2020]

craigcosmo: Why the F do we need to spend time to cater for the whole world ?

This shows exactly that “I don’t have a disability, so why should I care about people having problems with my app?” mindset.

@ZYinMD

@Sebi2020 sometimes it's a 1-person project for self use. Sometimes it's a mobile-only app that isn't applicable to keyboard navigation.

I've explicitly mentioned public apps (public facing commerical apps) and not personal (probably self-use only) projects. Btw. a11y is not only about keyboard navigation, so it also matters if developing mobile applications.

[Pjb518]

I've explicitly mentioned public apps (public facing commerical apps) and not personal (probably self-use only) projects. Btw. a11y is not only about keyboard navigation, so it also matters if developing mobile applications.

Except this issue isn't, "Allow us to easily disable svelte warnings for my public facing apps": it's just asking for a way to turn them off in general. And a valid reason for doing that is that you're developing a personal app, or you're doing early prototyping and don't want your console flooded with warnings.

Posting to call an issue frightening, because you've decided that everyone asking for this must be a bad actor who doesn't care about accessibility is ridiculous, and you're making a fool of yourself.

And that's not to say that there aren't people who want to turn off these warnings because they simply don't care about accessibility, but this approach of tarring everyone with the same brush is not helpful, and your posts come across as trying to shame people away from requesting a perfectly reasonable feature addition.

[J4gQBqqR]

The trouble with people lies in their eagerness to be teachers of others. - Mencius (372–289 BC)

[insilications]

'svelte3/ignore-warnings': ({ code }) => code.includes('a11y'),

This does not work for the latest eslint-plugin-svelte. The a11y warnings have now turned into errors. The only recourse I've found is to turn off the svelte/valid-compile rule which is kind of sad to lose all its other benefits.

Edit: 'svelte/valid-compile': [ 'error', { 'ignoreWarnings': true } ], will keep ESLint from turning a11y warnings into errors.

Thanks, this works.

[xvrx]

2 years and no solutions have worked, now i truly believe that the woke ruined everything

[its-all-waves]

Here's another perspective: what about the disabilities of devs?

I am fairly ADHD, OCD, quite hypersensitive, and high anxiety. Seeing a sea of warnings literally makes my heart rate spike and takes me out of flow. It makes me anxious.

Let me focus and flow while I work on a prototype. If the project ends up public facing, it's ON ME if I don't support others with disabilities. (How is it woke to force your opinion on others? True "wokeness" lies in letting everyone have their own beliefs, no?)

For now, I'm mostly making personal projects, so all these warnings do is degrade my experience of doing something I love.

TLDR: Svelte team -- have you considered the disabilities of your dev users?

[divmgl]

I'd like to propose a simpler view. As a developer, I don't want warnings unless they're footguns. In the JavaScript world we have ESLint which is opt-in, and the standard ESLint packages tend to be pretty minimal and focused only on footguns.

I expect Svelte and SvelteKit to work this way as well. These accessibility warnings are not applicable to all applications nor does not addressing them break critical functionality.

On our end we're creating an internal business application that is not public facing so we can build accessibility features as needed by our employees. We simply do not need these warnings.

It's an unusual stance to take. We don't have to deal with this with other frameworks, so we simply chose to not use Svelte (this wasn't the only issue).

[dummdidumm]

Locking this thread - it's becoming too heated and there's no new insights whatsoever.

We're aware of the situation, we just didn't get around to thinking of a solution yet (and whether or not we do want to make it easy to opt out).