Skip to content
Flint
Blog

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

Section titled “Examples”
<
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div tabIndex="0" />
Error ts(2322)  ― Type 'string' is not assignable to type 'number'.
<
JSX.IntrinsicElements.article: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>
article 
HTMLAttributes<HTMLElement>.tabIndex?: number | undefined
tabIndex={0} />
<
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div 
HTMLAttributes<HTMLDivElement>.role?: AriaRole | undefined
role="article" tabIndex="0" />
Error ts(2322)  ― Type 'string' is not assignable to type 'number'.

When Not To Use It

Section titled “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

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”
Made with ❤️‍🔥 around the world by the Flint team and contributors.