diff --git a/.changeset/great-shirts-sort.md b/.changeset/great-shirts-sort.md new file mode 100644 index 00000000000..aec40b9a858 --- /dev/null +++ b/.changeset/great-shirts-sort.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +UnderlineNav2: Add aria-hidden and sr-only class support for a descriptive "More" button label diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx index 8a80e456b1f..810c6267124 100644 --- a/src/UnderlineNav2/UnderlineNav.tsx +++ b/src/UnderlineNav2/UnderlineNav.tsx @@ -305,7 +305,7 @@ export const UnderlineNav = forwardRef( aria-label={ariaLabel} ref={navRef} > - + {responsiveProps.items} {actions.length > 0 && ( @@ -318,7 +318,9 @@ export const UnderlineNav = forwardRef( onClick={onAnchorClick} trailingIcon={TriangleDownIcon} > - More + + More {`${ariaLabel} items`} +
  • canvasElement.style.width = '800px' await delay(2000) const canvas = within(canvasElement) - const moreBtn = canvas.getByRole('button', {name: 'More'}) + const moreBtn = canvas.getByRole('button', {name: 'More Repository items'}) userEvent.hover(moreBtn) await delay(1000) userEvent.click(moreBtn)