Lint Rules

noPositiveTabindex (since v10.0.0)

This rule is recommended by Rome.

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>
a11y/noPositiveTabindex.js:1:15 lint/a11y/noPositiveTabindex ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   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.
  
<div tabIndex={"1"} />
a11y/noPositiveTabindex.js:1:15 lint/a11y/noPositiveTabindex ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   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.
  
React.createElement("div", { tabIndex: 1 })
a11y/noPositiveTabindex.js:1:40 lint/a11y/noPositiveTabindex ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   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.
  

Valid

<div tabIndex="0" />
React.createElement("div", { tabIndex: -1 })