jsx-a11y/no-noninteractive-element-to-interactive-role 正确性
它的作用
非交互式 HTML 元素在用户界面中表示_内容_和_容器_。 非交互式元素包括 <main>、<area>、<h1>（到 <h6>）、<p>、 <img>、<li>、<ul> 和 <ol>。
交互式 HTML 元素在用户界面中表示_控件_。 交互式元素包括 <a href>、<button>、<input>、<select>、 <textarea>。
WAI-ARIA 角色 不应被用于 将非交互式元素转换为交互式元素。交互式 ARIA 角色包括 button、link、checkbox、menuitem、menuitemcheckbox、 menuitemradio、option、radio、searchbox、switch 和 textbox。
为什么这不好？
用交互式角色覆盖非交互式元素的语义含义会给辅助技术用户带来困惑。该元素缺少交互式元素所提供的预期键盘交互模式和焦点管理。
示例
此规则的错误代码示例：
jsx
<h1 role="button">点击我</h1>
<li role="link">导航</li>
<article role="button">提交</article>此规则的正确代码示例：
jsx
<button>点击我</button>
<a href="/page">导航</a>
<div role="button">提交</div>
<ul role="menu"><li role="menuitem">项目</li></ul>Configuration
This rule accepts a configuration object containing the following properties:
type: Record<string, array>
如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/no-noninteractive-element-to-interactive-role": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["jsx-a11y"],
rules: {
"jsx-a11y/no-noninteractive-element-to-interactive-role": "error",
},
});bash
oxlint --deny jsx-a11y/no-noninteractive-element-to-interactive-role --jsx-a11y-plugin版本
此规则添加于 v1.64.0。