From 3052cf515779b40d127713df1144a709291c9028 Mon Sep 17 00:00:00 2001
From: Ahmad Yasser <ahmadnis123@gmail.com>
Date: Mon, 9 Feb 2026 01:13:27 -0500
Subject: [PATCH] feat: add ARIA labels to time format and layout toggle
 controls (#27760)

Add aria-label to the TimeFormatToggle and LayoutToggle components
on the booking page so screen readers can identify these radio groups.
Uses existing translation keys "time_format" and "layout".

Fixes #20703
---
 packages/features/bookings/components/Header.tsx         | 9 ++++++++-
 .../features/bookings/components/TimeFormatToggle.tsx    | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/features/bookings/components/Header.tsx b/packages/features/bookings/components/Header.tsx
index 2d8c203b00..4373fcd38d 100644
--- a/packages/features/bookings/components/Header.tsx
+++ b/packages/features/bookings/components/Header.tsx
@@ -234,7 +234,14 @@ const LayoutToggle = ({
   // the layout can be toggled via props in the booker atom
   if (isPlatform) return null;
 
-  return <ToggleGroup onValueChange={onLayoutToggle} defaultValue={layout} options={layoutOptions} />;
+  return (
+    <ToggleGroup
+      onValueChange={onLayoutToggle}
+      defaultValue={layout}
+      aria-label={t("layout")}
+      options={layoutOptions}
+    />
+  );
 };
 
 const LayoutToggleWithData = ({
diff --git a/packages/features/bookings/components/TimeFormatToggle.tsx b/packages/features/bookings/components/TimeFormatToggle.tsx
index 04c00113d0..787bfd0583 100644
--- a/packages/features/bookings/components/TimeFormatToggle.tsx
+++ b/packages/features/bookings/components/TimeFormatToggle.tsx
@@ -17,6 +17,7 @@ export const TimeFormatToggle = ({ customClassName }: { customClassName?: string
       }}
       defaultValue={timeFormat}
       value={timeFormat}
+      aria-label={t("time_format")}
       options={[
         { value: TimeFormat.TWELVE_HOUR, label: t("12_hour_short") },
         { value: TimeFormat.TWENTY_FOUR_HOUR, label: t("24_hour_short") },