Remove aria-label from AnchorNav toggle button in favour of visually-…

…hidden text (#841) * remove aria-label from AnchorNav toggle button in favour of visually-hidden text * fix failing test * move space inside span * add changeset
primer · Dec 2, 2024 · 78e82c1 · 78e82c1
1 parent c492b04
commit 78e82c1
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/.changeset/kind-comics-tickle.md b/.changeset/kind-comics-tickle.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Improved accessibility in `AnchorNav` through clearer navigation menu labelling for screen reader users on narrow viewports.
diff --git a/packages/react/src/AnchorNav/AnchorNav.test.tsx b/packages/react/src/AnchorNav/AnchorNav.test.tsx
@@ -138,12 +138,10 @@ describe('AnchorNav', () => {
     const {getByTestId} = render(<MockAnchorNavFixture />)
     const menuButton = getByTestId(AnchorNav.testIds.menuButton)
 
-    expect(menuButton).toHaveAttribute('aria-label', 'open anchor navigation menu') // aria label before menu open
     expect(menuButton).toHaveAttribute('aria-expanded', 'false') // aria attribute before menu open
 
     fireEvent.click(menuButton) // toggle menu button
 
-    expect(menuButton).toHaveAttribute('aria-label', 'close anchor navigation menu') // aria label after menu open
     expect(menuButton).toHaveAttribute('aria-expanded', 'true') // aria attribute before menu open
   })
 

diff --git a/packages/react/src/AnchorNav/AnchorNav.tsx b/packages/react/src/AnchorNav/AnchorNav.tsx
@@ -214,16 +214,16 @@ function _AnchorNav({children, enableDefaultBgColor = false, hideUntilSticky = f
           <button
             onClick={handleMenuToggle}
             className={clsx(styles['AnchorNav-menu-button'])}
-            aria-expanded={menuOpen ? 'true' : 'false'}
+            aria-expanded={menuOpen}
             aria-controls={idForLinkContainer}
-            aria-label={`${menuOpen ? 'close' : 'open'} anchor navigation menu`}
             data-testid={testIds.menuButton}
           >
             {menuOpen ? (
               <ChevronUpIcon size={16} className={styles['AnchorNav-menu-button-arrow']} fill="currentcolor" />
             ) : (
               <ChevronDownIcon size={16} className={styles['AnchorNav-menu-button-arrow']} fill="currentcolor" />
             )}
+            <span className="visually-hidden">Anchor navigation menu. Currently selected: </span>
             <Text as="span" className={clsx(styles['AnchorNav-link-label'])}>
               {currentActiveNavItem}
             </Text>