Skip to content
Biome
Docs Blog Playground

noInteractiveElementToNoninteractiveRole

Diagnostic Category: lint/a11y/noInteractiveElementToNoninteractiveRole

Since: v1.3.0

Sources:

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

Section titled Examples

Invalid

Section titled 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

Section titled Valid
<input role="button" />;
<canvas role="img" />;
Section titled Related links