fix(a11y): add aria-label to navigation drawer collapse button (WCAG … (#23287)
…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>
This commit is contained in:
committed by
GitHub
parent
763d31a859
commit
93066ae800
+6
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user