Fix Focus Order Issues

Focus order problems happen when the keyboard tab sequence does not match the visual or logical reading order of the page. The most common causes are positive tabIndexvalues, off-screen elements left in the tab ring, modals that don't trap focus, and custom widgets that swallow keyboard events.

WCAG 2.1 Success Criteria 2.4.3 (Focus Order) and 2.1.1 (Keyboard) are mandatory at Level A — meaning broken focus order fails even the minimum accessibility bar, not just AA. Keyboard-only users, switch device users, and screen reader users all rely on a predictable tab sequence. Section 508 explicitly requires keyboard operability for every interactive element.

<form>
  <input tabIndex={3} name="email" />
  <input tabIndex={1} name="first" />
  <input tabIndex={2} name="last" />

  <div tabIndex={0} onClick={submit}>
    Submit
  </div>
</form>

<form onSubmit={submit}>
  <label>
    First <input name="first" />
  </label>
  <label>
    Last <input name="last" />
  </label>
  <label>
    Email <input name="email" type="email" />
  </label>

  <button type="submit">Submit</button>
</form>

The fix removes positive tabIndex values (which create cross-page traps), restores natural DOM order, and replaces the clickable div with a real <button type="submit"> so the form submits on Enter from any field.

fixa11y walks the JSX tree, flags any positive tabIndex, identifies clickable non-interactive elements, and detects custom modals that lack focus trapping. The fixer reorders DOM nodes when needed, removes positive tab indexes, and replaces synthetic widgets with semantic equivalents that inherit correct focus behavior for free.