From 93066ae800b29e860c74c50869aad9fc8d6dd7a9 Mon Sep 17 00:00:00 2001
From: Gueye Papa Djadji <sennegueye@gmail.com>
Date: Sun, 26 Jul 2026 08:32:02 +0000
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20add=20aria-label=20to=20navigation?=
 =?UTF-8?q?=20drawer=20collapse=20button=20(WCAG=20=E2=80=A6=20(#23287)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…4.1.2)
Fixes #23131

Added `aria-label` to the navigation drawer collapse/expand button
(LightIconButton with IconLayoutSidebarLeftCollapse/RightCollapse),
which previously had no accessible name for screen readers.

Verified with axe DevTools scan on localhost — the button-name
violation for this element no longer appears.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/23287?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

---------

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
---
 .../components/NavigationDrawerCollapseButton.tsx           | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
index 287ad9b219..a29f509967 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
@@ -3,6 +3,7 @@ import { navigationDrawerActiveTabState } from '@/ui/navigation/states/navigatio
 import { NAVIGATION_DRAWER_TABS } from '@/ui/navigation/states/navigationDrawerTabs';
 import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
+import { t } from '@lingui/core/macro';
 import { styled } from '@linaria/react';
 import {
   IconLayoutSidebarLeftCollapse,
@@ -53,6 +54,11 @@ export const NavigationDrawerCollapseButton = ({
         }
         accent="secondary"
         size="small"
+        aria-label={
+          direction === 'left'
+            ? t`Collapse navigation panel`
+            : t`Expand navigation panel`
+        }
       />
     </StyledCollapseButton>
   );