intermediateAccessibility

A Dropdown That Is Not a Div

Decide what you would build from the brief alone. Everything below it is available, but the exercise stops working if you open it first.

The brief you were given

Build a filter dropdown: a trigger button, a popup list of options, single selection. It must work with a mouse, a keyboard and a screen reader.

The trap — the wrong fix that looks right

Getting the roles and attributes right, verifying with an automated audit that reports zero violations, and shipping. Automated tools check the presence and validity of attributes; they cannot press Down. The dropdown announces itself perfectly and does nothing when a keyboard user tries to move through the options, Escape does not close it, and focus is left inside a popup that is no longer visible. The audit's green result is evidence about the markup, and it is routinely read as evidence about the component.