Build an accessible dropdown menu

Loading problem workspace…

Build an accessible dropdown menu · UIHero

Build an accessible dropdown menu

Create a semantic menu button with complete keyboard, focus-return, and outside-dismiss behavior.

MediumHTML Accessibility

45 min0% acceptance

Description

Build an account dropdown using semantic HTML, CSS, and a small inline script. The trigger communicates expansion and ownership, menu items support Arrow, Home, and End navigation, Escape restores trigger focus, and outside interaction dismisses the menu.

Requirements

Semantic trigger menu works deterministically for the documented normal, boundary, and repeated-use scenarios.
Aria expanded controls works deterministically for the documented normal, boundary, and repeated-use scenarios.
Open close works deterministically for the documented normal, boundary, and repeated-use scenarios.
Arrow navigation works deterministically for the documented normal, boundary, and repeated-use scenarios.
Home end works deterministically for the documented normal, boundary, and repeated-use scenarios.
Escape restores focus works deterministically for the documented normal, boundary, and repeated-use scenarios.
Outside dismiss works deterministically for the documented normal, boundary, and repeated-use scenarios.

Escape closes

Input

Open the menu, move to Profile, then press Escape

Expected output

The menu closes and focus returns to the trigger

Explanation

Focus recovery lets keyboard users continue from the control that opened the popup.

Constraints

Start the menu closed
Use native buttons or links for operable controls
Do not trap Tab focus inside the menu

Hints

Hint 1

Treat the trigger, popup, and active menu item as three coordinated pieces of state.

Hint 2

Set aria-expanded from the same state that controls visibility.

Hint 3

Install outside listeners only while the menu is open and remove them when it closes.

HTMLARIAmenu button

Loading problem workspace…