From c7edfd5bd32322f5e6616ffebb5d524505b3bb52 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Wed, 23 Oct 2024 09:11:00 +0200
Subject: [PATCH] fix(a11y): added description for icon buttons (#17184)

* fix(a11y): added description for icon buttons

* Update Header.tsx

* Revert "Update Header.tsx"

This reverts commit b12515c8ce2f652adbf441d7488b877a50c8b539.

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
---
 .../bookings/Booker/components/Header.tsx     | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/features/bookings/Booker/components/Header.tsx b/packages/features/bookings/Booker/components/Header.tsx
index bf03708908..24644cb794 100644
--- a/packages/features/bookings/Booker/components/Header.tsx
+++ b/packages/features/bookings/Booker/components/Header.tsx
@@ -179,17 +179,32 @@ const LayoutToggle = ({
     return [
       {
         value: BookerLayouts.MONTH_VIEW,
-        label: <Icon name="calendar" width="16" height="16" />,
+        label: (
+          <>
+            <Icon name="calendar" width="16" height="16" />
+            <span className="sr-only">${t("switch_monthly")}</span>
+          </>
+        ),
         tooltip: t("switch_monthly"),
       },
       {
         value: BookerLayouts.WEEK_VIEW,
-        label: <Icon name="grid-3x3" width="16" height="16" />,
+        label: (
+          <>
+            <Icon name="grid-3x3" width="16" height="16" />
+            <span className="sr-only">${t("switch_weekly")}</span>
+          </>
+        ),
         tooltip: t("switch_weekly"),
       },
       {
         value: BookerLayouts.COLUMN_VIEW,
-        label: <Icon name="columns-3" width="16" height="16" />,
+        label: (
+          <>
+            <Icon name="columns-3" width="16" height="16" />
+            <span className="sr-only">${t("switch_columnview")}</span>
+          </>
+        ),
         tooltip: t("switch_columnview"),
       },
     ].filter((layout) => enabledLayouts?.includes(layout.value as BookerLayouts));