From 1c55871334c608e9c61f317941d4abbd50104253 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Mon, 24 Oct 2022 08:22:15 +1000
Subject: [PATCH 1/3] Add visually hidden heading

---
 src/UnderlineNav2/UnderlineNav.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index 08f19c19768..c88dddddee3 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 && <VisuallyHidden as="h2">{ariaLabel}</VisuallyHidden>}
         <Box
           as={as}
           sx={merge<BetterSystemStyleObject>(getNavStyles(theme, {align}), sxProp)}

From 96e97bf061fe293582e46b4c241617d5026aa469 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Mon, 24 Oct 2022 12:05:44 +1000
Subject: [PATCH 2/3] add changeset and a test

---
 .changeset/twelve-spoons-walk.md        | 5 +++++
 src/UnderlineNav2/UnderlineNav.test.tsx | 6 ++++++
 2 files changed, 11 insertions(+)
 create mode 100644 .changeset/twelve-spoons-walk.md

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..df151db344e 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(<ResponsiveUnderlineNav />)
+    const heading = container.getElementsByTagName('h2')[0]
+    expect(heading.className).toContain('VisuallyHidden')
+    expect(heading.textContent).toBe('Repository')
+  })
 })

From 52886815cba6e2095892be303377c3bec01c53f2 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Tue, 25 Oct 2022 06:53:00 +1000
Subject: [PATCH 3/3] append 'navigation' to the aria-label string

---
 src/UnderlineNav2/UnderlineNav.test.tsx | 2 +-
 src/UnderlineNav2/UnderlineNav.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/UnderlineNav2/UnderlineNav.test.tsx b/src/UnderlineNav2/UnderlineNav.test.tsx
index df151db344e..ff303fdb070 100644
--- a/src/UnderlineNav2/UnderlineNav.test.tsx
+++ b/src/UnderlineNav2/UnderlineNav.test.tsx
@@ -116,6 +116,6 @@ describe('UnderlineNav', () => {
     const {container} = render(<ResponsiveUnderlineNav />)
     const heading = container.getElementsByTagName('h2')[0]
     expect(heading.className).toContain('VisuallyHidden')
-    expect(heading.textContent).toBe('Repository')
+    expect(heading.textContent).toBe('Repository navigation')
   })
 })
diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index c88dddddee3..8a67c2102ba 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -297,7 +297,7 @@ export const UnderlineNav = forwardRef(
           iconsVisible
         }}
       >
-        {ariaLabel && <VisuallyHidden as="h2">{ariaLabel}</VisuallyHidden>}
+        {ariaLabel && <VisuallyHidden as="h2">{`${ariaLabel} navigation`}</VisuallyHidden>}
         <Box
           as={as}
           sx={merge<BetterSystemStyleObject>(getNavStyles(theme, {align}), sxProp)}