noPositiveTabindex (JavaScript)

Summary

Rule available since: v1.0.0
Diagnostic Category: lint/a11y/noPositiveTabindex
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:
- Same as jsx-a11y/tabindex-no-positive
- Inspired from @html-eslint/no-positive-tabindex
- Same as astro/jsx-a11y/tabindex-no-positive

How to configure

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

Description

Disallow positive values for the tabIndex property.

Keyboard focus determines which element receives keyboard input. A positive tabIndex overrides the page’s natural focus order and can make keyboard navigation unpredictable. Use 0 to include an element in the natural order, or -1 to exclude it from keyboard navigation while keeping it focusable through code.

Accessibility guidelines

WCAG 2.4.3

Examples

Invalid

1
<div tabIndex={1}>foo</div>

code-block.jsx:1:15 lint/a11y/noPositiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid positive values for the tabIndex prop.
  
  > 1 │ <div tabIndex={1}>foo</div>
      │               ^^^
    2 │ 
  
  ℹ Elements with a positive tabIndex override natural page content order. This causes elements without a positive tab index to come last when navigating using a keyboard.
  
  ℹ Use only 0 and -1 as tabIndex values. Avoid using tabIndex values greater than 0 and CSS properties that can change the order of focusable HTML elements.
  
  ℹ Unsafe fix: Replace the tabIndex prop value with 0.
  
    1   │ - <div·tabIndex={1}>foo</div>
      1 │ + <div·tabIndex="0">foo</div>
    2 2 │

1
<div tabIndex={"1"} />

code-block.jsx:1:15 lint/a11y/noPositiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid positive values for the tabIndex prop.
  
  > 1 │ <div tabIndex={"1"} />
      │               ^^^^^
    2 │ 
  
  ℹ Elements with a positive tabIndex override natural page content order. This causes elements without a positive tab index to come last when navigating using a keyboard.
  
  ℹ Use only 0 and -1 as tabIndex values. Avoid using tabIndex values greater than 0 and CSS properties that can change the order of focusable HTML elements.
  
  ℹ Unsafe fix: Replace the tabIndex prop value with 0.
  
    1   │ - <div·tabIndex={"1"}·/>
      1 │ + <div·tabIndex="0"·/>
    2 2 │

1
React.createElement("div", { tabIndex: 1 })

code-block.js:1:40 lint/a11y/noPositiveTabindex  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid positive values for the tabIndex prop.
  
  > 1 │ React.createElement("div", { tabIndex: 1 })
      │                                        ^
    2 │ 
  
  ℹ Elements with a positive tabIndex override natural page content order. This causes elements without a positive tab index to come last when navigating using a keyboard.
  
  ℹ Use only 0 and -1 as tabIndex values. Avoid using tabIndex values greater than 0 and CSS properties that can change the order of focusable HTML elements.
  
  ℹ Unsafe fix: Replace the tabIndex prop value with 0.
  
    1   │ - React.createElement("div",·{·tabIndex:·1·})
      1 │ + React.createElement("div",·{·tabIndex:·"0"·})
    2 2 │

Valid

1
<div tabIndex="0" />

1
React.createElement("div", { tabIndex: -1 })