noNoninteractiveTabindex (since v12.1.0)
Enforce that tabIndex is not assigned to non-interactive HTML elements.
When using the tab key to navigate a webpage, limit it to interactive elements. You don’t need to add tabindex to items in an unordered list as assistive technology can navigate through the HTML. Keep the tab ring small, which is the order of elements when tabbing, for a more efficient and accessible browsing experience.
ESLint (eslint-plugin-jsx-a11y) Equivalent: no-noninteractive-tabindex
Examples
Invalid
<div tabIndex="0" />nursery/noNoninteractiveTabindex.js:1:6 lint/nursery/noNoninteractiveTabindex ━━━━━━━━━━━━━━━━━━━━━━
⚠ The HTML element div is non-interactive. Do not use tabIndex.
> 1 │ <div tabIndex="0" />
│ ^^^^^^^^^^^^
2 │
ℹ Adding non-interactive elements to the keyboard navigation flow can confuse users.
<div role="article" tabIndex="0" />nursery/noNoninteractiveTabindex.js:1:21 lint/nursery/noNoninteractiveTabindex ━━━━━━━━━━━━━━━━━━━━━
⚠ The HTML element div is non-interactive. Do not use tabIndex.
> 1 │ <div role="article" tabIndex="0" />
│ ^^^^^^^^^^^^
2 │
ℹ Adding non-interactive elements to the keyboard navigation flow can confuse users.
<article tabIndex="0" />nursery/noNoninteractiveTabindex.js:1:10 lint/nursery/noNoninteractiveTabindex ━━━━━━━━━━━━━━━━━━━━━
⚠ The HTML element article is non-interactive. Do not use tabIndex.
> 1 │ <article tabIndex="0" />
│ ^^^^^^^^^^^^
2 │
ℹ Adding non-interactive elements to the keyboard navigation flow can confuse users.
Valid
<div /><MyButton tabIndex={0} /><article tabIndex="-1" />