15

A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.svelte (a11y-click-events-have-key-events)

what does this error mean ? I am getting it too much in sveltekit. When I want to add an event listener on click this warning show me. Even event handler is not empty. below my code.

<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>

is there any possible way to remove this warning. and why does this warning shows.

H.B.
  • 166,899
  • 29
  • 327
  • 400
H Nazmul Hassan
  • 631
  • 2
  • 8
  • 17

2 Answers2

26

The warning shows up because if you add click handlers to non-interactive elements, they cannot be interacted with via the keyboard which is important for accessibility. Try to interact with your application without using the mouse and see how far you get.

Things that can be clicked should always use button elements (unless it's about navigation, that should use <a>).

The message is currently not very helpful; there is an issue regarding that.

H.B.
  • 166,899
  • 29
  • 327
  • 400
  • 6
    In addition to keyboard event handlers, you will **also need** `tabindex="0"` (if you're not using a natively interactive element such as a ` – slugolicious Jan 01 '23 at 22:12
  • 2
    but adding tabindex will trigger another warning, which is "no-noninteractive-tabindex" :-/ I wish svelte would add a tutorial for accessibility, to complement these warnings – Eskel Jan 15 '23 at 17:20
  • @Eskel: As noted, please just use buttons. And yes, the documentation could be better. – H.B. Jan 15 '23 at 18:21
  • @slugolicious when adding "role="button"" to a button element you get this warning : A11y: Redundant role 'button' - svelte(a11y-no-redundant-roles) – Eli O. Apr 09 '23 at 14:03
  • @JayD., of course that's redundant. No one said to add `role="button"` to a `
    – slugolicious Apr 09 '23 at 21:23
9

If you want to disable these warnings:

Add this in your svelte.config.js:

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

You can even disable all a11y warning logs using:

const config = {
  // ...
  onwarn: (warning, handler) => {
    if (warning.code.startsWith('a11y-')) return
    handler(warning)
  },
}
If you want to remove warnings in VSCode

Add this to your eslintrc.cjs

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

Add this to your .vscode/settings.json

"svelte.plugin.svelte.compilerWarnings": {
  "a11y-click-events-have-key-events": "ignore",
},
Eli O.
  • 1,543
  • 3
  • 18
  • 27