nonInteractiveElementTabIndexes

Reports non-interactive elements with positive or zero tabIndex values.

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

Tab key navigation should be limited to interactive elements. Adding tabIndex to non-interactive elements creates unnecessary stops in the tab order and can confuse users relying on keyboard navigation.

Non-interactive elements can use tabIndex="-1" if they need to be programmatically focused, but should not be in the natural tab order.

Examples

❌ Incorrect

<div tabIndex="0" />

<article tabIndex={0} />

<div role="article" tabIndex="0" />

✅ Correct

<div />

<div tabIndex="-1" />

<button tabIndex="0" />

<div role="button" tabIndex="0" />

When Not To Use It

If you have specific requirements for keyboard navigation that require non-interactive elements to be in the tab order, you may need to disable this rule.

Further Reading

• WCAG 2.4.3 - Focus Order

Equivalents in Other Linters

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