Role and semantics
Section titled “Role and semantics”The trigger is a button named by the label and the chosen value (aria-labelledby). The help text and error are linked with aria-describedby. The panel is a dialog; its grid has the grid role and is named by the header title. The chosen cell carries aria-selected, an unavailable cell aria-disabled.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Enter, Space | Open the grid from the trigger; choose a cell and close. |
| Left, Right | One cell back or forward. |
| Up, Down | One row up or down (three cells). |
| Home, End | Start or end of the row. |
| Page Up, Page Down | Previous or next page. |
| Escape | Close without choosing; focus returns to the trigger. |
When the grid opens, focus moves to the chosen or current cell; the cells use a roving tabindex. The focus outline is 2 px color-focus-ring, drawn 2 px outside the cell.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Trigger | “Fiscal year, 2026, button” |
| Cell | “2026, this year, selected” |
| Page change | The title is read from a polite live region. |
Contrast
Section titled “Contrast”Cell text has 4.5:1 contrast; text on the primary fill of the chosen cell has 4.5:1. The current cell is also marked by an outline and bold text.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How YearPicker meets it | What the product team does |
|---|---|---|
| 1.3.1 Info and relationships | Label, grid, aria-selected. |
Give every field a label. |
| 2.1.1 Keyboard | Arrow keys, Home, End, Page Up, Page Down. | Do not trap the grid in another container. |
| 2.5.8 Target size | Cells are 36 px tall. | - |
| 4.1.2 Name, role, value | The trigger name includes the value. | Do not repeat the value in the help text. |