jsx-a11y/no-noninteractive-tabindex 正确性
它的作用
此规则检查非可交互元素是否具有 tabIndex 属性,该属性会通过键盘导航使其变为可交互。
为什么这是个问题?
键盘导航的 Tab 键应仅限于页面中可以交互的元素。 因此,例如在无序列表中的项目上添加 tabindex 并非必要, 以使其可通过辅助技术进行导航。
这些应用已经基于页面的 HTML 提供了页面遍历机制。 通常,我们应该努力减少页面的 tab ring(tab 顺序环)大小,而不是增加它。
示例
此规则的 错误 代码示例:
jsx
<div tabIndex="0" />
<div role="article" tabIndex="0" />
<article tabIndex="0" />
<article tabIndex={0} />此规则的 正确 代码示例:
jsx
<div />
<MyButton tabIndex={0} />
<button />
<button tabIndex="0" />
<button tabIndex={0} />
<div />
<div tabIndex="-1" />
<div role="button" tabIndex="0" />
<div role="article" tabIndex="-1" />
<article tabIndex="-1" />配置
此规则接受一个配置对象,包含以下属性:
allowExpressionValues
type: boolean
default: true
如果为 true,允许 tabIndex 值为表达式值(如变量、三元运算符)。如果为 false,则仅允许字符串字面量值。
roles
type: string[]
default: ["tabpanel"]
应被视为可交互的 ARIA 角色数组。
tags
type: string[]
default: []
应被视为可交互的自定义 HTML 元素数组。
如何使用
要通过配置文件或 CLI 启用 此规则,可以使用:
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/no-noninteractive-tabindex": "error"
}
}bash
oxlint --deny jsx-a11y/no-noninteractive-tabindex --jsx-a11y-plugin