Month, week, and day views accessible via keyboard navigation

Calendar slots that are not reachable via Tab or Arrow keys exclude keyboard-only users and screen reader users entirely — the latter navigate by virtual cursor through focusable elements. This violates WCAG 2.2 SC 2.1.1 (Keyboard) and SC 2.4.7 (Focus Visible), and Section 508 2018 Refresh 502.3. Div-based slot grids without tabIndex or role attributes are the most common cause: they look interactive but are invisible to keyboard navigation. A user with motor impairment who cannot use a mouse literally cannot book an appointment.

Use native <button> elements for all calendar slots. Add onKeyDown handlers for Arrow key navigation and ensure visible focus styles are applied via focus-visible utilities.

// src/components/CalendarSlot.tsx
export function CalendarSlot({ status, time, onSelect }) {
  function handleKeyDown(e: React.KeyboardEvent) {
    if ((e.key === 'Enter' || e.key === ' ') && status === 'available') {
      e.preventDefault()
      onSelect(time)
    }
  }

  return (
    <button
      type="button"
      tabIndex={0}
      onKeyDown={handleKeyDown}
      onClick={() => status === 'available' && onSelect(time)}
      aria-label={`${status} slot at ${time}`}
      className="focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
    >
      {time}
    </button>
  )
}

Verify by tabbing through the calendar without a mouse: every slot must receive focus, show a visible focus ring, and respond to Enter/Space.