Open
Description
Describe the bug
When creating an element with the role
attribute with the value of "separator" and adding a tabindex
attribute with the value of "0" and a key down event listener, I get the following errors: A11y: noninteractive element cannot have nonnegative tabIndex value
and A11y: Non-interactive element <span> should not be assigned mouse or keyboard event listeners.
. This is not correct according to the Mozilla Developer Network and W3C's Aria Authoring Practices guide.
The only fix is to ignore these issues with: <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
and <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
Reproduction
https://stackblitz.com/edit/vitejs-vite-pfawto?file=Separator.svelte
Logs
9:46:46 PM [vite-plugin-svelte] /home/projects/vitejs-vite-pfawto/src/lib/Separator.svelte:10:0 A11y: noninteractive element cannot have nonnegative tabIndex value
9:46:46 PM [vite-plugin-svelte] /home/projects/vitejs-vite-pfawto/src/lib/Separator.svelte:10:0 A11y: Non-interactive element <span> should not be assigned mouse or keyboard event listeners.
System Info
System:
OS: Linux 5.0 undefined
CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 18.18.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.4.2 - /usr/local/bin/npm
pnpm: 8.9.2 - /usr/local/bin/pnpm
npmPackages:
svelte: ^4.2.3 => 4.2.3
Severity
annoyance