useValidAriaRole

JSX and TSX

摘要

¥Summary

规则生效日期：v1.4.0

¥Rule available since: v1.4.0
诊断类别：lint/a11y/useValidAriaRole

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

¥This rule is recommended, which means is enabled by default.
此规则包含 unsafe 修复程序。

¥This rule has an unsafe fix.
此规则的默认严重级别为 error。

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

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

如何配置

¥How to configure

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

描述

¥Description

具有 ARIA 角色的元素必须使用有效的非抽象 ARIA 角色。

¥Elements with ARIA roles must use a valid, non-abstract ARIA role.

示例

¥Examples

无效

¥Invalid

1
<div role="datepicker"></div>

code-block.jsx:1:1 lint/a11y/useValidAriaRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
  > 1 │ <div role=“datepicker”></div>
      │ ^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Check WAI-ARIA for valid roles or provide options accordingly.
  
  ℹ Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    1 │ <div·role=“datepicker”></div>
      │      -----------------

1
<div role="range"></div>

code-block.jsx:1:1 lint/a11y/useValidAriaRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
  > 1 │ <div role=“range”></div>
      │ ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Check WAI-ARIA for valid roles or provide options accordingly.
  
  ℹ Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    1 │ <div·role=“range”></div>
      │      ------------

1
<div role=""></div>

code-block.jsx:1:1 lint/a11y/useValidAriaRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
  > 1 │ <div role=""></div>
      │ ^^^^^^^^^^^^^
    2 │ 
  
  ℹ Check WAI-ARIA for valid roles or provide options accordingly.
  
  ℹ Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    1 │ <div·role=""></div>
      │      -------

1
<Foo role="foo"></Foo>

code-block.jsx:1:1 lint/a11y/useValidAriaRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
  
  > 1 │ <Foo role=“foo”></Foo>
      │ ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Check WAI-ARIA for valid roles or provide options accordingly.
  
  ℹ Unsafe fix: Remove the invalid role attribute.
     Check the list of all valid role attributes.
  
    1 │ <Foo·role=“foo”></Foo>
      │      ----------

有效

¥Valid

1
<>
2
  <div role="button"></div>
3
  <div role={role}></div>
4
  <div></div>
5
</>

选项

¥Options

`allowInvalidRoles`

它允许指定一个角色列表，否则这些角色可能无效。

¥It allows specifying a list of roles that might be invalid otherwise

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useValidAriaRole": {
6
          "options": {
7
            "allowInvalidRoles": [
8
              "datepicker"
9
            ]
10
          }
11
        }
12
      }
13
    }
14
  }
15
}

1
<div role="datepicker"></div>

`ignoreNonDom`

使用此选项忽略非 DOM 元素，例如组件。

¥Use this option to ignore non-DOM elements, such as components

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useValidAriaRole": {
6
          "options": {
7
            "ignoreNonDom": true
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

1
<Datepicker role="foo"></Datepicker>

可访问性指南

¥Accessibility guidelines

WCAG 4.1.2

资源

¥Resources

useValidAriaRole

摘要

如何配置

描述

示例

无效

有效

选项

allowInvalidRoles

ignoreNonDom

可访问性指南

资源

相关链接

`allowInvalidRoles`

`ignoreNonDom`