【svelte】A11y: ＜div＞ with click handler must have an ARIA role；A11y: non-interactive elements

问题描述

svelte项目跑起来的时候，控制台打印以下警告：

[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 

原因

这是svelte项目的编译器警告，意思是遇到的错误信息是关于可访问性（A11y）方面的规则，它们指出在处理点击事件的 <div> 元素中应该添加一些辅助功能标记。

第一个错误它要求在具有可见但非交互的元素上，如果存在 on:click 事件，则必须伴随着 on:keydown、on:keyup 或 on:keypress 事件。这是为了确保键盘用户也能够与该元素进行交互。

第二个错误它要求在具有点击事件处理程序的 <div> 元素上添加 ARIA 角色。ARIA（可访问性互操作性和可达性）是一组属性和角色，用于改善 Web 内容的可访问性。

解决办法

要想消除警告，在 svelte.config.js 添加以下代码

...

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // 添加以下代码
  onwarn: (warning, handler) => {
    if (warning.code.startsWith('a11y-')) {
      return;
    }
    handler(warning);
  },
  kit: {
    adapter: adapter(),
  }
};