- 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
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Keyboard Focus Stuck Inside an Embedded Plugin or Widget
- Modal Focus Trap With No Escape Key or Close Button
- Widget Where Tab Cycles Internally With No Way Out
- Third-Party Embed That Captures and Never Releases Tab Focus
- Script That Yanks Focus Back Every Time the User Tabs Away
- Rich Text Editor That Captures Tab With No Documented Escape