useAriaPropsSupportedByRole
Diagnostic Category: lint/nursery/useAriaPropsSupportedByRole
Since: v1.9.0
Sources:
- Same as:
jsx-a11y/role-supports-aria-props
Enforce that ARIA properties are valid for the roles that are supported by the element.
Invalid ARIA properties can make it difficult for users of assistive technologies to understand the purpose of the element.
Examples
Section titled ExamplesInvalid
Section titled Invalid<a href="#" aria-checked />code-block.jsx:1:1 lint/nursery/useAriaPropsSupportedByRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ The ARIA attribute ‘aria-checked’ is not supported by this element.
> 1 │ <a href=”#” aria-checked />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Ensure that ARIA attributes are valid for the role of the element.
<img alt="foobar" aria-checked />code-block.jsx:1:1 lint/nursery/useAriaPropsSupportedByRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ The ARIA attribute ‘aria-checked’ is not supported by this element.
> 1 │ <img alt=“foobar” aria-checked />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Ensure that ARIA attributes are valid for the role of the element.
Valid
Section titled Valid<> <a href="#" aria-expanded /> <img alt="foobar" aria-hidden /> <div role="heading" aria-level="1" /></>