noInteractiveElementToNoninteractiveRole
诊断类别：lint/a11y/noInteractiveElementToNoninteractiveRole
¥Diagnostic Category: lint/a11y/noInteractiveElementToNoninteractiveRole
自从：v1.3.0
¥Since: v1.3.0
来源：
¥Sources:
-
与以下相同：
jsx-a11y/no-interactive-element-to-noninteractive-role¥Same as:
jsx-a11y/no-interactive-element-to-noninteractive-role
强制不将非交互式 ARIA 角色分配给交互式 HTML 元素。
¥Enforce that non-interactive ARIA roles are not assigned to interactive HTML elements.
交互式 HTML 元素表示用户界面中的控件。交互式元素包括 <a href>、<button>、<input>、<select>、<textarea>。非交互式 HTML 元素和非交互式 ARIA 角色表示用户界面中的内容和容器。非交互式元素包括 <main>、<area>、<h1>（<h2> 等）、<img>、<li>、<ul> 和 <ol>。
¥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 角色 不应用于将交互式元素转换为非交互式元素。非交互式 ARIA 角色包括 article、banner、complementary、img、listitem、main、region 和 tooltip。
¥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
¥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
<input role="button" />;<canvas role="img" />;¥Related links