UnderlineNav2: Add aria-hidden and sr-only class support for a descriptive "More" button label

.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

src/UnderlineNav2/UnderlineNav.tsx

@@ -305,7 +305,7 @@ export const UnderlineNav = forwardRef(
           aria-label={ariaLabel}
           ref={navRef}
         >
-          <NavigationList sx={ulStyles} ref={listRef}>
+          <NavigationList sx={ulStyles} ref={listRef} role="list">
             {responsiveProps.items}
             {actions.length > 0 && (
               <MoreMenuListItem ref={moreMenuRef}>
@@ -318,7 +318,9 @@ export const UnderlineNav = forwardRef(
                   onClick={onAnchorClick}
                   trailingIcon={TriangleDownIcon}
                 >
-                  More
+                  <Box as="span">
+                    More <VisuallyHidden as="span">{`${ariaLabel} items`}</VisuallyHidden>
+                  </Box>
                 </Button>
                 <ActionList
                   selectionVariant="single"

src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap

@@ -200,6 +200,7 @@ exports[`UnderlineNav renders consistently 1`] = `
   >
     <ul
       className="c2"
+      role="list"
     >
       <li
         className="c3"

src/UnderlineNav2/interactions.stories.tsx

@@ -79,7 +79,7 @@ SelectAMenuItem.play = async ({canvasElement}: {canvasElement: HTMLElement}) =>
   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)