← Back to rules

jsx-a11y/role-supports-aria-props 正确性

它做了什么

强制要求具有显式或隐式角色定义的元素仅包含该角色所支持的 aria-* 属性。 许多 ARIA 属性（状态和属性）只能用于具有特定角色的元素上。 某些元素具有隐式角色，例如 <a href="#" />，其将解析为 role="link"。

为什么这是错误的？

使用与元素角色不一致的 ARIA 属性可能导致辅助技术在理解和与页面内容互动时出现问题。

示例

以下为该规则的 错误 代码示例：

<ul role="radiogroup" "aria-labelledby"="foo">
    <li aria-required tabIndex="-1" role="radio" aria-checked="false">虹鳟鱼</li>
    <li aria-required tabIndex="-1" role="radio" aria-checked="false">山鳟鱼</li>
    <li aria-required tabIndex="0" role="radio" aria-checked="true">湖鳟鱼</li>
</ul>

以下为该规则的 正确 代码示例：

<ul role="radiogroup" aria-required "aria-labelledby"="foo">
    <li tabIndex="-1" role="radio" aria-checked="false">虹鳟鱼</li>
    <li tabIndex="-1" role="radio" aria-checked="false">山鳟鱼</li>
    <li tabIndex="0" role="radio" aria-checked="true">湖鳟鱼</li>
</ul>

如何使用

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

配置文件 (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/role-supports-aria-props": "error"
  }
}

CLI

oxlint --deny jsx-a11y/role-supports-aria-props --jsx-a11y-plugin

参考资料

• 规则源码