Skip to content
← Back to rules

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

参考资料