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

apps/web/modules/bookings/components/AvailableTimes.test.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { render } from "@calcom/features/bookings/Booker/__tests__/test-utils";
+
+import { AvailableTimes } from "./AvailableTimes";
+
+vi.mock("framer-motion", () => ({
+  AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+  m: { div: ({ children }: { children: React.ReactNode }) => <>{children}</> },
+}));
+
+vi.mock("@calcom/lib/hooks/useLocale", () => ({
+  useLocale: () => ({
+    t: (key: string, opts?: Record<string, string>) => {
+      if (key === "book_time_slot") return `Book ${opts?.time}`;
+      if (key === "time_slot_unavailable_label") return `${opts?.time}, unavailable`;
+      return key;
+    },
+  }),
+}));
+
+vi.mock("@calcom/features/bookings/Booker/hooks/useBookerTime", () => ({
+  useBookerTime: () => ({ timeFormat: "h:mma", timezone: "UTC" }),
+}));
+
+vi.mock("@calcom/features/bookings/lib/useCheckOverlapWithOverlay", () => ({
+  useCheckOverlapWithOverlay: () => ({
+    isOverlapping: false,
+    overlappingTimeEnd: null,
+    overlappingTimeStart: null,
+  }),
+}));
+
+vi.mock("@calcom/app-store/_utils/payments/getPaymentAppData", () => ({
+  getPaymentAppData: () => ({ price: 0 }),
+}));
+
+vi.mock("@calcom/features/bookings/Booker/utils/query-param", () => ({
+  getQueryParam: () => null,
+}));
+
+vi.mock("@calcom/atoms/hooks/useIsPlatform", () => ({
+  useIsPlatform: () => false,
+}));
+
+vi.mock("@calcom/lib/webstorage", () => ({
+  localStorage: { getItem: () => null },
+}));
+
+const mockEvent = {
+  data: {
+    length: 30,
+    bookingFields: [],
+    price: 0,
+    currency: "USD",
+    metadata: {},
+  },
+};
+
+const mockSlot = {
+  time: "2026-04-07T13:30:00.000Z",
+  attendees: 0,
+  bookingUid: undefined,
+  away: false as const,
+};
+
+describe("AvailableTimes", () => {
+  it("renders time slot button with Book aria-label for an available slot", () => {
+    render(
+      <AvailableTimes
+        slots={[mockSlot]}
+        event={mockEvent}
+        unavailableTimeSlots={[]}
+        skipConfirmStep={false}
+      />
+    );
+
+    expect(screen.getByRole("button", { name: /^Book /i })).toBeInTheDocument();
+  });
+
+  it("renders time slot button with unavailable aria-label when slot is in unavailableTimeSlots", () => {
+    render(
+      <AvailableTimes
+        slots={[mockSlot]}
+        event={mockEvent}
+        unavailableTimeSlots={[mockSlot.time]}
+        skipConfirmStep={false}
+      />
+    );
+
+    expect(screen.getByRole("button", { name: /, unavailable$/i })).toBeInTheDocument();
+  });
+});

apps/web/modules/bookings/components/AvailableTimes.tsx

@@ -167,6 +167,11 @@ const SlotItem = ({
           data-testid="time"
           data-disabled={bookingFull}
           data-time={slot.time}
+          aria-label={
+            bookingFull || isTimeslotUnavailable
+              ? t("time_slot_unavailable_label", { time: computedDateWithUsersTimezone.format(timeFormat) })
+              : t("book_time_slot", { time: computedDateWithUsersTimezone.format(timeFormat) })
+          }
           onClick={onButtonClick}
           className={classNames(
             `hover:border-brand-default min-h-9 mb-2 flex h-auto w-full grow flex-col justify-center py-2`,

packages/features/calendars/components/DatePicker.tsx

@@ -1,9 +1,6 @@
-import { useEffect } from "react";
-import { shallow } from "zustand/shallow";
-
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
-import { useEmbedStyles } from "@calcom/embed-core/embed-iframe";
+import { useEmbedStyles, useSlotsViewOnSmallScreen } from "@calcom/embed-core/embed-iframe";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
 import { getAvailableDatesInMonth } from "@calcom/features/calendars/lib/getAvailableDatesInMonth";
 import type { Slots } from "@calcom/features/calendars/lib/types";
@@ -15,9 +12,9 @@ import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { SkeletonText } from "@calcom/ui/components/skeleton";
 import { Tooltip } from "@calcom/ui/components/tooltip";
-
+import { useEffect } from "react";
+import { shallow } from "zustand/shallow";
 import NoAvailabilityDialog from "./NoAvailabilityDialog";
-import { useSlotsViewOnSmallScreen } from "@calcom/embed-core/embed-iframe";
 
 export type DatePickerProps = {
   /** which day of the week to render the calendar. Usually Sunday (=0) or Monday (=1) - default: Sunday */
@@ -79,9 +76,15 @@ const Day = ({
   const enabledDateButtonEmbedStyles = useEmbedStyles("enabledDateButton");
   const disabledDateButtonEmbedStyles = useEmbedStyles("disabledDateButton");
 
+  let dayAriaLabel = date.format("MMMM D, YYYY");
+  if (disabled) {
+    dayAriaLabel = `${dayAriaLabel}, unavailable`;
+  }
+
   const buttonContent = (
     <button
       type="button"
+      aria-label={dayAriaLabel}
       style={disabled ? { ...disabledDateButtonEmbedStyles } : { ...enabledDateButtonEmbedStyles }}
       className={classNames(
         "disabled:text-bookinglighter absolute bottom-0 left-0 right-0 top-0 mx-auto w-full cursor-pointer rounded-md border-2 border-transparent text-center text-sm font-medium transition disabled:cursor-default disabled:border-transparent disabled:font-light ",

packages/i18n/locales/en/common.json

@@ -128,6 +128,8 @@
   "no_available_users_found_error": "No available users found. Could you try another time slot?",
   "timeslot_unavailable_book_a_new_time": "The selected time slot is no longer available. <0>Please select a new time</0>",
   "timeslot_unavailable_short": "Taken",
+  "book_time_slot": "Book {{time}}",
+  "time_slot_unavailable_label": "{{time}}, unavailable",
   "time_shift": "Time shift",
   "just_connected_description": "You've just connected. Please book from above slots or retry later.",
   "please_try_again_later_or_book_another_slot": "You've just tried connecting now. Please try again later in {{remaining}} minutes or book another slot from the booking page.",

packages/ui/components/form/date-range-picker/Calendar.tsx

@@ -3,6 +3,7 @@
 import dayjs from "@calcom/dayjs";
 import cn from "@calcom/ui/classNames";
 import { ChevronLeftIcon, ChevronRightIcon } from "@coss/ui/icons";
+import { format } from "date-fns";
 import type * as React from "react";
 import { DayPicker } from "react-day-picker";
 import { buttonClasses } from "../../button/Button";
@@ -50,6 +51,18 @@ function Calendar({
         day_hidden: "invisible",
         ...classNames,
       }}
+      labels={{
+        labelDay: (day, activeModifiers) => {
+          const base = format(day, "MMMM d, yyyy");
+          if (activeModifiers?.disabled) {
+            return `${base}, unavailable`;
+          }
+          return base;
+        },
+        labelWeekday: (day, options) => {
+          return new Intl.DateTimeFormat(options?.locale?.code ?? "en", { weekday: "long" }).format(day);
+        },
+      }}
       components={{
         CaptionLabel: (capLabelProps) => (
           <div className="px-2">