Skip to content

noPositiveTabindex

¥Summary

¥How to configure

biome.json
{
"linter": {
"rules": {
"a11y": {
"noPositiveTabindex": "error"
}
}
}
}

¥Description

防止在 tabIndex 属性上使用正整数

¥Prevent the usage of positive integers on tabIndex property

避免使用正的 tabIndex 属性值来同步页面流和键盘制表符顺序。

¥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 })

¥Related links