This rule enforces that non-interactive HTML elements are not assigned interactive roles (e.g., button, link, menuitem).

Non-interactive elements such as <div>, <li>, or <h1> should not be given interactive ARIA roles, as this creates accessibility issues — assistive technologies expect interactive elements to support focus and keyboard interaction.

Example

// Bad
<h1 role="button">Click me</h1>
<li role="link">Navigate</li>

// Good
<button>Click me</button>
<a href="/page">Navigate</a>

References

• Umbrella issue: ☂️ eslint-plugin-jsx-a11y #1141
• Original docs: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/no-noninteractive-element-to-interactive-role.md
• Original source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/src/rules/no-noninteractive-element-to-interactive-role.js
• Original tests: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js