jsx-a11y/tabindex-no-positive

The Tab key visits every element with a positive tabIndex first, from the lowest number to the highest, and only then the rest of the page. Focus jumps around in an order that doesn't match what's on the screen, and every new control means renumbering the others.

Use 0 to put an element in the tab order at its place in the document, and -1 to make it focusable from code only. To change the order, move the elements.

A value that's only known at run time, such as tabIndex={order}, isn't checked.

--fix-dangerously changes the value to "0". --fix doesn't, because that changes the tab order.

Configure#

Off by default. To turn it on:

[lint.rules]
"jsx-a11y/tabindex-no-positive" = "error" # or "warn"

Examples#

const form = (
  <form>
    <input name="email" tabIndex={2} />
    <input name="name" tabIndex="1" />
  </form>
);

const form = (
  <form>
    <input name="name" />
    <input name="email" />
    <div role="button" tabIndex={0} />
    <h2 tabIndex={-1}>Done</h2>
  </form>
);