useValidAriaRole

JSX and TSX

Summary

• Rule available since: v1.4.0
• Diagnostic Category: lint/a11y/useValidAriaRole
• This rule is recommended, which means is enabled by default.
• This rule has an unsafe fix.
• The default severity of this rule is error.
• Sources:
  • Same as jsx-a11y/aria-role

How to configure

biome.json

{
  "linter": {
    "rules": {
      "a11y": {
        "useValidAriaRole": "error"
      }
    }
  }
}

Description

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

allowInvalidRoles

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

biome.json

{
  "linter": {
    "rules": {
      "a11y": {
        "useValidAriaRole": {
          "options": {
            "allowInvalidRoles": [
              "datepicker"
            ]
          }
        }
      }
    }
  }
}

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

ignoreNonDom

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

biome.json

{
  "linter": {
    "rules": {
      "a11y": {
        "useValidAriaRole": {
          "options": {
            "ignoreNonDom": true
          }
        }
      }
    }
  }
}

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

Accessibility guidelines

• WCAG 4.1.2

Resources

• Chrome Audit Rules, AX_ARIA_01
• DPUB-ARIA roles
• MDN: Using ARIA: Roles, states, and properties

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases