Skip to content
← Back to rules

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 中添加的。

参考资料