BEFOREPopup list that looks like a menu, but isn’t one
Problems: no menu semantics, no Escape to close, and no intentional focus move into the popup — keyboard users must Tab around and can fall into background controls.
Try: open the popup, press Tab a few times, then press Esc (nothing happens).
AFTERMenu button with roles + Escape + roving focus
Pattern: button opens a popup role="menu"; focus moves into the menu; Arrow keys navigate; Enter/Space activates; Escape closes and returns focus.
Try: open the menu, use ↓/↑, press Esc, and note focus returns to the button.
Quick checklist
- Button:
aria-haspopup="menu",aria-expanded,aria-controls. - Popup:
role="menu". Items:role="menuitem". - On open: move focus to first/last item (depending on key).
- Keyboard: Arrow keys, Home/End, Enter/Space to activate,
Escto close. - On close: restore focus to the trigger button.