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>
This commit is contained in:
Maximilian Franzke
2024-10-23 12:41:00 +05:30
committed by GitHub
co-authored by Anik Dhabal Babu
parent 23d1a21e23
commit c7edfd5bd3
@@ -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));