← Back to rules

jsx-a11y/aria-activedescendant-has-tabindex 正确性

它的作用

强制具有 aria-activedescendant 属性的元素是可聚焦的。

为什么这是问题？

具有 aria-activedescendant 属性的元素必须是可聚焦的，以便用户可以通过键盘输入导航到它们。如果没有正确的 tabindex，屏幕阅读器用户将无法通过键盘导航访问该元素，导致功能不可用。

示例

此规则的 错误 代码示例：

const Bad = <div aria-activedescendant={someID} />;

此规则的 正确 代码示例：

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} />
  </>
);

如何使用

要通过配置文件或 CLI 启用此规则，可以使用：

配置 (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/aria-activedescendant-has-tabindex": "error"
  }
}

CLI

oxlint --deny jsx-a11y/aria-activedescendant-has-tabindex --jsx-a11y-plugin

参考资料

• 规则源码