useValidAriaRole

诊断类别：lint/a11y/useValidAriaRole

¥Diagnostic Category: lint/a11y/useValidAriaRole

JSX and TSX

自从：v1.4.0

¥Since: v1.4.0

来源：

¥Sources:

与以下相同：jsx-a11y/aria-role

¥Same as: jsx-a11y/aria-role

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

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

示例

¥Examples

无效

¥Invalid

<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>
      │      -----------------

<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>
      │      ------------

<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>
      │      -------

<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

<>
  <div role="button"></div>
  <div role={role}></div>
  <div></div>
</>

选项

¥Options

{
    "//": "...",
    "options": {
        "allowInvalidRoles": ["invalid-role", "text"],
        "nonIgnoreDom": true
    }
}

可访问性指南

¥Accessibility guidelines

WCAG 4.1.2

资源

¥Resources

useValidAriaRole

示例

无效

有效

选项

可访问性指南

资源

相关链接