diff --git a/.changeset/khaki-pillows-change.md b/.changeset/khaki-pillows-change.md new file mode 100644 index 00000000000..0575abf4cf5 --- /dev/null +++ b/.changeset/khaki-pillows-change.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +SubNav: Adds `aria-current` to selected links diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx index 76af9d36061..0f99bfa9252 100644 --- a/packages/react/src/SubNav/SubNav.tsx +++ b/packages/react/src/SubNav/SubNav.tsx @@ -156,6 +156,7 @@ const SubNavLink = React.forwardRef(function ref={forwardRef} className={clsx(className, enabled && styles.Link)} data-selected={rest.selected} + aria-current={rest.selected} {...rest} > {children} diff --git a/packages/react/src/__tests__/SubNav.test.tsx b/packages/react/src/__tests__/SubNav.test.tsx index f731503a24c..3518f7f17c9 100644 --- a/packages/react/src/__tests__/SubNav.test.tsx +++ b/packages/react/src/__tests__/SubNav.test.tsx @@ -65,4 +65,20 @@ describe('SubNav', () => { expect(getByTestId('action')).toBeInTheDocument() expect(getByTestId('action').parentElement).toHaveClass('SubNav-actions') }) + + it('sets aria-current on the selected child', () => { + const {getByTestId} = HTMLRender( + + + Foo + + + Bar + + , + ) + + expect(getByTestId('foo')).toHaveAttribute('aria-current', 'true') + expect(getByTestId('bar')).not.toHaveAttribute('aria-current') + }) }) diff --git a/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap index b9018c8172a..f26fef0bee6 100644 --- a/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap @@ -52,6 +52,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = ` }