From c2e4d5eadb1a0bca3de81b6e2571585777f00a5d Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Fri, 13 Sep 2024 11:58:27 -0400
Subject: [PATCH] LabelGroup: Update "toggle" accessible name to include visual
 text (#4910)

* Update `LabelGroup` truncate button accName

* Add changeset
---
 .changeset/breezy-boxes-jog.md               | 5 +++++
 packages/react/src/LabelGroup/LabelGroup.tsx | 6 ++----
 2 files changed, 7 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/breezy-boxes-jog.md

diff --git a/.changeset/breezy-boxes-jog.md b/.changeset/breezy-boxes-jog.md
new file mode 100644
index 00000000000..bce0b690f8f
--- /dev/null
+++ 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
index 8d0dbba40ad..e39d389ddd1 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -73,7 +73,6 @@ const InlineToggle: React.FC<{
   hiddenItemIds,
   isOverflowShown,
   showAllTokensInline,
-  totalLength,
 }) =>
   isOverflowShown ? (
     <Button ref={collapseButtonRef} onClick={collapseInlineExpandedChildren} size="small" variant="invisible">
@@ -81,7 +80,7 @@ const InlineToggle: React.FC<{
     </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>
       )}