- Success Criterion 2.4.3
- Conformance level A
Escape Key Closing the Wrong Layer in a Nested Dialog
2.4.3 — Focus Order
Scenario
Setting
A public library's catalog search
What’s wrong
Pressing Esc inside a nested layer (a dropdown or combobox open inside a modal) closes the entire modal instead of just the innermost layer — the user is dumped out mid-task and loses their work in the dialog.
Example
document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
closeSearchModal();
}
});
<!-- fires the same way even when an author-name listbox is open inside the modal --> Why it matters
A patron trying to dismiss just the author suggestions list gets kicked out of the whole advanced search dialog and loses their query.
How to test
Open a dropdown inside a modal, then press Esc: check whether only the dropdown closes (correct) or the entire modal closes too (fails), dumping the user out mid-task.
How to fix
Escape should close only the topmost open layer, letting a second Escape close the next one out.
document.addEventListener('keydown', e => {
if (e.key !== 'Escape') return;
if (authorListbox.hidden === false) {
closeAuthorListbox();
} else {
closeSearchModal();
}
}); Outcome
A patron presses Escape once to dismiss suggestions and keeps their search dialog open to finish the query.
Who is affected
Keyboard users working with nested widgets lose unsaved dialog content when Escape closes more than intended.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Tab Order That Jumps Around the Page Illogically
- Dialog That Opens Far From the Button That Triggered It
- Visual Layout Order That Doesn’t Match the Keyboard Tab Order
- Modal That Opens Without Moving Keyboard Focus Into It
- Modal That Closes Without Returning Focus to Its Trigger
- Expanded Content That Never Receives Keyboard Focus