noInteractiveElementToNoninteractiveRole

Diagnostic Category: lint/a11y/noInteractiveElementToNoninteractiveRole

JSX and TSX

Since: v1.3.0

Sources:

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

Description

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

Interactive HTML elements indicate controls in the user interface. Interactive elements include <a href>, <button>, <input>, <select>, <textarea>. Non-interactive HTML elements and non-interactive ARIA roles indicate content and containers in the user interface. Non-interactive elements include <main>, <area>, <h1> (,<h2>, etc), <img>, <li>, <ul> and <ol>.

WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element. Non-interactive ARIA roles include article, banner, complementary, img, listitem, main, region and tooltip.

Examples

Invalid

<input role="img" />;

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

  ✖ Interactive elements should not be assigned non-interactive roles.
  
  > 1 │ <input role=“img” />;
      │ ^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ WAI-ARIA roles should not be used to convert an interactive element to a non-interactive element.
  
  ℹ Wrap your interactive element in a <div> with the desired role or put the content inside your interactive element.
  
  ℹ Unsafe fix: Remove the role attribute.
  
    1 │ <input·role=“img”·/>;
      │        -----------

Valid

<input role="button" />;

<canvas role="img" />;

How to configure

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