jsx-a11y/no-noninteractive-element-interactions 正确性
它的作用
阻止将鼠标或键盘事件处理器分配给非交互式 HTML 元素以及具有非交互式 ARIA 角色的元素。
为什么这很糟糕？
<main>、<h1>、<p>、<img>、<li>、<ul> 和 <ol> 等非交互式元素表示内容或容器。向它们添加交互处理器可能会使 用户界面难以或无法通过辅助技术操作。
将处理器移动到交互式元素上，例如 <button> 或 <a href>，或者使用 具有适当交互角色和键盘行为的元素。
示例
以下是此规则的错误代码示例：
jsx
<li onClick={() => {}} />
<div role="listitem" onKeyDown={() => {}} />以下是此规则的正确代码示例：
jsx
<button onClick={() => {}} />
<div role="button" onClick={() => {}} />
<div onClick={() => {}} role="presentation" />配置
此规则接受一个包含以下属性的配置对象：
handlers
type: string[]
default: null
应触发此规则的事件处理器名称数组。
如何使用
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-interactions": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["jsx-a11y"],
rules: {
"jsx-a11y/no-noninteractive-element-interactions": "error",
},
});bash
oxlint --deny jsx-a11y/no-noninteractive-element-interactions --jsx-a11y-plugin版本
此规则于 v1.65.0 中添加。