Updated the accessible label of the SubNav's open/close toggle button to include the current page (#838)

* remove test-ids from SubNav tests

* remove aria-label from SubNav open/close toggle

* add changeset

Author: joshfarrant

.changeset/shiny-mice-promise.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Updated the accessible label of the SubNav's open/close toggle button to include the name of the current page.

packages/react/src/SubNav/SubNav.test.tsx

@@ -1,5 +1,5 @@
 import {HTMLAttributes} from 'react'
-import React, {render, cleanup, fireEvent, within} from '@testing-library/react'
+import React, {render, cleanup, within} from '@testing-library/react'
 import '@testing-library/jest-dom'
 import {axe, toHaveNoViolations} from 'jest-axe'
 
@@ -57,64 +57,65 @@ describe('SubNav', () => {
   afterEach(cleanup)
 
   it('renders the root element correctly into the document', () => {
-    const {getByTestId} = render(<MockSubNavFixture />)
+    const {getByRole} = render(<MockSubNavFixture />)
 
-    expect(getByTestId(SubNav.testIds.root)).toBeInTheDocument() // expect the root element to be in the document
-    expect(getByTestId(SubNav.testIds.root).tagName).toBe('nav'.toUpperCase()) // expect root to be a <nav> element
+    expect(getByRole('navigation')).toBeInTheDocument()
   })
   it('renders a title as a link', () => {
-    const {getByTestId} = render(<MockSubNavFixture />)
+    const {getByRole} = render(<MockSubNavFixture />)
 
-    expect(getByTestId(SubNav.testIds.heading)).toBeInTheDocument()
-    expect(getByTestId(SubNav.testIds.heading).tagName).toBe('a'.toUpperCase())
-    expect(getByTestId(SubNav.testIds.heading)).toHaveAttribute('href', headingLink)
+    expect(getByRole('link', {name: heading})).toHaveAttribute('href', headingLink)
   })
 
   it('renders the correct number of links  into the document', () => {
-    const {getByTestId} = render(<MockSubNavFixture />)
-    expect(getByTestId(SubNav.testIds.overlay).querySelectorAll('a').length).toBe(mockLinkData.length)
+    const {getByRole} = render(<MockSubNavFixture />)
+
+    const list = getByRole('list')
+    const links = within(list).getAllByRole('link')
+
+    expect(links).toHaveLength(mockLinkData.length)
   })
 
   it('has a button that opens the menu when clicked', async () => {
-    const {getByTestId} = render(<MockSubNavFixture />)
+    const {getByRole} = render(<MockSubNavFixture />)
 
-    const buttonEl = getByTestId('SubNav-root-button')
-    const overlayEl = getByTestId(SubNav.testIds.overlay)
-
-    expect(buttonEl).toBeInTheDocument()
+    const buttonEl = getByRole('button', {name: 'Navigation menu. Current page: page three'})
+    const overlayEl = getByRole('list')
 
-    // check aria roles are correct by default
+    expect(overlayEl).not.toHaveClass('SubNav__links-overlay--open')
     expect(buttonEl).toHaveAttribute('aria-expanded', 'false')
 
     userEvent.click(buttonEl)
 
     expect(overlayEl).toHaveClass('SubNav__links-overlay--open')
-    // check aria roles have updated
     expect(buttonEl).toHaveAttribute('aria-expanded', 'true')
   })
 
   it('closes the overlay when button is pressed again', () => {
-    const {getByTestId} = render(<MockSubNavFixture />)
+    const {getByRole} = render(<MockSubNavFixture />)
 
-    const buttonEl = getByTestId(SubNav.testIds.button)
-    const overlayEl = getByTestId(SubNav.testIds.overlay)
+    const buttonEl = getByRole('button', {name: 'Navigation menu. Current page: page three'})
+    const overlayEl = getByRole('list')
 
-    fireEvent.click(buttonEl)
+    userEvent.click(buttonEl)
     expect(overlayEl).toHaveClass('SubNav__links-overlay--open')
 
-    fireEvent.click(buttonEl)
+    userEvent.click(buttonEl)
     expect(overlayEl).not.toHaveClass('SubNav__links-overlay--open')
   })
 
-  it('shows the aria-current text next to the button by default', () => {
-    const {getByTestId} = render(<MockSubNavFixture />)
+  it('includes the aria-current text in the aria-label of the button', () => {
+    const {getByRole} = render(<MockSubNavFixture />)
+
+    const buttonEl = getByRole('button', {name: 'Navigation menu. Current page: page three'})
+    expect(buttonEl).toBeInTheDocument()
+  })
 
-    const buttonEl = getByTestId(SubNav.testIds.button)
-    const activeLink = mockLinkData.find(link => link['aria-current']) as {title: string} | undefined
+  it('shows the aria-current text next to the button by default', () => {
+    const {getByRole} = render(<MockSubNavFixture />)
 
-    if (activeLink) {
-      expect(buttonEl).toHaveTextContent(activeLink.title)
-    }
+    const buttonEl = getByRole('button', {name: 'Navigation menu. Current page: page three'})
+    expect(buttonEl).toHaveTextContent('page three')
   })
 
   it('has no a11y violations on initial render', async () => {
@@ -127,7 +128,7 @@ describe('SubNav', () => {
   it('shows subitems when the submenu toggle is activated at large viewports', async () => {
     mockUseWindowSize.mockImplementation(() => ({isLarge: true}))
 
-    const {getByRole, getAllByTestId} = render(
+    const {getByRole} = render(
       <SubNav fullWidth>
         <SubNav.Link href="#" aria-current="page">
           Copilot
@@ -157,16 +158,14 @@ describe('SubNav', () => {
     expect(toggleSubmenuButton).toHaveFocus()
     expect(toggleSubmenuButton).toHaveAttribute('aria-expanded', 'true')
 
-    const expanded = getAllByTestId(SubNav.testIds.subMenu)[0]
-
     userEvent.tab()
-    expect(within(expanded).getByRole('link', {name: 'Copilot feature page one'})).toHaveFocus()
+    expect(getByRole('link', {name: 'Copilot feature page one'})).toHaveFocus()
 
     userEvent.tab()
-    expect(within(expanded).getByRole('link', {name: 'Copilot feature page two'})).toHaveFocus()
+    expect(getByRole('link', {name: 'Copilot feature page two'})).toHaveFocus()
 
     userEvent.tab()
-    expect(within(expanded).getByRole('link', {name: 'Copilot feature page three'})).toHaveFocus()
+    expect(getByRole('link', {name: 'Copilot feature page three'})).toHaveFocus()
 
     userEvent.tab()
     expect(getByRole('link', {name: 'Code review'})).toHaveFocus()

packages/react/src/SubNav/SubNav.tsx

@@ -270,8 +270,8 @@ const _SubNavRoot = memo(({id, children, className, 'data-testid': testId, fullW
                   onClick={isOpenAtNarrow ? closeMenuCallback : handleMenuToggle}
                   aria-expanded={isOpenAtNarrow ? 'true' : 'false'}
                   aria-controls={idForLinkContainer}
-                  aria-label={`${isOpenAtNarrow ? 'close' : 'open'} navigation menu`}
                 >
+                  <span className="visually-hidden">Navigation menu. Current page: </span>
                   <span className={styles['SubNav__overlay-toggle-content']}>
                     <Text as="span" size="200">
                       {activeLinklabel}