关闭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警告
谢谢楼主的分享