The Third Gap in a Custom Dropdown: Lost Focus on Open and Close
In a custom dropdown, focus stays on the trigger (or gets lost entirely) when the option list opens, and nothing moves focus back when the list closes. A keyboard or screen-reader user who loses track of focus has effectively lost the interface.
What's the fix for this specific gap?
The correct answer is "Move focus into the list on open, and back to the trigger on close."
When the list opens, focus should move to the currently selected option (or the first option); when the user selects an option or presses Escape, the list closes and focus returns explicitly to the trigger button — a screen reader or keyboard user who loses track of focus has effectively lost the interface, even if it's still fully rendered on screen.
Adding role="listbox" alone fixes the semantic-role gap, not the focus
gap — an element can have the right role and still never receive
focus. A visual highlight on the selected option is a sighted-only cue,
invisible to a screen reader. Auto-scrolling the page doesn't move
keyboard focus at all.
Share this question