staticElementInteractions
Reports static elements with event handlers that lack ARIA roles.
✅ This rule is included in the jsx logical preset.
Static HTML elements like <div> and <span> have no semantic meaning.
When adding interactive event handlers to these elements, you should provide a role attribute to convey their purpose to screen readers, search engine crawlers, and other technologies that rely on semantic elements.
Semantic HTML elements like <button> already have appropriate roles and don’t need additional attributes.
This is required for WCAG 4.1.2 compliance.
Examples
Section titled “Examples”<div onClick={() => {}} /><span onKeyDown={handler} /><div onClick={() => {}} role="button" /><span onKeyDown={handler} role="link" /><button onClick={() => {}} />When Not To Use It
Section titled “When Not To Use It”If you are using a framework that automatically assigns element roles, you can disable this rule.
Further Reading
Section titled “Further Reading”Equivalents in Other Linters
Section titled “Equivalents in Other Linters”
Made with ❤️🔥 in Boston by
Josh Goldberg and contributors.