useValidAriaRole
Diagnostic Category: lint/a11y/useValidAriaRole
Since: v1.4.0
Sources:
- Same as:
jsx-a11y/aria-role
Description
Section titled “Description”Elements with ARIA roles must use a valid, non-abstract ARIA role.
Examples
Section titled “Examples”Invalid
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>
│ ----------
<> <div role="button"></div> <div role={role}></div> <div></div></>Options
Section titled “Options”{ "//": "...", "options": { "allowInvalidRoles": ["invalid-role", "text"], "ignoreNonDom": true }}Accessibility guidelines
Section titled “Accessibility guidelines”Resources
Section titled “Resources”How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useValidAriaRole": "error" } } }}