Problembeschreibung
Wenn das Svelte-Projekt ausgeführt wird, gibt die Konsole die folgenden Warnungen aus:
[vite-plugin-svelte] /src/routes/+page.svelte:50:8 A11y: Sichtbare, nicht interaktive Elemente mit einem on:click-Ereignis müssen von einem on:keydown, on:keyup oder on begleitet werden: Tastendruckereignis.
[vite-plugin-svelte] /src/routes/+page.svelte:50:8 A11y: <div> mit Click-Handler muss eine ARIA-Rolle haben
Grund
Dies ist eine Compiler-Warnung für das Svelte-Projekt. Das bedeutet, dass es sich bei der aufgetretenen Fehlermeldung um Barrierefreiheitsregeln (A11y) handelt, die besagen, dass dem <div>Element, das das Klickereignis verarbeitet, Barrierefreiheits-Markup hinzugefügt werden sollte.
Der erste Fehler erfordert, dass bei Elementen, die sichtbar, aber nicht interaktiv sind, ein Ereignis vom Ereignis , oder on:clickbegleitet werden muss . Dadurch soll sichergestellt werden, dass auch Tastaturbenutzer mit dem Element interagieren können.on:keydownon:keyupon:keypress
<div>Der zweite Fehler erfordert das Hinzufügen der ARIA-Rolle zum Element mit einem Click-Event-Handler . ARIA (Accessibility Interoperability and Accessibility) ist eine Reihe von Attributen und Rollen, die zur Verbesserung der Barrierefreiheit von Webinhalten verwendet werden.
Lösung
Um die Warnung zu beseitigen, fügen Sie den folgenden Code in svelte.config.js hinzu
...
/** @type {import('@sveltejs/kit').Config} */
const config = {
// 添加以下代码
onwarn: (warning, handler) => {
if (warning.code.startsWith('a11y-')) {
return;
}
handler(warning);
},
kit: {
adapter: adapter(),
}
};