visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event

Question

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.

Answer 1

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 should be more helpful in newer versions of Svelte. The docs now have more info on this, as well.)