noNoninteractiveElementToInteractiveRole
诊断类别：lint/a11y/noNoninteractiveElementToInteractiveRole
¥Diagnostic Category: lint/a11y/noNoninteractiveElementToInteractiveRole
自从：v1.0.0
¥Since: v1.0.0
来源：
¥Sources:
-
与以下相同：
jsx-a11y/no-noninteractive-element-to-interactive-role¥Same as:
jsx-a11y/no-noninteractive-element-to-interactive-role
强制不将交互式 ARIA 角色分配给非交互式 HTML 元素。
¥Enforce that interactive ARIA roles are not assigned to non-interactive HTML elements.
非交互式 HTML 元素表示用户界面中的内容和容器。非交互式元素包括 <main>、<area>、<h1>（<h2> 等）、<img>、<li>、<ul> 和 <ol>。
¥Non-interactive HTML elements indicate content and containers in the user interface.
Non-interactive elements include <main>, <area>, <h1> (,<h2>, etc), <img>, <li>, <ul> and <ol>.
交互式 HTML 元素表示用户界面中的控件。交互式元素包括 <a href>、<button>、<input>、<select>、<textarea>。
¥Interactive HTML elements indicate controls in the user interface.
Interactive elements include <a href>, <button>, <input>, <select>, <textarea>.
WAI-ARIA 角色 不应用于将非交互式元素转换为交互式元素。交互式 ARIA 角色包括 button、link、checkbox、menuitem、menuitemcheckbox、menuitemradio、option、radio、searchbox、switch 和 textbox。
¥WAI-ARIA roles should not be used to convert a non-interactive element to an interactive element.
Interactive ARIA roles include button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch and textbox.
¥Examples
¥Invalid
<h1 role="button">Some text</h1>code-block.jsx:1:5 lint/a11y/noNoninteractiveElementToInteractiveRole FIXABLE ━━━━━━━━━━━━━━━━━━━━
✖ The HTML element h1 is non-interactive and should not have an interactive role.
> 1 │ <h1 role=“button”>Some text</h1>
│ ^^^^^^^^^^^^^
2 │
ℹ Replace h1 with a div or a span.
ℹ Unsafe fix: Remove the role attribute.
1 │ <h1·role=“button”>Some·text</h1>
│ -------------
¥Valid
<span role="button">Some text</span>可访问性指南
Section titled 可访问性指南¥Accessibility guidelines
¥Resources
¥Related links