tabIndexPositiveValues

Reports positive tabIndex values.

✅ This rule is included in the jsx logical and logicalStrict presets.

Positive tabIndex values disrupt the natural tab order and make keyboard navigation unpredictable for users. Instead, use tabIndex="0" to include elements in the natural tab order, or tabIndex="-1" to make them programmatically focusable.

This is required for WCAG 2.4.3 compliance.

Examples

❌ Incorrect

<span tabIndex="5">content</span>

<span tabIndex="1">content</span>

<div tabIndex={3}>content</div>

✅ Correct

<span tabIndex="0">content</span>

<span tabIndex="-1">content</span>

<span tabIndex={0}>content</span>

<div>no tabIndex needed</div>

When Not To Use It

If you are managing tab orders with a well-defined focus management system that handles positive tabIndex values well, this rule may not be applicable.

Further Reading

• WCAG 2.4.3: Focus Order
• Avoid Using Tabindex with Positive Numbers

Equivalents in Other Linters

• ESLint: jsx-a11y/tabindex-no-positive
• Oxlint: jsx_a11y/tabindex-no-positive