Skip to content

fix(ui): add ARIA labels to booking calendar date cells, weekday headers, and time slot buttons #28772

@LubaKaper

Description

@LubaKaper

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

  1. Open any public booking page (e.g. /username/event-type)
  2. Enable VoiceOver (Mac: Cmd+F5) or open DevTools → Accessibility panel
  3. Navigate to the calendar weekday headers ("Mo", "Tu", etc.)
  4. Navigate to a date cell — available and disabled
  5. 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.

Image Image Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    🐛 bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions