staticElementInteractions

Reports static elements with event handlers that lack ARIA roles.

✅ This rule is included in the jsx logical and logicalStrict presets.

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

❌ Incorrect

<div onClick={() => {}} />

<span onKeyDown={handler} />;

✅ Correct

<div onClick={() => {}} role="button" />

<span onKeyDown={handler} role="link" />;

<button onClick={() => {}} />

When Not To Use It

If you are using a framework that automatically assigns element roles, you can disable this rule.

Further Reading

• WCAG 4.1.2: Name, Role, Value
• WAI-ARIA role attribute

Equivalents in Other Linters

• ESLint: jsx-a11y/no-static-element-interactions