Clicking a booked or blocked slot shows clear unavailable message

A booking form that opens when a user clicks a booked slot violates WCAG 2.2 SC 4.1.3 (Status Messages) and creates a silent failure path: the form submits, the server rejects it, and the user has no idea why. Beyond accessibility, silent ignores of non-available slot clicks leave users wondering if the click registered at all — they repeat-click, get confused, and abandon. Assistive technology users cannot detect visually-implied disabled states; they rely on programmatic feedback. Two distinct messages (one for booked, one for blocked) are required because the corrective actions differ.

Add explicit conditional feedback in the slot's click handler — never silently ignore a click on a non-available state. Use a toast library like sonner or an inline message; a console.log does not count.

// src/components/CalendarSlot.tsx
import { toast } from 'sonner'

export function CalendarSlot({ status, time, onSelect }) {
  const MESSAGES = {
    booked:  'That slot is already booked — pick a different time.',
    blocked: 'That time is unavailable — pick a different time.',
    past:    'That time has already passed — pick a future slot.',
  }

  function handleClick() {
    if (status === 'available') {
      onSelect(time)
    } else {
      toast.error(MESSAGES[status])
    }
  }

  return (
    <button
      onClick={handleClick}
      aria-disabled={status !== 'available'}
      className={status !== 'available' ? 'cursor-not-allowed' : 'cursor-pointer'}
    >
      {time}
    </button>
  )
}

Verify that Enter and Space key activation also triggers the feedback, not just mouse clicks.