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

Author: joshfarrant

.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.

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
   })
 

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>