useValidAriaRole (HTML)

Summary

Rule available since: v2.4.0
Diagnostic Category: lint/a11y/useValidAriaRole
This rule is recommended, meaning it is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/aria-role
- Same as @html-eslint/no-invalid-role

How to configure

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

Description

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

Remember that this rule only supports static values for the role attribute. Dynamic role values are not checked.

Examples

Invalid

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

code-block.html: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.html: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.html: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>
      │      -------

Valid

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

Options

`allowInvalidRoles`

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

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

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

Accessibility guidelines

WCAG 4.1.2