From e2060fb2ca2f9efb434d07d2b6d06126204c9b54 Mon Sep 17 00:00:00 2001
From: Antoine SUBRA <92506465+subraAntoine@users.noreply.github.com>
Date: Thu, 5 Sep 2024 12:40:55 +0200
Subject: [PATCH] Fix/button accessibility error (#204)

* fix(redmine 1306603): fixed button accessibility errors

* fix(redmine 1306603): fixed button accessibility errors

* fix(redmine 1306603): fixed test

* fix(redmine 1306603): fix pr review from Tony

* fix(redmine 1306603): fixed lint error

---------

Co-authored-by: Quentin Le Caignec <12102823+QuentinLeCaignec@users.noreply.github.com>
---
 .changeset/early-games-complain.md            |  6 ++++
 .../CalendarHeader/CalendarHeader.tsx         |  3 ++
 .../CalendarHeader.test.tsx.snap              |  3 ++
 .../haring-react-shared/src/types/actions.ts  |  1 +
 .../src/Components/Table/Table.mock.tsx       |  4 +++
 .../src/Components/Table/Table.tsx            | 15 +++++++++-
 .../__snapshots__/TableGridView.test.tsx.snap | 28 +++++++++++++++++++
 .../haring-react-table/src/helpers/table.ts   | 24 ++++++++++++++++
 .../__snapshots__/CardList.test.tsx.snap      |  8 ++++++
 .../CollapseButtonControlled.tsx              |  7 +++++
 .../CollapseButton.test.tsx.snap              |  1 +
 .../__snapshots__/HeaderMenu.test.tsx.snap    |  2 ++
 .../Components/InfoBox/InfoBox.stories.tsx    |  2 ++
 .../src/Components/InfoBox/InfoBox.tsx        | 11 ++++++++
 .../__snapshots__/InfoBox.test.tsx.snap       |  1 +
 .../SidebarFilters/SidebarFilters.tsx         |  7 +++++
 .../SidebarFilters.test.tsx.snap              |  5 ++++
 .../__snapshots__/SidebarMenu.test.tsx.snap   |  6 ++++
 .../Components/SummaryBox/SummaryBox.mock.tsx | 14 ++++++++--
 .../src/Components/Thumbnail/Thumbnail.tsx    |  7 +++++
 .../__snapshots__/ThumbnailGrid.test.tsx.snap |  3 ++
 21 files changed, 155 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/early-games-complain.md

diff --git a/.changeset/early-games-complain.md b/.changeset/early-games-complain.md
new file mode 100644
index 00000000..b0f9263d
--- /dev/null
+++ b/.changeset/early-games-complain.md
@@ -0,0 +1,6 @@
+---
+'@smile/haring-react-table': minor
+'@smile/haring-react': minor
+---
+
+fixed button accessibility erros
diff --git a/packages/haring-react-dates/src/Components/CalendarHeader/CalendarHeader.tsx b/packages/haring-react-dates/src/Components/CalendarHeader/CalendarHeader.tsx
index de9b9fa6..6f746c88 100644
--- a/packages/haring-react-dates/src/Components/CalendarHeader/CalendarHeader.tsx
+++ b/packages/haring-react-dates/src/Components/CalendarHeader/CalendarHeader.tsx
@@ -85,10 +85,13 @@ export function CalendarHeader(props: ICalendarHeaderProps): ReactElement {
       <Popover onChange={setOpened} opened={opened} radius={10} width="target">
         <Popover.Target>
           <MantineCalendarHeader
+            aria-label="calendar"
             className={classes.header}
             color="red"
             label={label}
+            nextLabel="Next button"
             onLevelClick={() => setOpened(!opened)}
+            previousLabel="Previous button"
             role="region"
             size="md"
             {...calendarHeaderProps}
diff --git a/packages/haring-react-dates/src/Components/CalendarHeader/__snapshots__/CalendarHeader.test.tsx.snap b/packages/haring-react-dates/src/Components/CalendarHeader/__snapshots__/CalendarHeader.test.tsx.snap
index 999c695c..a96dfe3a 100644
--- a/packages/haring-react-dates/src/Components/CalendarHeader/__snapshots__/CalendarHeader.test.tsx.snap
+++ b/packages/haring-react-dates/src/Components/CalendarHeader/__snapshots__/CalendarHeader.test.tsx.snap
@@ -19,6 +19,7 @@ exports[`CalendarHeader matches snapshot 1`] = `
       aria-controls="mantine-f4bipx4bi-dropdown"
       aria-expanded="false"
       aria-haspopup="dialog"
+      aria-label="calendar"
       class="m_730a79ed mantine-CalendarHeader-calendarHeader"
       color="red"
       data-size="md"
@@ -27,6 +28,7 @@ exports[`CalendarHeader matches snapshot 1`] = `
       style="--dch-control-size: var(--dch-control-size-md); --dch-fz: var(--mantine-font-size-md);"
     >
       <button
+        aria-label="Previous button"
         class="haring-focus m_2351eeb0 mantine-CalendarHeader-calendarHeaderControl m_87cf2631 mantine-UnstyledButton-root"
         data-direction="previous"
         tabindex="0"
@@ -56,6 +58,7 @@ exports[`CalendarHeader matches snapshot 1`] = `
         August 2023
       </button>
       <button
+        aria-label="Next button"
         class="haring-focus m_2351eeb0 mantine-CalendarHeader-calendarHeaderControl m_87cf2631 mantine-UnstyledButton-root"
         data-direction="next"
         tabindex="0"
diff --git a/packages/haring-react-shared/src/types/actions.ts b/packages/haring-react-shared/src/types/actions.ts
index 3fc7c44b..575d83e3 100644
--- a/packages/haring-react-shared/src/types/actions.ts
+++ b/packages/haring-react-shared/src/types/actions.ts
@@ -19,6 +19,7 @@ export interface IActionConfirmModalProps<Item>
 }
 
 export interface IAction<Item> {
+  ariaLabel?: string | ((item: Item) => string);
   color?: string;
   componentProps?:
     | Record<string, unknown>
diff --git a/packages/haring-react-table/src/Components/Table/Table.mock.tsx b/packages/haring-react-table/src/Components/Table/Table.mock.tsx
index 561ba76b..c746dfc5 100644
--- a/packages/haring-react-table/src/Components/Table/Table.mock.tsx
+++ b/packages/haring-react-table/src/Components/Table/Table.mock.tsx
@@ -14,6 +14,7 @@ import { action } from '@storybook/addon-actions';
 export const tableMock: ITableProps<Record<string, unknown>> = {
   actions: [
     {
+      ariaLabel: 'move',
       icon: <FolderMove />,
       id: 'move',
       isMassAction: true,
@@ -69,6 +70,9 @@ export const tableMock: ITableProps<Record<string, unknown>> = {
       onAction: action('Delete'),
     },
   ],
+  ariaLabels: {
+    otherActions: 'Other actions',
+  },
   columns: [
     {
       accessorKey: 'id',
diff --git a/packages/haring-react-table/src/Components/Table/Table.tsx b/packages/haring-react-table/src/Components/Table/Table.tsx
index 62fea534..71e87689 100644
--- a/packages/haring-react-table/src/Components/Table/Table.tsx
+++ b/packages/haring-react-table/src/Components/Table/Table.tsx
@@ -32,13 +32,19 @@ import {
   getActionComponentProps,
   getActionIcon,
   getActionLabel,
+  getAriaLabel,
 } from '../../helpers';
 
 import classes from './Table.module.css';
 
+export interface ITableAriaLabels {
+  otherActions: string;
+}
+
 export interface ITableProps<Data extends Record<string, unknown>>
   extends MRT_TableOptions<Data> {
   actions?: ITableAction<Data>[];
+  ariaLabels?: ITableAriaLabels;
   maxVisibleActions?: number;
   menuLabel?: string;
   paginationProps?: Partial<IPaginationProps>;
@@ -63,6 +69,7 @@ export function Table<Data extends Record<string, unknown>>(
 ): ReactElement {
   const {
     actions = [],
+    ariaLabels,
     icons,
     initialState,
     menuLabel = 'Other actions',
@@ -191,10 +198,15 @@ export function Table<Data extends Record<string, unknown>>(
           {visibleRowActions.map((action, index) => (
             <Tooltip
               key={`${index + index}`}
-              label={getActionLabel(action, row)}
+              label={getAriaLabel(action, row, 'actionLabel')}
               {...tooltipProps}
             >
               <ActionIcon
+                aria-label={
+                  getAriaLabel(action, row, 'ariaLabel')
+                    ? getAriaLabel(action, row, 'ariaLabel')
+                    : getAriaLabel(action, row, 'actionLabel')
+                }
                 className={classes.action}
                 onClick={() => handleAction(row, index)}
                 radius={4}
@@ -218,6 +230,7 @@ export function Table<Data extends Record<string, unknown>>(
             >
               <Menu.Target>
                 <ActionIcon
+                  aria-label={ariaLabels?.otherActions || 'Other actions'}
                   className={`${classes.menuButton} ${classes.action}`}
                   radius={4}
                   type="button"
diff --git a/packages/haring-react-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap b/packages/haring-react-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap
index 2ba8da07..3786079a 100644
--- a/packages/haring-react-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap
+++ b/packages/haring-react-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap
@@ -1069,6 +1069,7 @@ exports[`TableGridView matches snapshot 1`] = `
                     class=" rowActionsRef"
                   >
                     <button
+                      aria-label="Move in tree"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1104,6 +1105,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Open document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1126,6 +1128,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Edit document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1151,6 +1154,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -1278,6 +1282,7 @@ exports[`TableGridView matches snapshot 1`] = `
                     class=" rowActionsRef"
                   >
                     <button
+                      aria-label="Move in tree"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1313,6 +1318,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Open document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1335,6 +1341,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Edit document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1360,6 +1367,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -1487,6 +1495,7 @@ exports[`TableGridView matches snapshot 1`] = `
                     class=" rowActionsRef"
                   >
                     <button
+                      aria-label="Move in tree"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1522,6 +1531,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Open document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1544,6 +1554,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Edit document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1569,6 +1580,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -1696,6 +1708,7 @@ exports[`TableGridView matches snapshot 1`] = `
                     class=" rowActionsRef"
                   >
                     <button
+                      aria-label="Move in tree"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1731,6 +1744,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Open document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1753,6 +1767,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Edit document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1778,6 +1793,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -1905,6 +1921,7 @@ exports[`TableGridView matches snapshot 1`] = `
                     class=" rowActionsRef"
                   >
                     <button
+                      aria-label="Move in tree"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1940,6 +1957,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Open document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1962,6 +1980,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Edit document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -1987,6 +2006,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -2114,6 +2134,7 @@ exports[`TableGridView matches snapshot 1`] = `
                     class=" rowActionsRef"
                   >
                     <button
+                      aria-label="Move in tree"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -2149,6 +2170,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Open document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -2171,6 +2193,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Edit document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -2196,6 +2219,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
@@ -2330,6 +2354,7 @@ exports[`TableGridView matches snapshot 1`] = `
                     class=" rowActionsRef"
                   >
                     <button
+                      aria-label="Move in tree"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -2365,6 +2390,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Open document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -2387,6 +2413,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
+                      aria-label="Edit document"
                       class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: transparent; --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -2412,6 +2439,7 @@ exports[`TableGridView matches snapshot 1`] = `
                       aria-controls="mantine-f4bipx4bi-dropdown"
                       aria-expanded="false"
                       aria-haspopup="menu"
+                      aria-label="Other actions"
                       class="haring-focus haring-active undefined undefined m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                       data-variant="transparent"
                       id="mantine-f4bipx4bi-target"
diff --git a/packages/haring-react-table/src/helpers/table.ts b/packages/haring-react-table/src/helpers/table.ts
index 171655a1..2330f0d2 100644
--- a/packages/haring-react-table/src/helpers/table.ts
+++ b/packages/haring-react-table/src/helpers/table.ts
@@ -2,6 +2,8 @@ import type { ITableAction, ITableConfirmAction } from '../types';
 import type { MRT_Row } from 'mantine-react-table';
 import type { ReactNode } from 'react';
 
+export type ILabelProperty = 'actionLabel' | 'ariaLabel';
+
 export function isConfirmAction<Data extends Record<string, unknown>>(
   action: ITableAction<Data>,
 ): action is ITableConfirmAction<Data> {
@@ -26,6 +28,28 @@ export function getActionLabel<Data extends Record<string, unknown>>(
   return action.label;
 }
 
+export function getAriaLabel<Data extends Record<string, unknown>>(
+  action?: ITableAction<Data> | null,
+  rows?: MRT_Row<Data> | MRT_Row<Data>[],
+  property?: ILabelProperty,
+): string | undefined {
+  if (property === 'actionLabel') {
+    return getActionLabel(action, rows);
+  }
+  if (!action) {
+    return '';
+  }
+  if (isConfirmAction(action)) {
+    return typeof action.ariaLabel === 'function'
+      ? action.ariaLabel(action.item)
+      : action.ariaLabel;
+  }
+  if (typeof action.ariaLabel === 'function') {
+    return rows ? action.ariaLabel(rows) : '';
+  }
+  return action.ariaLabel;
+}
+
 export function getActionIcon<Data extends Record<string, unknown>>(
   action?: ITableAction<Data> | null,
   rows?: MRT_Row<Data> | MRT_Row<Data>[],
diff --git a/packages/haring-react/src/Components/CardList/__snapshots__/CardList.test.tsx.snap b/packages/haring-react/src/Components/CardList/__snapshots__/CardList.test.tsx.snap
index 66764486..72919868 100644
--- a/packages/haring-react/src/Components/CardList/__snapshots__/CardList.test.tsx.snap
+++ b/packages/haring-react/src/Components/CardList/__snapshots__/CardList.test.tsx.snap
@@ -63,6 +63,7 @@ exports[`CardList matches snapshot 1`] = `
                   style="gap: calc(1rem * var(--mantine-scale)); align-items: center;"
                 >
                   <button
+                    aria-label="export button"
                     class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                     data-variant="subtle"
                     style="--ai-size: calc(1.875rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -85,6 +86,7 @@ exports[`CardList matches snapshot 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-label="eye button"
                     class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                     data-variant="subtle"
                     style="--ai-size: calc(1.875rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -145,6 +147,7 @@ exports[`CardList matches snapshot 1`] = `
                   style="gap: calc(1rem * var(--mantine-scale)); align-items: center;"
                 >
                   <button
+                    aria-label="export button"
                     class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                     data-variant="subtle"
                     style="--ai-size: calc(1.875rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -167,6 +170,7 @@ exports[`CardList matches snapshot 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-label="eye button"
                     class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                     data-variant="subtle"
                     style="--ai-size: calc(1.875rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -227,6 +231,7 @@ exports[`CardList matches snapshot 1`] = `
                   style="gap: calc(1rem * var(--mantine-scale)); align-items: center;"
                 >
                   <button
+                    aria-label="export button"
                     class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                     data-variant="subtle"
                     style="--ai-size: calc(1.875rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -249,6 +254,7 @@ exports[`CardList matches snapshot 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-label="eye button"
                     class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                     data-variant="subtle"
                     style="--ai-size: calc(1.875rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -309,6 +315,7 @@ exports[`CardList matches snapshot 1`] = `
                   style="gap: calc(1rem * var(--mantine-scale)); align-items: center;"
                 >
                   <button
+                    aria-label="export button"
                     class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                     data-variant="subtle"
                     style="--ai-size: calc(1.875rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
@@ -331,6 +338,7 @@ exports[`CardList matches snapshot 1`] = `
                     </span>
                   </button>
                   <button
+                    aria-label="eye button"
                     class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                     data-variant="subtle"
                     style="--ai-size: calc(1.875rem * var(--mantine-scale)); --ai-bg: transparent; --ai-hover: var(--mantine-color-cyan-light-hover); --ai-color: var(--mantine-color-cyan-light-color); --ai-bd: calc(0.0625rem * var(--mantine-scale)) solid transparent;"
diff --git a/packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx b/packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx
index 477e0e8b..0fb01dbe 100644
--- a/packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx
+++ b/packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx
@@ -9,10 +9,15 @@ import { CaretDown, CaretRight } from '@phosphor-icons/react';
 
 import classes from './CollapseButton.module.css';
 
+export interface ICollapseButtonAriaLabels {
+  expandButton?: string;
+}
+
 export interface ICollapseButtonControlledProps<
   T extends number | string,
   C extends ElementType,
 > extends ICollapseButtonProps<T, C> {
+  ariaLabels?: ICollapseButtonAriaLabels;
   collapseProps?: Partial<CollapseProps>;
   /** Only in the Controlled version, use this prop to provide the setter function for the opened/collapsed state */
   onCollapseChange?: (isOpened: boolean) => void;
@@ -25,6 +30,7 @@ export function CollapseButtonControlled<
   C extends ElementType = 'button',
 >(props: ICollapseButtonControlledProps<T, C>): ReactElement {
   const {
+    ariaLabels,
     children,
     collapseProps,
     component: Component = 'button',
@@ -110,6 +116,7 @@ export function CollapseButtonControlled<
         rightSection={
           Boolean(children) && (
             <ActionIcon
+              aria-label={ariaLabels?.expandButton || 'expand button'}
               data-testid="toggle"
               onClick={handleClick}
               radius="sm"
diff --git a/packages/haring-react/src/Components/CollapseButton/__snapshots__/CollapseButton.test.tsx.snap b/packages/haring-react/src/Components/CollapseButton/__snapshots__/CollapseButton.test.tsx.snap
index 8b3b3cc1..6121cf19 100644
--- a/packages/haring-react/src/Components/CollapseButton/__snapshots__/CollapseButton.test.tsx.snap
+++ b/packages/haring-react/src/Components/CollapseButton/__snapshots__/CollapseButton.test.tsx.snap
@@ -38,6 +38,7 @@ exports[`CollapseButton matches snapshot 1`] = `
         data-position="right"
       >
         <button
+          aria-label="expand button"
           class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
           data-testid="toggle"
           data-variant="transparent"
diff --git a/packages/haring-react/src/Components/HeaderMenu/__snapshots__/HeaderMenu.test.tsx.snap b/packages/haring-react/src/Components/HeaderMenu/__snapshots__/HeaderMenu.test.tsx.snap
index 05d02718..c950cf09 100644
--- a/packages/haring-react/src/Components/HeaderMenu/__snapshots__/HeaderMenu.test.tsx.snap
+++ b/packages/haring-react/src/Components/HeaderMenu/__snapshots__/HeaderMenu.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
           data-position="right"
         >
           <button
+            aria-label="expand button"
             class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
             data-testid="toggle"
             data-variant="transparent"
@@ -268,6 +269,7 @@ exports[`HeaderMenu matches snapshot in mobile mode 1`] = `
             data-position="right"
           >
             <button
+              aria-label="expand button"
               class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
               data-testid="toggle"
               data-variant="transparent"
diff --git a/packages/haring-react/src/Components/InfoBox/InfoBox.stories.tsx b/packages/haring-react/src/Components/InfoBox/InfoBox.stories.tsx
index ce9aef77..782ebd6c 100644
--- a/packages/haring-react/src/Components/InfoBox/InfoBox.stories.tsx
+++ b/packages/haring-react/src/Components/InfoBox/InfoBox.stories.tsx
@@ -34,11 +34,13 @@ export const InfoBox: IStory = {
     ),
     contentItems: [
       {
+        arialLabel: 'user button',
         icon: <User />,
         label: 'Individual contract',
         onAction: action('onAction'),
       },
       {
+        arialLabel: 'suitcase button',
         icon: <Suitcase />,
         label: '2 Lines text for example',
         onAction: action('onAction'),
diff --git a/packages/haring-react/src/Components/InfoBox/InfoBox.tsx b/packages/haring-react/src/Components/InfoBox/InfoBox.tsx
index b0edb14d..8ed26738 100644
--- a/packages/haring-react/src/Components/InfoBox/InfoBox.tsx
+++ b/packages/haring-react/src/Components/InfoBox/InfoBox.tsx
@@ -12,7 +12,12 @@ import { Motif } from './Motif';
 
 export type IMantineBreakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs';
 
+export interface IInfoBoxAriaLabels {
+  expandButton?: string;
+}
+
 export interface IContentItem {
+  arialLabel?: string;
   icon?: ReactElement;
   iconProps?: Partial<ActionIconProps>;
   label?: string;
@@ -20,6 +25,7 @@ export interface IContentItem {
 }
 
 export interface IInfoCardProps extends PaperProps {
+  ariaLabels?: IInfoBoxAriaLabels;
   children?: ReactElement;
   collapse?: boolean;
   content?: ReactElement;
@@ -35,6 +41,7 @@ export interface IInfoCardProps extends PaperProps {
 export function InfoBox(props: IInfoCardProps): ReactElement {
   const theme = useMantineTheme();
   const {
+    ariaLabels,
     children,
     collapse = true,
     content,
@@ -66,6 +73,9 @@ export function InfoBox(props: IInfoCardProps): ReactElement {
                     >
                       {Boolean(item.icon) && (
                         <ActionIcon
+                          aria-label={
+                            item.arialLabel ? item.arialLabel : item.label
+                          }
                           className={classes.contentItem}
                           color={theme.primaryColor}
                           onClick={() => item.onAction?.(item)}
@@ -93,6 +103,7 @@ export function InfoBox(props: IInfoCardProps): ReactElement {
         </Collapse>
         {Boolean(collapse) && (
           <ActionIcon
+            aria-label={ariaLabels?.expandButton || 'expand button'}
             className={`${classes.collapseButton} ${
               !opened && classes.collapseButtonCenter
             }`}
diff --git a/packages/haring-react/src/Components/InfoBox/__snapshots__/InfoBox.test.tsx.snap b/packages/haring-react/src/Components/InfoBox/__snapshots__/InfoBox.test.tsx.snap
index 9c091149..fb9308e0 100644
--- a/packages/haring-react/src/Components/InfoBox/__snapshots__/InfoBox.test.tsx.snap
+++ b/packages/haring-react/src/Components/InfoBox/__snapshots__/InfoBox.test.tsx.snap
@@ -108,6 +108,7 @@ exports[`InfoBox matches snapshot 1`] = `
         <div />
       </div>
       <button
+        aria-label="expand button"
         class="haring-focus haring-active undefined false m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
         style="--ai-color: var(--mantine-color-white);"
         type="button"
diff --git a/packages/haring-react/src/Components/SidebarFilters/SidebarFilters.tsx b/packages/haring-react/src/Components/SidebarFilters/SidebarFilters.tsx
index 9589d3b4..b16bab7e 100644
--- a/packages/haring-react/src/Components/SidebarFilters/SidebarFilters.tsx
+++ b/packages/haring-react/src/Components/SidebarFilters/SidebarFilters.tsx
@@ -29,10 +29,15 @@ export interface ISidebarFilter {
   value: unknown;
 }
 
+export interface ISidebarFiltersAriaLabels {
+  expandIcon?: string;
+}
+
 type IId = number | string;
 
 export interface ISidebarFiltersProps {
   activeFilters?: ISidebarFilter[] | [];
+  ariaLabels?: ISidebarFiltersAriaLabels;
   closeAllFiltersLabel?: string;
   defaultOpenedActiveFilters?: boolean;
   defaultOpenedMenuIds?: IId[];
@@ -48,6 +53,7 @@ export interface ISidebarFiltersProps {
 export function SidebarFilters(props: ISidebarFiltersProps): ReactElement {
   const {
     activeFilters = [],
+    ariaLabels,
     closeAllFiltersLabel = 'Close all',
     title = 'Active filters',
     menus = [],
@@ -134,6 +140,7 @@ export function SidebarFilters(props: ISidebarFiltersProps): ReactElement {
           opened={activeFiltersCollapseOpened}
           rightSection={
             <ActionIcon
+              aria-label={ariaLabels?.expandIcon || 'expand icon'}
               data-testid="toggle"
               onClick={() => {
                 setActiveFiltersCollapseOpened(!activeFiltersCollapseOpened);
diff --git a/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap b/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap
index 68c31611..d2064c84 100644
--- a/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap
+++ b/packages/haring-react/src/Components/SidebarFilters/__snapshots__/SidebarFilters.test.tsx.snap
@@ -49,6 +49,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
             data-position="right"
           >
             <button
+              aria-label="expand icon"
               class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
               data-testid="toggle"
               data-variant="transparent"
@@ -246,6 +247,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
               data-position="right"
             >
               <button
+                aria-label="expand button"
                 class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                 data-testid="toggle"
                 data-variant="transparent"
@@ -450,6 +452,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
               data-position="right"
             >
               <button
+                aria-label="expand button"
                 class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                 data-testid="toggle"
                 data-variant="transparent"
@@ -510,6 +513,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
                 data-position="right"
               >
                 <button
+                  aria-label="expand button"
                   class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                   data-testid="toggle"
                   data-variant="transparent"
@@ -666,6 +670,7 @@ exports[`SidebarFilters matches snapshot 1`] = `
                 data-position="right"
               >
                 <button
+                  aria-label="expand button"
                   class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
                   data-testid="toggle"
                   data-variant="transparent"
diff --git a/packages/haring-react/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap b/packages/haring-react/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap
index c773657b..fed099b2 100644
--- a/packages/haring-react/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap
+++ b/packages/haring-react/src/Components/SidebarMenu/__snapshots__/SidebarMenu.test.tsx.snap
@@ -71,6 +71,7 @@ exports[`SidebarMenu matches snapshot 1`] = `
           data-position="right"
         >
           <button
+            aria-label="expand button"
             class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
             data-testid="toggle"
             data-variant="transparent"
@@ -184,6 +185,7 @@ exports[`SidebarMenu matches snapshot 1`] = `
           data-position="right"
         >
           <button
+            aria-label="expand button"
             class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
             data-testid="toggle"
             data-variant="transparent"
@@ -297,6 +299,7 @@ exports[`SidebarMenu matches snapshot 1`] = `
           data-position="right"
         >
           <button
+            aria-label="expand button"
             class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
             data-testid="toggle"
             data-variant="transparent"
@@ -382,6 +385,7 @@ exports[`SidebarMenu matches snapshot 1`] = `
             data-position="right"
           >
             <button
+              aria-label="expand button"
               class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
               data-testid="toggle"
               data-variant="transparent"
@@ -573,6 +577,7 @@ exports[`SidebarMenu matches snapshot 1`] = `
           data-position="right"
         >
           <button
+            aria-label="expand button"
             class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
             data-testid="toggle"
             data-variant="transparent"
@@ -633,6 +638,7 @@ exports[`SidebarMenu matches snapshot 1`] = `
             data-position="right"
           >
             <button
+              aria-label="expand button"
               class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
               data-testid="toggle"
               data-variant="transparent"
diff --git a/packages/haring-react/src/Components/SummaryBox/SummaryBox.mock.tsx b/packages/haring-react/src/Components/SummaryBox/SummaryBox.mock.tsx
index e4124a83..f5b605d9 100644
--- a/packages/haring-react/src/Components/SummaryBox/SummaryBox.mock.tsx
+++ b/packages/haring-react/src/Components/SummaryBox/SummaryBox.mock.tsx
@@ -54,10 +54,20 @@ export const childrenExampleMock = (key?: number): ReactElement => (
         Approved
       </Button>
       <Flex align="center" gap={16}>
-        <ActionIcon color="cyan" size={30} variant="subtle">
+        <ActionIcon
+          aria-label="export button"
+          color="cyan"
+          size={30}
+          variant="subtle"
+        >
           <Export size={24} />
         </ActionIcon>
-        <ActionIcon color="cyan" size={30} variant="subtle">
+        <ActionIcon
+          aria-label="eye button"
+          color="cyan"
+          size={30}
+          variant="subtle"
+        >
           <Eye size={24} />
         </ActionIcon>
       </Flex>
diff --git a/packages/haring-react/src/Components/Thumbnail/Thumbnail.tsx b/packages/haring-react/src/Components/Thumbnail/Thumbnail.tsx
index 78f30804..7d740d12 100644
--- a/packages/haring-react/src/Components/Thumbnail/Thumbnail.tsx
+++ b/packages/haring-react/src/Components/Thumbnail/Thumbnail.tsx
@@ -23,9 +23,14 @@ import { ConfirmModal } from '../ConfirmModal/ConfirmModal';
 
 import classes from './Thumbnail.module.css';
 
+export interface IThumbnailAriaLabels {
+  optionMenu?: string;
+}
+
 export interface IThumbnailProps extends IThumbnail {
   actions?: IThumbnailAction[];
   altText?: string;
+  ariaLabels?: IThumbnailAriaLabels;
 }
 
 export function Thumbnail(props: IThumbnailProps): ReactElement {
@@ -33,6 +38,7 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
   const {
     altText = 'thumbnail',
     actions = [],
+    ariaLabels,
     iconType,
     image = defaultImage,
     label,
@@ -113,6 +119,7 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
               <Menu radius={4} shadow="lg" width={200}>
                 <Menu.Target>
                   <ActionIcon
+                    aria-label={ariaLabels?.optionMenu || 'option menu button'}
                     className={
                       selected ? classes.menuButtonSelected : classes.menuButton
                     }
diff --git a/packages/haring-react/src/Components/ThumbnailGrid/__snapshots__/ThumbnailGrid.test.tsx.snap b/packages/haring-react/src/Components/ThumbnailGrid/__snapshots__/ThumbnailGrid.test.tsx.snap
index 81384156..4fa6aa3e 100644
--- a/packages/haring-react/src/Components/ThumbnailGrid/__snapshots__/ThumbnailGrid.test.tsx.snap
+++ b/packages/haring-react/src/Components/ThumbnailGrid/__snapshots__/ThumbnailGrid.test.tsx.snap
@@ -144,6 +144,7 @@ exports[`ThumbnailGrid matches snapshot 1`] = `
               aria-controls="mantine-f4bipx4bi-dropdown"
               aria-expanded="false"
               aria-haspopup="menu"
+              aria-label="option menu button"
               class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
               id="mantine-f4bipx4bi-target"
               style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-color: var(--mantine-color-white);"
@@ -207,6 +208,7 @@ exports[`ThumbnailGrid matches snapshot 1`] = `
               aria-controls="mantine-f4bipx4bi-dropdown"
               aria-expanded="false"
               aria-haspopup="menu"
+              aria-label="option menu button"
               class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
               id="mantine-f4bipx4bi-target"
               style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-color: var(--mantine-color-white);"
@@ -271,6 +273,7 @@ exports[`ThumbnailGrid matches snapshot 1`] = `
               aria-controls="mantine-f4bipx4bi-dropdown"
               aria-expanded="false"
               aria-haspopup="menu"
+              aria-label="option menu button"
               class="haring-focus haring-active m_8d3f4000 mantine-ActionIcon-root m_87cf2631 mantine-UnstyledButton-root"
               id="mantine-f4bipx4bi-target"
               style="--ai-radius: calc(0.25rem * var(--mantine-scale)); --ai-color: var(--mantine-color-white);"