nonInteractiveElementTabIndexes
Reports non-interactive elements with positive or zero tabIndex values.
✅ This rule is included in the jsx logical preset.
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”<div tabIndex="0" /><article tabIndex={0} /><div role="article" tabIndex="0" /><div /><div tabIndex="-1" /><button tabIndex="0" /><div role="button" tabIndex="0" />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 ❤️🔥 in Boston by
Josh Goldberg and contributors.