noNoninteractiveElementToInteractiveRole

Diagnostic Category: lint/a11y/noNoninteractiveElementToInteractiveRole

JSX and TSX

Since: v1.0.0

Sources:

Same as: jsx-a11y/no-noninteractive-element-to-interactive-role

Description

Enforce that interactive ARIA roles are not assigned to non-interactive HTML elements.

Non-interactive HTML elements indicate content and containers in the user interface. Non-interactive elements include <main>, <area>, <h1> (,<h2>, etc), <img>, <li>, <ul> and <ol>.

Interactive HTML elements indicate controls in the user interface. Interactive elements include <a href>, <button>, <input>, <select>, <textarea>.

WAI-ARIA roles should not be used to convert a non-interactive element to an interactive element. Interactive ARIA roles include button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch and textbox.

Examples

Invalid

<h1 role="button">Some text</h1>

code-block.jsx:1:5 lint/a11y/noNoninteractiveElementToInteractiveRole  FIXABLE  ━━━━━━━━━━━━━━━━━━━━

  ✖ The HTML element h1 is non-interactive and should not have an interactive role.
  
  > 1 │ <h1 role=“button”>Some text</h1>
      │     ^^^^^^^^^^^^^
    2 │ 
  
  ℹ Replace h1 with a div or a span.
  
  ℹ Unsafe fix: Remove the role attribute.
  
    1 │ <h1·role=“button”>Some·text</h1>
      │     -------------

Valid

<span role="button">Some text</span>

Accessibility guidelines

WCAG 4.1.2

Resources

How to configure

{
  "linter": {
    "rules": {
      "a11y": {
        "noNoninteractiveElementToInteractiveRole": "error"
      }
    }
  }
}