interactiveElementRoles

Reports interactive elements with non-interactive ARIA roles.

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

Interactive HTML elements such as <button> and <a> are given interactions such as Tab focus by browsers. Giving an interactive HTML element a non-interactive role will remove those interactions, which causes accessibility issues on pages that do so. Preserve the native element behavior or use a different native element instead.

Examples

❌ Incorrect

<button role="article" />

<a role="img" />

<input role="navigation" />

✅ Correct

<div role="article" />

<img alt="description" />

<nav>
  <a href="/" />
</nav>

<button />

<a href="/" />

When Not To Use It

If you are using a framework that intentionally removes native browser interactions, you can disable this rule. However, removing native browser interactions is strongly discouraged as it harms accessibility. It is recommended to preserve native interactive element behaviors.

Further Reading

• WCAG 4.1.2 - Name, Role, Value
• WAI-ARIA Roles

Equivalents in Other Linters

• ESLint: jsx-a11y/no-interactive-element-to-noninteractive-role