diff --git a/.changeset/segmented-control-aria-pressed.md b/.changeset/segmented-control-aria-pressed.md
new file mode 100644
index 00000000000..3b6dfb06cb5
--- /dev/null
+++ b/.changeset/segmented-control-aria-pressed.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Use `aria-pressed` instead of `aria-current` on `SegmentedControl.Button` and `SegmentedControl.IconButton` so JAWS announces the selected state when a segment is activated.
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css
index f16cb5c3425..a4127e959bb 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.module.css
+++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css
@@ -256,7 +256,7 @@
width: 0;
}
- &[aria-disabled='true']:not([aria-current='true']) {
+ &[aria-disabled='true']:not([aria-pressed='true']) {
cursor: not-allowed;
color: var(--fgColor-disabled);
background-color: transparent;
@@ -305,7 +305,7 @@
justify-content: center;
}
-.Button[aria-current='true'] {
+.Button[aria-pressed='true'] {
padding: 0;
font-weight: var(--base-text-weight-semibold);
@@ -321,7 +321,7 @@
}
}
-.Button:not([aria-current='true'], [aria-disabled='true']) {
+.Button:not([aria-pressed='true'], [aria-disabled='true']) {
&:hover .Content {
background-color: var(--controlTrack-bgColor-hover);
}
diff --git a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
index 351d58a0d22..c0f6ff4f045 100644
--- a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx
@@ -85,7 +85,7 @@ describe('SegmentedControl', () => {
const selectedButton = getByText('Raw').closest('button')
- expect(selectedButton?.getAttribute('aria-current')).toBe('true')
+ expect(selectedButton?.getAttribute('aria-pressed')).toBe('true')
})
it('renders with a selected segment - uncontrolled', () => {
@@ -101,7 +101,7 @@ describe('SegmentedControl', () => {
const selectedButton = getByText('Raw').closest('button')
- expect(selectedButton?.getAttribute('aria-current')).toBe('true')
+ expect(selectedButton?.getAttribute('aria-pressed')).toBe('true')
})
it('renders the dropdown variant', () => {
@@ -148,7 +148,7 @@ describe('SegmentedControl', () => {
const selectedButton = getByText('Preview').closest('button')
- expect(selectedButton?.getAttribute('aria-current')).toBe('true')
+ expect(selectedButton?.getAttribute('aria-pressed')).toBe('true')
})
it('renders segments with segment labels that have leading icons', () => {
@@ -183,6 +183,19 @@ describe('SegmentedControl', () => {
}
})
+ it('renders IconButton with aria-pressed when selected', () => {
+ const {getByRole} = render(
+
+ {segmentData.map(({label, icon}, index) => (
+
+ ))}
+ ,
+ )
+
+ expect(getByRole('button', {name: 'Raw'})).toHaveAttribute('aria-pressed', 'true')
+ expect(getByRole('button', {name: 'Preview'})).toHaveAttribute('aria-pressed', 'false')
+ })
+
it('renders icon button with tooltip as label', () => {
const {getByRole, getByText} = render(
@@ -252,11 +265,11 @@ describe('SegmentedControl', () => {
const buttonToClick = getByText('Raw').closest('button')
- expect(buttonToClick?.getAttribute('aria-current')).toBe('false')
+ expect(buttonToClick?.getAttribute('aria-pressed')).toBe('false')
if (buttonToClick) {
await user.click(buttonToClick)
}
- expect(buttonToClick?.getAttribute('aria-current')).toBe('true')
+ expect(buttonToClick?.getAttribute('aria-pressed')).toBe('true')
})
it('calls segment button onClick if it is passed', async () => {
diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
index 287099e1d1f..a1896c94d38 100644
--- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx
@@ -50,7 +50,7 @@ const SegmentedControlButton: FCWithSlotMarker