useAriaPropsForRole

JSX and TSX

摘要

¥Summary

规则生效日期：v1.0.0

¥Rule available since: v1.0.0
诊断类别：lint/a11y/useAriaPropsForRole

¥Diagnostic Category: lint/a11y/useAriaPropsForRole
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
来源：

¥Sources:
- 与 jsx-a11y/role-has-required-aria-props 相同
  
  ¥Same as jsx-a11y/role-has-required-aria-props

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useAriaPropsForRole": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

强制具有 ARIA 角色的元素必须具有该角色所需的所有 ARIA 属性。

¥Enforce that elements with ARIA roles must have all required ARIA attributes for that role.

示例

¥Examples

无效

¥Invalid

1
<span role="checkbox"></span>

code-block.jsx:1:7 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The element with the checkbox ARIA role does not have the required ARIA attributes.
  
  > 1 │ <span role=“checkbox”></span>
      │       ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Missing ARIA prop(s):
  
  - aria-checked

1
<span role="heading"></span>

code-block.jsx:1:7 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The element with the heading ARIA role does not have the required ARIA attributes.
  
  > 1 │ <span role=“heading”></span>
      │       ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Missing ARIA prop(s):
  
  - aria-level

有效

¥Valid

1
<span role="checkbox" aria-checked="true"></span>

1
<span role="heading" aria-level="1"></span>

可访问性指南

¥Accessibility guidelines

WCAG 4.1.2

资源

¥Resources

useAriaPropsForRole

摘要

如何配置

描述

示例

无效

有效

可访问性指南

资源

相关链接