Accessibility: Color-Only State Communication + Keyboard Navigation

[WFord26]

Context

The design critique identifies several accessibility gaps that affect ~8% of male users (color blindness) and all keyboard/screen-reader users. Professional services firms increasingly require accessibility compliance for vendor tools — this is both a UX and a sales enablement issue.

Scope

1. Calendar/Availability State Indicators

Problem: Available/full/selected/unavailable states use background color alone to convey status.

Fix: Add secondary indicators for each state:

State	Current	Add
Available	Green background	✓ icon or "Available" text label
Full/Booked	Red/grey background	✕ icon or "Full" text label
Selected	Blue background	● dot or checkmark + bold border
Unavailable	Faded background	Diagonal stripe pattern or "—"

• Test in grayscale mode — all states must be distinguishable without color

2. Toast Notifications — Screen Reader Announcements

Problem: Toasts appear at top-right with fixed positioning — outside screen reader focus flow.

Fix:

• Add role="alert" to error/destructive toasts
• Add aria-live="polite" to success/info toasts
• Ensure toast container has proper ARIA attributes in ToastContext

3. Keyboard Navigation — Booking Flow

Problem: Time slot selection and booking flow may not be fully keyboard-navigable.

Fix:

• All time slot buttons: keyboard-focusable (tabIndex={0} if needed)
• Visible focus rings on all interactive elements (:focus-visible outline)
• Tab order follows visual reading order
• Enter/Space activates buttons and selections
• Escape closes modals

4. Focus Management

• Modal open → focus trapped inside modal
• Modal close → focus returns to trigger element
• Page navigation → focus moves to main content area

Testing Protocol

1. Navigate entire booking flow (steps 1-4) using keyboard only
2. Complete a booking using screen reader (VoiceOver on macOS)
3. View all status states in grayscale mode (screenshot)
4. Run axe-core or Lighthouse accessibility audit on all pages

Files to Modify

• packages/client/src/pages/PublicBookingPage.tsx — slot button accessibility
• packages/client/src/context/ToastContext.tsx — ARIA attributes
• packages/client/src/styles/global.css — focus rings, state patterns
• packages/client/src/components/ConfirmDialog.tsx — focus trapping
• Component modal files — focus management

Effort

S (1-2 days)

Acceptance Criteria

• All calendar states distinguishable without color (grayscale test passes)
• Toast notifications announced to screen readers
• Full booking flow completable via keyboard only
• Visible focus rings on all interactive elements
• Modal focus trapping implemented
• Lighthouse accessibility score ≥ 90 on public booking page
• No aria-* warnings from axe-core audit on key pages