Skip to content
Biome
Docs Blog Playground

noInteractiveElementToNoninteractiveRole (since v1.3.0)

Diagnostic Category: lint/a11y/noInteractiveElementToNoninteractiveRole

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" />;
a11y/noInteractiveElementToNoninteractiveRole.js: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" />;
Section titled Related links