SegmentedControl: include counter in button accessible name when aria-label is provided

.changeset/evil-islands-find.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes an accessibility issue where screen readers announce segmented control buttons without their associated count.

packages/react/src/SegmentedControl/SegmentedControl.test.tsx

@@ -319,6 +319,64 @@ describe('SegmentedControl', () => {
     expect(getByRole('img', {name: 'EyeIcon'})).toBeInTheDocument()
   })
 
+  it('includes the count in the accessible name when aria-label is provided', () => {
+    const {getByRole} = render(
+      <SegmentedControl aria-label="Issues by label">
+        <SegmentedControl.Button defaultSelected aria-label="Feature" count={5}>
+          Feature
+        </SegmentedControl.Button>
+      </SegmentedControl>,
+    )
+
+    const button = getByRole('button', {name: 'Feature 5'})
+
+    expect(button).toBeInTheDocument()
+  })
+
+  it('uses aria-label without modification when count is undefined', () => {
+    const {getByRole} = render(
+      <SegmentedControl aria-label="Issues by label">
+        <SegmentedControl.Button defaultSelected aria-label="Feature">
+          Feature
+        </SegmentedControl.Button>
+      </SegmentedControl>,
+    )
+
+    const button = getByRole('button', {name: 'Feature'})
+
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveAttribute('aria-label', 'Feature')
+  })
+
+  it('does not set aria-label when only count is provided and relies on text content', () => {
+    const {getByRole} = render(
+      <SegmentedControl aria-label="Issues by label">
+        <SegmentedControl.Button defaultSelected count={5}>
+          Feature
+        </SegmentedControl.Button>
+      </SegmentedControl>,
+    )
+
+    const button = getByRole('button', {name: /Feature\s*\(\s*5\s*\)/})
+
+    expect(button).toBeInTheDocument()
+    expect(button).not.toHaveAttribute('aria-label')
+  })
+
+  it('handles a string count when aria-label is provided', () => {
+    const {getByRole} = render(
+      <SegmentedControl aria-label="Issues by label">
+        <SegmentedControl.Button defaultSelected aria-label="Feature" count="5">
+          Feature
+        </SegmentedControl.Button>
+      </SegmentedControl>,
+    )
+
+    const button = getByRole('button', {name: 'Feature 5'})
+
+    expect(button).toBeInTheDocument()
+  })
+
   it('should warn the user if they neglect to specify a label for the segmented control', () => {
     const spy = vi.spyOn(globalThis.console, 'warn').mockImplementation(() => {})
 

packages/react/src/SegmentedControl/SegmentedControlButton.tsx

@@ -39,14 +39,16 @@ const SegmentedControlButton: FCWithSlotMarker<React.PropsWithChildren<Segmented
   count,
   ...props
 }) => {
-  const {'aria-disabled': ariaDisabled, ...rest} = props
+  const {'aria-disabled': ariaDisabled, 'aria-label': ariaLabel, ...rest} = props
   // Use leadingVisual if provided, otherwise fall back to leadingIcon for backwards compatibility
   const LeadingVisual = leadingVisual ?? leadingIcon
+  const computedAriaLabel = ariaLabel !== undefined && count !== undefined ? `${ariaLabel} ${count}` : ariaLabel
 
   return (
     <li className={clsx(classes.Item)} data-selected={selected ? '' : undefined}>
       <button
         aria-current={selected}
+        aria-label={computedAriaLabel}
         aria-disabled={disabled || ariaDisabled || undefined}
         className={clsx(classes.Button, className)}
         type="button"