LabelGroup: Update "toggle" accessible name to include visual text (#…

…4910) * Update `LabelGroup` truncate button accName * Add changeset
primer · Sep 13, 2024 · c2e4d5e · c2e4d5e
1 parent af7f589
commit c2e4d5e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/.changeset/breezy-boxes-jog.md b/.changeset/breezy-boxes-jog.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Changes the accessible name of the "toggle" button in `LabelGroup` to contain the visual label
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -73,15 +73,14 @@ const InlineToggle: React.FC<{
   hiddenItemIds,
   isOverflowShown,
   showAllTokensInline,
-  totalLength,
 }) =>
   isOverflowShown ? (
     <Button ref={collapseButtonRef} onClick={collapseInlineExpandedChildren} size="small" variant="invisible">
       Show less
     </Button>
   ) : hiddenItemIds.length ? (
     <Button ref={expandButtonRef} variant="invisible" size="small" onClick={showAllTokensInline}>
-      <VisuallyHidden>Show all {totalLength}</VisuallyHidden>
+      <VisuallyHidden>Show +{hiddenItemIds.length} more</VisuallyHidden>
       <span aria-hidden="true">+{hiddenItemIds.length}</span>
     </Button>
   ) : null
@@ -106,7 +105,6 @@ const OverlayToggle: React.FC<
   openOverflowOverlay,
   overlayPaddingPx,
   overlayWidth,
-  totalLength,
 }) =>
   hiddenItemIds.length ? (
     <AnchoredOverlay
@@ -123,7 +121,7 @@ const OverlayToggle: React.FC<
       alignmentOffset={overlayPaddingPx * -1}
       renderAnchor={props => (
         <Button variant="invisible" size="small" {...props} ref={expandButtonRef}>
-          <VisuallyHidden>Show all {totalLength}</VisuallyHidden>
+          <VisuallyHidden>Show +{hiddenItemIds.length} more</VisuallyHidden>
           <span aria-hidden="true">+{hiddenItemIds.length}</span>
         </Button>
       )}