noNoninteractiveTabindex (since v1.0.0)
Diagnostic Category: lint/a11y/noNoninteractiveTabindex
Sources:
- Same as:
jsx-a11y/no-noninteractive-tabindex
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.
Examples
Section titled ExamplesInvalid
Section titled Invalid<div tabIndex="0" />a11y/noNoninteractiveTabindex.js:1:6 lint/a11y/noNoninteractiveTabindex FIXABLE ━━━━━━━━━━━━━━━━━━
✖ 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.
ℹ Unsafe fix: Remove the tabIndex attribute.
1 │ <div·tabIndex="0"·/>
│ -------------
<div role="article" tabIndex="0" />a11y/noNoninteractiveTabindex.js:1:21 lint/a11y/noNoninteractiveTabindex FIXABLE ━━━━━━━━━━━━━━━━━
✖ 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.
ℹ Unsafe fix: Remove the tabIndex attribute.
1 │ <div·role="article"·tabIndex="0"·/>
│ -------------
<article tabIndex="0" />a11y/noNoninteractiveTabindex.js:1:10 lint/a11y/noNoninteractiveTabindex FIXABLE ━━━━━━━━━━━━━━━━━
✖ 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.
ℹ Unsafe fix: Remove the tabIndex attribute.
1 │ <article·tabIndex="0"·/>
│ -------------
Valid
Section titled Valid<div /><MyButton tabIndex={0} /><article tabIndex="-1" />