Why this matters
Assigning non-interactive ARIA roles to interactive elements can mislead assistive technologies, causing accessibility issues. Always ensure elements have appropriate roles.
Ensure that interactive DOM elements have appropriate ARIA roles. Incorrect roles can mislead assistive technologies, affecting accessibility.
Assigning non-interactive ARIA roles to interactive elements can mislead assistive technologies, causing accessibility issues. Always ensure elements have appropriate roles.
Side-by-side examples engineers can pattern-match during review.
function myButton() {
return <button role="article">Click me!</button>; // Noncompliant; "button" is interactive, but "article" isn't
}function myButton() {
return <button role="button">Click me!</button>;
}function myButton() {
return <button role="article">Click me!</button>; // Noncompliant; "button" is interactive, but "article" isn't
}function myButton() {
return <button role="button">Click me!</button>;
}From the same buckets as this rule.