[UnderlineNav2]: Add visually hidden heading where aria-label is present (#2470)

* Add visually hidden heading

* add changeset and a test

* append 'navigation' to the aria-label string

Author: broccolinisoup

.changeset/twelve-spoons-walk.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav2: Render a visually hidden heading for screen readers when aria-label is present

src/UnderlineNav2/UnderlineNav.test.tsx

@@ -112,4 +112,10 @@ describe('UnderlineNav', () => {
     expect(loadingCounter?.className).toContain('LoadingCounter')
     expect(loadingCounter?.textContent).toBe('')
   })
+  it('renders a visually hidden h2 heading for screen readers when aria-label is present', () => {
+    const {container} = render(<ResponsiveUnderlineNav />)
+    const heading = container.getElementsByTagName('h2')[0]
+    expect(heading.className).toContain('VisuallyHidden')
+    expect(heading.textContent).toBe('Repository navigation')
+  })
 })

src/UnderlineNav2/UnderlineNav.tsx

@@ -6,6 +6,7 @@ import {useResizeObserver, ResizeObserverEntry} from '../hooks/useResizeObserver
 import CounterLabel from '../CounterLabel'
 import {useTheme} from '../ThemeProvider'
 import {ChildWidthArray, ResponsiveProps} from './types'
+import VisuallyHidden from '../_VisuallyHidden'
 import {moreBtnStyles, getDividerStyle, getNavStyles, ulStyles, menuStyles, menuItemStyles, GAP} from './styles'
 import styled from 'styled-components'
 import {LoadingCounter} from './LoadingCounter'
@@ -307,6 +308,7 @@ export const UnderlineNav = forwardRef(
           iconsVisible
         }}
       >
+        {ariaLabel && <VisuallyHidden as="h2">{`${ariaLabel} navigation`}</VisuallyHidden>}
         <Box
           as={as}
           sx={merge<BetterSystemStyleObject>(getNavStyles(theme, {align}), sxProp)}