noNoninteractiveTabindex

JSX and TSX

摘要

¥Summary

规则生效日期：v1.0.0

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

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

¥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-tabindex 相同
  
  ¥Same as jsx-a11y/no-noninteractive-tabindex

如何配置

¥How to configure

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

描述

¥Description

强制将 tabIndex 分配给具有的非交互式 HTML 元素。

¥Enforce that tabIndex is not assigned to non-interactive HTML elements.

使用 tab 键浏览网页时，将其限制为交互元素。你不需要将 tabindex 添加到无序列表中的项目，因为辅助技术可以浏览 HTML。保持制表符环较小，这是制表符时元素的顺序，以获得更高效和可访问的浏览体验。

¥When using the tab key to navigate a webpage, limit it to interactive elements. You don’t need to add tabindex to items in an unordered list as assistive technology can navigate through the HTML. Keep the tab ring small, which is the order of elements when tabbing, for a more efficient and accessible browsing experience.

示例

¥Examples

无效

¥Invalid

1
<div tabIndex="0" />

code-block.jsx:1:6 lint/a11y/noNoninteractiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The HTML element div is non-interactive. Do not use tabIndex.
  
  > 1 │ <div tabIndex=“0” />
      │      ^^^^^^^^^^^^
    2 │ 
  
  ℹ Adding non-interactive elements to the keyboard navigation flow can confuse users.
  
  ℹ Unsafe fix: Remove the tabIndex attribute.
  
    1 │ <div·tabIndex=“0”·/>
      │      -------------

1
<div role="article" tabIndex="0" />

code-block.jsx:1:21 lint/a11y/noNoninteractiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The HTML element div is non-interactive. Do not use tabIndex.
  
  > 1 │ <div role=“article” tabIndex=“0” />
      │                     ^^^^^^^^^^^^
    2 │ 
  
  ℹ Adding non-interactive elements to the keyboard navigation flow can confuse users.
  
  ℹ Unsafe fix: Remove the tabIndex attribute.
  
    1 │ <div·role=“article”·tabIndex=“0”·/>
      │                     -------------

1
<article tabIndex="0" />

code-block.jsx:1:10 lint/a11y/noNoninteractiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The HTML element article is non-interactive. Do not use tabIndex.
  
  > 1 │ <article tabIndex=“0” />
      │          ^^^^^^^^^^^^
    2 │ 
  
  ℹ Adding non-interactive elements to the keyboard navigation flow can confuse users.
  
  ℹ Unsafe fix: Remove the tabIndex attribute.
  
    1 │ <article·tabIndex=“0”·/>
      │          -------------

有效

¥Valid

1
<div />

1
<MyButton tabIndex={0} />

1
<article tabIndex="-1" />

noNoninteractiveTabindex

摘要

如何配置

描述

示例

无效

有效

相关链接