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