noPositiveTabindex
Summary
Section titled Summary- Rule available since:
v1.0.0 - Diagnostic Category:
lint/a11y/noPositiveTabindex - This rule is recommended, which means 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
- Same as
Description
Section titled DescriptionPrevent 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
Section titled Accessibility guidelinesExamples
Section titled ExamplesInvalid
Section titled 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
Section titled Valid<div tabIndex="0" />React.createElement("div", { tabIndex: -1 })How to configure
Section titled How to configure{ "linter": { "rules": { "a11y": { "noPositiveTabindex": "error" } } }}