noPositiveTabindex (since v1.0.0)

Diagnostic Category: lint/a11y/noPositiveTabindex

Sources:

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

Prevent the usage of positive integers on tabIndex property

Avoid positive tabIndex property values to synchronize the flow of the page with keyboard tab order.

Accessibility guidelines

WCAG 2.4.3

Examples

Invalid

<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 tableIndex prop value with 0.
  
    1   │ - <div·tabIndex={1}>foo</div>
      1 │ + <div·tabIndex="0">foo</div>
    2 2 │

<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 tableIndex prop value with 0.
  
    1   │ - <div·tabIndex={"1"}·/>
      1 │ + <div·tabIndex="0"·/>
    2 2 │

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 tableIndex prop value with 0.
  
    1   │ - React.createElement("div",·{·tabIndex:·1·})
      1 │ + React.createElement("div",·{·tabIndex:·"0"·})
    2 2 │

Valid

<div tabIndex="0" />

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