noNoninteractiveTabindex (HTML)

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/a11y/noNoninteractiveTabindex
This rule is recommended, meaning it is enabled by default.
This rule has an unsafe fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/no-noninteractive-tabindex

How to configure

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

Description

Require a negative integer tabindex on non-interactive elements.

Pressing Tab moves keyboard focus through interactive controls. Adding a non-interactive element to that order creates a keyboard stop with no expected action and can confuse users. Assistive technologies can navigate structural content without adding it to the tab order.

For a static value, only a negative integer is accepted. Zero, positive integers, empty values, and other text are reported. Dynamic values are not evaluated.

Examples

Invalid

1
<div tabindex="0"></div>

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

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

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

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

  ✖ The HTML element div is non-interactive. Do not use tabindex.
  
  > 1 │ <div role="article" tabindex="0"></div>
      │                     ^^^^^^^^^^^^
    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"></div>
      │                     ------------

1
<article tabindex="0"></article>

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

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

Valid

1
<div></div>

1
<button tabindex="0"></button>

1
<article tabindex="-1"></article>