• 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

Related scenarios