Problem Description
When the svelte project runs, the console prints the following warnings:
[vite-plugin-svelte] /src/routes/+page.svelte:50:8 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] /src/routes/+page.svelte:50:8 A11y: <div> with click handler must have an ARIA role
reason
This is a compiler warning for the svelte project, meaning that the error message encountered is about accessibility (A11y) rules, which state that some accessibility <div>markup should be added to the element that handles the click event.
The first error it requires that on elements that have visibility but are not interactive, if there is on:clickan event, it must be accompanied by the on:keydown, on:keyupor on:keypressevent. This is to ensure that keyboard users will also be able to interact with the element.
<div>The second error it requires adding the ARIA role on the element with a click event handler . ARIA (Accessibility Interoperability and Accessibility) is a set of attributes and roles used to improve the accessibility of web content.
Solution
To eliminate the warning, add the following code in svelte.config.js
...
/** @type {import('@sveltejs/kit').Config} */
const config = {
// 添加以下代码
onwarn: (warning, handler) => {
if (warning.code.startsWith('a11y-')) {
return;
}
handler(warning);
},
kit: {
adapter: adapter(),
}
};