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 ExamplesInvalid
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" />;