jsx-a11y/interactive-supports-focus Correctness
它的作用
强制具有交互角色和交互处理器 （鼠标或按键）的元素必须可聚焦。
为什么这很糟糕？
处理用户交互（例如 onClick）但不是 原生可聚焦的元素（如 <div> 或 <span>）必须设置为可聚焦， 这样仅使用键盘的用户和辅助技术用户才能访问并 激活它们。
如果没有 tabIndex，这些元素就无法通过键盘导航到达， 从而为无法使用鼠标的用户造成障碍。
示例
以下是此规则的错误代码示例：
jsx
<span onClick={submitForm} role="button">提交</span>
<a onClick={showNextPage} role="button">下一页</a>以下是此规则的正确代码示例：
jsx
<div aria-hidden onClick={() => void 0} />
<span onClick={doSomething} tabIndex={0} role="button">点击我！</span>
<span onClick={doSomething} tabIndex={-1} role="menuitem">也点击我！</span>
<a href="javascript:void(0);" onClick={doSomething}>点击所有内容！</a>
<button onClick={doSomething}>点击按钮 :)</button>配置
此规则接受一个包含以下属性的配置对象：
tabbable
type: string[]
default: ["button", "checkbox", "link", "searchbox", "spinbutton", "switch", "textbox"]
一个应被视为可通过 Tab 键聚焦的交互式 ARIA 角色数组（需要 tabIndex={0}）。 不在此列表中的交互角色只需要可聚焦即可（tabIndex={-1} 就足够了）。 默认为 ["button", "checkbox", "link", "searchbox", "spinbutton", "switch", "textbox"]。
如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/interactive-supports-focus": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["jsx-a11y"],
rules: {
"jsx-a11y/interactive-supports-focus": "error",
},
});bash
oxlint --deny jsx-a11y/interactive-supports-focus --jsx-a11y-plugin版本
此规则在 v1.63.0 中添加。