useValidAriaRole

Este conteúdo não está disponível em sua língua ainda.

Diagnostic Category: lint/a11y/useValidAriaRole

JSX and TSX

Since: v1.4.0

Sources:

Same as: jsx-a11y/aria-role

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"],
        "ignoreNonDom": true
    }
}

Accessibility guidelines

WCAG 4.1.2