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

.field-3 { order: 1; } .field-1 { order: 3; } /* tab order scrambled by CSS */

Why it matters

Keyboard and screen-reader users who follow focus rather than the pointer.

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

Close only the innermost open layer on Esc (dropdown first, modal on the next Esc).

<!-- Reorder the actual DOM nodes to match the intended focus sequence -->

Focus order should follow a sequence that preserves meaning, matching how the content is meant to be read.

Outcome

On a public library's catalog search, this barrier is gone for keyboard and screen-reader users who follow focus rather than the pointer — they get the same result as anyone else here.

Who is affected