Why is this an issue?
ARIA (Accessible Rich Internet Applications) attributes are used to enhance the accessibility of web content and web applications. These attributes
provide additional information about an element’s role, state, properties, and values to assistive technologies like screen readers.
This rule checks that when using the role property in DOM elements, its value is a valid non-abstract ARIA role.
This rule does not cover non-DOM elements, such as custom components.
How to fix it in JSX
Check that each element with a defined ARIA role has a valid non-abstract value.
<div role="meth" aria-label="a^{2} + b^{2} = c^{2}">
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
</div>
To fix the code use a valid value for the ARIA role attribute.
<div role="math" aria-label="a^{2} + b^{2} = c^{2}">
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
</div>
Resources
Documentation
Standards
