コンテンツにスキップ

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.

<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·/>;
-----------
<input role="button" />;
<canvas role="img" />;