noNoninteractiveElementToInteractiveRole

JSX and TSX

摘要

¥Summary

规则生效日期：v1.0.0

¥Rule available since: v1.0.0
诊断类别：lint/a11y/noNoninteractiveElementToInteractiveRole

¥Diagnostic Category: lint/a11y/noNoninteractiveElementToInteractiveRole
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则包含 unsafe 修复程序。

¥This rule has an unsafe fix.
此规则的默认严重级别为 error。

¥The default severity of this rule is error.
来源：

¥Sources:
- 与 jsx-a11y/no-noninteractive-element-to-interactive-role 相同
  
  ¥Same as jsx-a11y/no-noninteractive-element-to-interactive-role

如何配置

¥How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noNoninteractiveElementToInteractiveRole": "error"
6
      }
7
    }
8
  }
9
}

描述

¥Description

强制不将交互式 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

1
<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

1
<span role="button">Some text</span>

可访问性指南

¥Accessibility guidelines

WCAG 4.1.2

资源

¥Resources

noNoninteractiveElementToInteractiveRole

摘要

如何配置

描述

示例

无效

有效

可访问性指南

资源

相关链接