jsx-a11y/aria-activedescendant-has-tabindex Correctness
它的作用
强制带有 aria-activedescendant 的元素可通过 Tab 键聚焦。
为什么这有问题?
带有 aria-activedescendant 的元素必须能够通过 Tab 键聚焦,以便用户使用键盘输入导航到它们。若没有正确的 tabindex,屏幕阅读器用户就无法通过键盘导航访问该元素,从而导致该功能无法访问。
示例
以下是此规则的错误代码示例:
jsx
const Bad = <div aria-activedescendant={someID} />;以下是此规则的正确代码示例:
jsx
const Good = (
<>
<CustomComponent />
<CustomComponent aria-activedescendant={someID} />
<CustomComponent aria-activedescendant={someID} tabIndex={0} />
<CustomComponent aria-activedescendant={someID} tabIndex={-1} />
<div />
<input />
<div tabIndex={0} />
<div aria-activedescendant={someID} tabIndex={0} />
<div aria-activedescendant={someID} tabIndex="0" />
<div aria-activedescendant={someID} tabIndex={1} />
<div aria-activedescendant={someID} tabIndex={-1} />
<div aria-activedescendant={someID} tabIndex="-1" />
<input aria-activedescendant={someID} />
<input aria-activedescendant={someID} tabIndex={0} />
<input aria-activedescendant={someID} tabIndex={-1} />
</>
);如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/aria-activedescendant-has-tabindex": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["jsx-a11y"],
rules: {
"jsx-a11y/aria-activedescendant-has-tabindex": "error",
},
});bash
oxlint --deny jsx-a11y/aria-activedescendant-has-tabindex --jsx-a11y-plugin版本
此规则是在 v0.2.1 中添加的。
