Why is this an issue?
ARIA properties, also known as "aria-* properties", are special attributes used in HTML to enhance the accessibility of web elements. They provide
additional semantics to help assistive technologies, like screen readers, interpret the element.
Roles, on the other hand, define what an element is or does in the context of a web page. Some elements have explicit roles, which are directly
defined by the developer. For example, a div element might be given a role of "button". Other elements have implicit roles, which are inferred based
on the type of the element. For example, an anchor tag <a href="#" /> has an implicit role of "link".
This rule ensures that the ARIA properties used on an element are ones that are supported by the role of that element. For instance, the ARIA
property aria-required is not supported by the role link. Therefore, using aria-required on an anchor tag would
violate this rule.
How to fix it in JSX
Check the spelling of the aria-* attributes and verify that they are actually supported by the element role.
<div role="checkbox" aria-chekd={isChecked}>Unchecked</div> {/* Noncompliant: aria-chekd is not supported */}
To fix the code remove non-compatible attributes or replace them with the correct ones.
<div role="checkbox" aria-checked={isChecked}>Unchecked</div>
Resources
Documentation
Standards
