• Success Criterion 2.1.2
  • Conformance level A

Autocomplete List That Keeps Recapturing Focus on Every Blur

2.1.2 — No Keyboard Trap

Scenario

Setting

A pharmacy app's prescription-refill form

What’s wrong

Autocomplete listboxes that re-open and recapture focus on every blur.

Example 

medInput.addEventListener('blur', () => {
  if (suggestions.length > 0) {
    medInput.focus(); // reopens the list every time, assuming the user meant to keep browsing
    showSuggestions();
  }
});

Why it matters

A patient who has already picked their medication can't tab onward to the dosage field, since focus keeps snapping back to the medication field.

How to test

Tab into an autocomplete listbox, then Tab away: if it reopens and recaptures focus on every blur, it fails.

How to fix

Close the suggestion list on blur instead of re-stealing focus, and only reopen it in response to new typing, not to leaving the field.

medInput.addEventListener('blur', () => {
  setTimeout(() => hideSuggestions(), 100); // let the intended focus target register first
});

Outcome

A patient selects their medication and tabs straight through to the dosage field.

Who is affected

Keyboard-only users get stuck cycling in the medication field whenever any suggestions remain in memory.

Learn more

Related scenarios