When using svelte-toasts and building the application with vite build, vite-plugin-svelte issues two warnings:
[vite-plugin-svelte] /node_modules/svelte-toasts/src/FlatToast.svelte:37:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
[vite-plugin-svelte] /node_modules/svelte-toasts/src/BootstrapToast.svelte:23:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
This comes from the fact, that there are non-interactive elements (divs, in this case) with an on:click handler.
To get rid of this warning is a simple as adding an addition on:keypress handler:
on:click={onClick}
+ on:keypress={onClick}
This doesn't solve the a11y problem fully, because you would also have to add tabindex (which has it's own problems, such as guessing a correct value for it). But at least it lets us get rid of the build warning.
When using svelte-toasts and building the application with
vite build, vite-plugin-svelte issues two warnings:This comes from the fact, that there are non-interactive elements (divs, in this case) with an on:click handler.
To get rid of this warning is a simple as adding an addition on:keypress handler:
This doesn't solve the a11y problem fully, because you would also have to add
tabindex(which has it's own problems, such as guessing a correct value for it). But at least it lets us get rid of the build warning.See https://stackoverflow.com/a/74974339/1601438 for background information.