nonInteractiveElementInteractions

Reports non-interactive elements with interactive event handlers.

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

Non-interactive HTML elements and non-interactive ARIA roles indicate content and containers in the user interface. These elements should not have interactive event handlers because they are not designed to be interactive.

Non-interactive elements include <main>, <area>, <h1> through <h6>, <p>, <img>, <li>, <ul>, and <ol>. Non-interactive ARIA roles include article, banner, complementary, img, listitem, main, navigation, region, and tooltip.

When you need to add interactivity, use native interactive elements like <button> or <a>, or add an appropriate interactive role to the element.

This is required for WCAG 4.1.2 compliance.

Examples

❌ Incorrect

<h1 onClick={() => {}}>Heading</h1>

<main onKeyDown={handler}>Content</main>;

<img onClick={handleClick} src="image.png" />;

<section onClick={handler} role="article" />;

✅ Correct

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

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

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

<section onClick={handler} role="button" />;

When Not To Use It

If you are using a framework that automatically handles accessibility for non-interactive elements with event handlers, you can disable this rule.

Further Reading

• WCAG 4.1.2: Name, Role, Value
• WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets
• WAI-ARIA roles

Equivalents in Other Linters

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