具有 on:click 事件的可见非交互式元素必须伴随 on:keydown、on:keyup 或 on:keypress 事件

Question

A11y：具有 on:click 事件的可见非交互式元素必须伴随 on:keydown、on:keyup 或 on:keypress event.svelte (a11y-click-events-have-key-events)

这个错误是什么意思 ？我在 sveltekit 中得到的太多了。当我想添加事件侦听器时，请单击此警告显示给我。即使事件处理程序也不为空。在我的代码下面。

<div
    class="select-options max-h-0 transition-all duration-300 bg-slate-100"
    data-target="option-selection-wrapper"
    >
    {#each options as item}
        <div class="border py-1 border-dark-300 px-3 text-sm" on:click={()=> {
            selectedItem = item
        }}>
            {@html item.name}
        </div>
    {/each}
</div>

有没有可能的方法来删除这个警告。以及为什么会显示此警告。

Answer 1

出现警告的原因是，如果将单击处理程序添加到非交互式元素，则无法通过键盘与它们进行交互，这对于可访问性非常重要。尝试在不使用鼠标的情况下与您的应用程序进行交互，看看您能走多远。

可以点击的东西应该总是使用buttonelements （除非它是关于导航的，否则应该使用<a>）。

（该消息在较新版本的 Svelte 中应该更有帮助。文档现在也提供了更多关于此的信息。）

Answer 2

如果您想禁用这些警告：

将其添加到您的svelte.config.js：

const config = {
  // ...
  onwarn: (warning, handler) => {
    if (warning.code === 'a11y-click-events-have-key-events') return
    handler(warning)
  },
}

您甚至可以使用以下命令禁用所有 a11y 警告日志：

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

如果你想删除 VSCode 中的警告

将其添加到您的eslintrc.cjs

module.exports = {
  //..
  settings: {
    //...
    'svelte3/ignore-warnings': (warning) => {
      return warning.code === 'a11y-click-events-have-key-events'
    },
  },
}

将其添加到您的.vscode/settings.json

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