Avoid Positive TabIndex In JSX
ID |
javascript.jsx_positive_tabindex |
Severity |
low |
Remediation Complexity |
trivial |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Reliability |
Language |
JavaScript |
Tags |
accessibility, jsx, reliability |
Rationale
A positive tabIndex pulls the element ahead of the natural DOM order in the keyboard focus
sequence. That desynchronises the visual layout from the tab order, surprises keyboard users, and is
brittle to maintain: the numbers form one global sequence across the whole page, so a component that
claims tabIndex={1} reorders every other component around it, and any new element has to be fitted
into a numbering nobody owns. In a component tree the same JSX is also rendered many times, and
every copy competes for the same position.
<button tabIndex={1}>Save</button> // FLAW - jumps ahead of the DOM order
<div tabIndex="3" /> // FLAW - same, written as a string
<button tabIndex={0}>Save</button> // OK - natural order
<div tabIndex={-1} /> // OK - focusable only from script
<div tabIndex={order} /> // OK - computed, not judged heretabIndex={0} puts the element in the tab order at its DOM position and tabIndex={-1} keeps it
focusable from script only; between them they cover what a positive value is usually reaching for.
Remediation
Remove the positive value and rely on the DOM order, reordering the markup itself if the focus
sequence is wrong. Use tabIndex={0} to put a non-interactive element into the order at its own
position.