noNoninteractiveTabindex

诊断类别：lint/a11y/noNoninteractiveTabindex

¥Diagnostic Category: lint/a11y/noNoninteractiveTabindex

JSX and TSX

自从：v1.0.0

¥Since: v1.0.0

来源：

¥Sources:

与以下相同：jsx-a11y/no-noninteractive-tabindex

¥Same as: jsx-a11y/no-noninteractive-tabindex

强制将 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

<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”·/>
      │      -------------

<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”·/>
      │                     -------------

<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

<div />

<MyButton tabIndex={0} />

<article tabIndex="-1" />

noNoninteractiveTabindex

示例

无效

有效

相关链接