Role and semantics
Section titled “Role and semantics”NativeSelect is an HTML <select>; its role, value and options come from the browser. The label is bound with <label>, the help text and error with aria-describedby; an error adds aria-invalid.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Focus the control. |
| Space, Alt + Down | Open the browser’s list. |
| Up, Down, letter keys | Change the option. |
The control shows the focus border and a 2 px color-focus-ring outline 2 px outside the box with focus-visible.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Empty control | “Field label, combo box, Choose” |
| Error | “Field label, combo box, invalid data, Choose an option.” |
Contrast
Section titled “Contrast”The border has 3:1 contrast and the text 4.5:1. Disabled text stays readable with color-text-disabled.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How NativeSelect meets it | What the product team does |
|---|---|---|
| 1.3.1 Info and relationships | <label> and aria-describedby. |
Give every field a label. |
| 2.5.8 Target size | The control is 32 px tall at the smallest size and 36 px by default; on touch screens the default is 40 px. | Do not squeeze its width in narrow containers. |
| 4.1.2 Name, role, value | A native <select>. |
Keep option labels unique. |