Dropdown Menu
Build an accessible dropdown menu toggled by an "Options" button. The menu opens to reveal three actions (Edit, Duplicate, Delete); selecting one shows the choice in a live status region and closes the menu.
Create a dropdown menu controlled by a single trigger button labeled "Options". The button must expose its open/closed state via aria-expanded. The menu starts closed, so none of its items are in the document initially.
Clicking the "Options" button toggles the menu open and closed. When open, the menu renders a list of three items: Edit, Duplicate, and Delete. Clicking any item records the selection in a live region (role="status") reading Selected: <item> and immediately closes the menu (its items leave the document). Clicking "Options" again while the menu is open closes it without changing the current selection.
Before any selection has been made, there should be no Selected: status text. The selection persists across subsequent opens/closes of the menu until a different item is chosen.
Focus on accessibility: use a real <button> for the trigger, keep aria-expanded in sync with the open state, render the items as an accessible list, and announce the current selection through role="status".
Requirements
- Render an "Options" button whose aria-expanded attribute is "false" when the menu is closed and "true" when open.
- The menu is closed initially: the items Edit, Duplicate, and Delete must NOT be in the document on first render.
- Clicking the "Options" button toggles the menu open/closed; opening reveals exactly the three items Edit, Duplicate, and Delete.
- Clicking a menu item shows the current selection in a role="status" region as "Selected: <item>" and closes the menu.
- No "Selected:" status text is shown before any item has been chosen; the selection persists until a different item is clicked.
Hints (3)
- Track two pieces of state with useState: whether the menu is open (boolean) and the currently selected label (string or null).
- Conditionally render the list of items only when open; clicking an item sets the selection and sets open back to false in the same handler.
- Bind aria-expanded directly to the open boolean and only render the role="status" element when a selection exists.
Topics
- React
- DOM Manipulation
Asked at
Ola · Rapido · Swiggy · Myntra · Postman · Razorpay
