noNoninteractiveTabindex

Diagnostic Category: lint/a11y/noNoninteractiveTabindex

JSX and TSX

Since: v1.0.0

Sources:

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

Description

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

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" />

How to configure

{
  "linter": {
    "rules": {
      "a11y": {
        "noNoninteractiveTabindex": "error"
      }
    }
  }
}