关闭Svelte的a11y警告

众所周知，Svelte在设计时就考虑到了残疾人的可访问性，它的本意是好的，但其无法简单关闭，dev模式下编译后强制展示警告弹窗的行为就有些令人反感了。大多数情况下，开发的网页并不需要考虑可访问性，因此需要将其关闭掉。

要关闭这个警告，需要从两方面入手，既要禁用掉vscode中的提示，又要在webpack中设置对应的逻辑。

VScode

在扩展中找到Svelte插件，打开扩展设置Svelte › Plugin › Svelte: Compiler Warnings，在其中添加如下信息：

"svelte.plugin.svelte.compilerWarnings": {
  "a11y-click-events-have-key-events": "ignore",
  "a11y-no-static-element-interactions": "ignore",
  "a11y-aria-attributes": "ignore",
  "a11y-missing-content": "ignore",
  "a11y-mouse-events-have-key-events": "ignore",
  "a11y-missing-attribute": "ignore",
  "a11y-autofocus": "ignore",
  "a11y-no-noninteractive-element-interactions": "ignore"
}

添加后就能忽略掉大部分a11y警告，如果出现新的，只需要插入对应的配置即可

webpack.config.js

编辑项目中的webpack.config.js文件，在svelte-loader插件中，添加一段代码：

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

添加后，对应部分类似如下代码：

{
    test: /\.svelte$/,
    use: {
        loader: 'svelte-loader',
        options: {
            compilerOptions: {
                dev: !prod
            },
            emitCss: prod,
            hotReload: !prod,
            onwarn: (warning, handler) => {
                // disable a11y warnings
                if (warning.code.startsWith("a11y-")) return;
                handler(warning);
            }
        }
    }
}

完成后，编译器将无视所有的a11y警告