The Second Gap in a Custom Dropdown: No Keyboard Support
A custom dropdown, built from scratch instead of a native <select>,
only opens via a click handler on a styled <div>. A keyboard-only user
has no way to open it at all.
What's the fix for this specific gap?
The correct answer is "Make the trigger a real button, openable with Enter or Space."
The trigger must be a real <button> (or a <div> with tabindex="0"
and manually wired keydown handling, though a real button is simpler
and safer), openable with Enter or Space; once open, Arrow Up/Down must
move through the option list, and Escape must close it and return focus
to the trigger.
Adding a tooltip only helps sighted mouse users on hover — it does
nothing for keyboard reachability. Increasing the click target's size
is irrelevant to a user who has no mouse at all. Adding aria-selected
addresses a later gap (announcing the selection), not the underlying
keyboard-operability problem.
Share this question