Color Swatches

EasyReact Components15 min6 tests

Build a color picker with four swatch buttons where clicking one selects it, marking it pressed and announcing the selection via a live status region.

Create a small color picker. Render four buttons, one for each color: Red, Green, Blue, and Yellow. Each button must have an accessible name matching its color (use aria-label).

Clicking a swatch selects that color:

The clicked button gets aria-pressed="true"; every other button gets aria-pressed="false".
A live region with role="status" reads Selected: <Color> (e.g. Selected: Red).

Before any swatch is clicked, no color is selected: every button has aria-pressed="false" and the status reads Selected: none.

Clicking a different swatch moves the selection (only one color can be selected at a time). Clicking the already-selected swatch keeps it selected (it stays pressed and the status is unchanged).

Requirements

Render four buttons with aria-labels: Red, Green, Blue, Yellow.
Render a role="status" region that reads "Selected: none" initially.
Clicking a swatch sets its aria-pressed to "true" and all others to "false".
When a swatch is selected, the status reads "Selected: <Color>".
Only one color may be selected at a time; clicking a different swatch moves the selection.

Hints (3)

Track the selected color in a single useState value (e.g. null when nothing is selected).
For each button, derive aria-pressed from whether its color equals the selected color, and convert the boolean to the string "true"/"false".
Render the status text as Selected: ${selected ?? 'none'} inside an element with role="status".

Topics

React
React Components

Asked at

Urban Company · Unacademy · Myntra · Ola · Meesho · Paytm