useValidAriaRole (since v1.4.0)
Diagnostic Category: lint/a11y/useValidAriaRole
Sources:
- Same as:
jsx-a11y/aria-role
Elements with ARIA roles must use a valid, non-abstract ARIA role.
Examples
Section titled ExamplesInvalid
Section titled 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
Section titled Valid<> <div role="button"></div> <div role={role}></div> <div></div></>Options
Section titled Options{ "//": "...", "options": { "allowInvalidRoles": ["invalid-role", "text"], "nonIgnoreDom": true }}