noInteractiveElementToNoninteractiveRole

JSX and TSX

摘要

¥Summary

规则生效日期：v1.3.0

¥Rule available since: v1.3.0
诊断类别：lint/a11y/noInteractiveElementToNoninteractiveRole

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

¥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-interactive-element-to-noninteractive-role 相同
  
  ¥Same as jsx-a11y/no-interactive-element-to-noninteractive-role

如何配置

¥How to configure

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

描述

¥Description

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

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

1
<input role="button" />;

1
<canvas role="img" />;

noInteractiveElementToNoninteractiveRole

摘要

如何配置

描述

示例

无效

有效

相关链接