Manual checks
Automated tests can’t replace these. Do them before the first real project ships, and again after big changes to combobox, date-picker or command-palette. Each takes about 5 minutes.
Screen reader (VoiceOver on a Mac)
- Open
docs/examples/components.htmlin Safari. Press Cmd+F5 to start VoiceOver, and again to stop. - Press Tab to reach each field below and listen.
| Component | You should hear | Then try |
|---|---|---|
| Combobox | “Country, New Zealand, combobox” | Type “sing”. The result is announced as you arrow to it. Enter selects it |
| Multi combobox | “Destinations, combobox” | Add one, then Tab back: “Remove Salesforce, button” |
| Date picker | The date field, then “Choose date, button” | Enter opens it. Focus lands on a day, read as a full date such as “Sunday, November 15, 2026”. Arrows move by day |
| Command palette | Cmd+K: “Search” dialog, focus in the search box | Type, arrow, Enter |
| Dialog | Its title when opened | Tab stays inside it. Esc returns you to the button |
| Bulk select | “Select all rows, checkbox” | Tick a row and check the count updates |
| Bar chart | “Sign-ups per day, 5 values from 95 to 210” | “View as table” reads as a table |
Fail it if a control has no name, focus disappears, or you can’t get out with Esc.
Real phone
- On the Mac, from the repo:
python3 -m http.server 8080 --directory docs/examples --bind 0.0.0.0. This shares that folder with your whole network until you stop it (Ctrl+C), so do it on a trusted network. - On a phone on the same Wi-Fi, open
http://<your-mac-ip>:8080/components.html. - Check on one iPhone and one Android phone:
- Tapping a field does not zoom the page.
- The menu opens, and tapping outside closes it.
- Combobox: tap, type on the real keyboard, tap a result. The list stays visible above the keyboard.
- Date picker: tap the calendar button and pick a day.
- The save bar and sheet aren’t hidden by the keyboard or the browser’s toolbars.
Older browsers
Already run on the oldest versions we claim, Chromium 123, Firefox 128 and WebKit 18, with Playwright 1.42 and 1.46. To repeat: install those versions in a scratch folder and run PW_CORE=<that folder>/node_modules/playwright-core ENGINE=<engine> node tests/e2e/components.cjs, and the same for lazy.cjs.