no-interactive-element-to-noninteractive-role.md

no-interactive-element-to-noninteractive-role

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.

How do I resolve this error?

Case: The element should be a container, like an article

Wrap your interactive element in a <div> with the desired role.

<div role="article">
  <button>Save</button>
</div>

Case: The element should be content, like an image

Put the content inside your interactive element.

<div
  role="button"
  onClick={() => {}}
  onKeyPress={() => {}}
  tabIndex="0">
  <div role="img" aria-label="Save" />
</div>

Rule details