Issue Summary
The booking calendar contains multiple missing ARIA labels on interactive elements, making the core booking flow
inaccessible to screen reader users. Weekday headers announce nothing, date cells announce only a bare number with no
month or availability context, and time slot buttons announce only a time string with no booking context. These are
the primary interactive elements in the booking flow — if they are inaccessible, the entire booking experience is
inaccessible to blind users.
This is a scoped fix for a subset of the accessibility problems documented in #26416.
Steps to Reproduce
- Open any public booking page (e.g.
/username/event-type)
- Enable VoiceOver (Mac:
Cmd+F5) or open DevTools → Accessibility panel
- Navigate to the calendar weekday headers ("Mo", "Tu", etc.)
- Navigate to a date cell — available and disabled
- Select an available date and navigate to the time slot buttons
Actual Results
| Element |
Screen reader output |
Problem |
| Weekday headers |
Name: "" — complete silence |
Role: generic, no ARIA attributes |
| Date cells |
Name: "4" — bare number only |
No month or year context |
| Disabled date cells |
Name: "4" — no availability context |
User cannot tell why the date is unselectable |
| Time slot buttons |
Name: "1:30pm" — time string only |
No booking context, no availability state |
Expected Results
| Element |
Expected screen reader output |
| Weekday headers |
Name: "Monday", Name: "Tuesday", etc. |
| Date cells |
Name: "April 4, 2026" |
| Disabled date cells |
Name: "April 4, 2026, unavailable" |
| Time slot buttons |
Name: "Book 1:30 PM" |
Technical details
- Screen reader: VoiceOver (Mac)
- Browser: Chrome
- Verified via DevTools → Accessibility panel on each element
- Files affected:
packages/ui/components/form/date-range-picker/Calendar.tsx
packages/ui/components/form/datepicker/DatePicker.tsx
- Booker time slot component
Evidence
Verified using DevTools Accessibility panel. Screenshots attached showing Name: "" on weekday headers, Name: "4"
on date cells, and Name: "1:30pm" on time slot buttons.
Issue Summary
The booking calendar contains multiple missing ARIA labels on interactive elements, making the core booking flow
inaccessible to screen reader users. Weekday headers announce nothing, date cells announce only a bare number with no
month or availability context, and time slot buttons announce only a time string with no booking context. These are
the primary interactive elements in the booking flow — if they are inaccessible, the entire booking experience is
inaccessible to blind users.
This is a scoped fix for a subset of the accessibility problems documented in #26416.
Steps to Reproduce
/username/event-type)Cmd+F5) or open DevTools → Accessibility panelActual Results
Name: ""— complete silenceRole: generic, no ARIA attributesName: "4"— bare number onlyName: "4"— no availability contextName: "1:30pm"— time string onlyExpected Results
Name: "Monday",Name: "Tuesday", etc.Name: "April 4, 2026"Name: "April 4, 2026, unavailable"Name: "Book 1:30 PM"Technical details
packages/ui/components/form/date-range-picker/Calendar.tsxpackages/ui/components/form/datepicker/DatePicker.tsxEvidence
Verified using DevTools Accessibility panel. Screenshots attached showing
Name: ""on weekday headers,Name: "4"on date cells, and
Name: "1:30pm"on time slot buttons.