Segmented Control
EasyDOM Manipulation15 min5 tests
Build a 3-option segmented control (Day / Week / Month) where the selected button reflects its state via aria-pressed and a live status region announces the current selection.
A segmented control is a row of mutually-exclusive option buttons where exactly one option is selected at a time — like a toggle group for "Day", "Week", and "Month".
Your task is to implement this control so it is fully accessible and stateful:
- Render three real
<button>elements labeled Day, Week, and Month. - Exactly one option is selected at any time. The currently selected button must have
aria-pressed="true"; the other two must havearia-pressed="false". - Day is selected when the component first renders.
- Clicking any option makes it the selected one (and deselects the others).
- A live region with
role="status"must always readSelected: X, whereXis the label of the currently selected option (e.g.Selected: Week).
This mirrors the kind of stateful, accessible toggle UI you build constantly in real apps. Focus on driving the aria-pressed attributes and the status text from a single piece of selection state.
Requirements
- Render three button elements with the visible labels Day, Week, and Month.
- The selected button has aria-pressed="true"; the other two buttons have aria-pressed="false".
- Day is the selected option on initial render.
- Clicking an option selects it and deselects the previously selected option.
- An element with role="status" always displays the text 'Selected: <label>' for the current selection.
Hints (4)
- Keep a single state value for the currently selected label (start it at 'Day'). Derive both aria-pressed and the status text from it.
- For each option, set aria-pressed={selected === option} so exactly one button is pressed at a time.
- The status region is just <div role="status">{
Selected: ${selected}}</div> — it re-renders automatically when state changes. - aria-pressed is a string attribute in the DOM: React turns the boolean true/false into "true"/"false", which is exactly what the tests check.
Topics
- React
- DOM Manipulation
Asked at
Zoho · Freshworks · Postman · BrowserStack · Rapido · Hotstar
