diff --git a/.changeset/twelve-spoons-walk.md b/.changeset/twelve-spoons-walk.md
new file mode 100644
index 00000000000..883a16eb6a3
--- /dev/null
+++ b/.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
diff --git a/src/UnderlineNav2/UnderlineNav.test.tsx b/src/UnderlineNav2/UnderlineNav.test.tsx
index 9231b4b9b90..ff303fdb070 100644
--- a/src/UnderlineNav2/UnderlineNav.test.tsx
+++ b/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()
+ const heading = container.getElementsByTagName('h2')[0]
+ expect(heading.className).toContain('VisuallyHidden')
+ expect(heading.textContent).toBe('Repository navigation')
+ })
})
diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index 08f19c19768..8a67c2102ba 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/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'
@@ -296,6 +297,7 @@ export const UnderlineNav = forwardRef(
iconsVisible
}}
>
+ {ariaLabel && {`${ariaLabel} navigation`}}
(getNavStyles(theme, {align}), sxProp)}