[a11y] When aria-disabled is set on SegmentedControl, don't allow action #6516

khiga8 · 2025-08-07T23:25:05Z

Closes: https://github.com/github/primer/issues/4723

Changelog

Ensure that the tooltip is keyboard-accessible even when the control is disabled. This is important since all SegmentedControl.IconButton will show a tooltip by default, and we want this to be accessible for keyboard users even when the control is disabled.
Reverts revert PR (Revert "Clean up the feature flag for primer_react_segmented_control_tooltip" #6412)
- When we first tried to ship our cleanup of primer_react_segmented_control_tooltip, 1 integration test failed in dotcom. This is because a tooltip was now being applied on a disabled control, causing the <Tooltip> component to thrown an area. This will be resolved by the aforementioned change.

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2025-08-07T23:25:08Z

🦋 Changeset detected

Latest commit: 154deb0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Minor
@primer/styled-react	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-08-07T23:25:33Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-08-07T23:29:02Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	89.52 KB (+0.12% 🔺)
packages/react/dist/browser.umd.js	89.64 KB (+0.02% 🔺)

…t_segmented_control_tooltip`" This reverts commit 602b29a.

Copilot

Pull Request Overview

This PR implements accessibility improvements for SegmentedControl components by preventing actions when aria-disabled is set and removes the feature flag for segmented control tooltips to make them the default behavior.

Key changes:

Adds disabled prop support to SegmentedControl buttons to apply aria-disabled attribute
Implements click prevention logic when components are aria-disabled
Removes the primer_react_segmented_control_tooltip feature flag and makes tooltips the default

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/react/src/SegmentedControl/SegmentedControlIconButton.tsx	Removes feature flag logic and simplifies component to always render with tooltip
packages/react/src/SegmentedControl/SegmentedControlButton.tsx	Adds `disabled` prop and applies `aria-disabled` attribute
packages/react/src/SegmentedControl/SegmentedControl.tsx	Implements click prevention logic for aria-disabled buttons
packages/react/src/SegmentedControl/SegmentedControl.test.tsx	Updates tests to remove feature flag dependencies
packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx	Adds new story demonstrating disabled button functionality
packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx	Adds development story for aria-disabled testing
packages/react/src/FeatureFlags/DefaultFeatureFlags.ts	Removes the segmented control tooltip feature flag
.changeset/strong-mangos-rest.md	Documents the feature flag removal as a minor release

.changeset/strong-mangos-rest.md

Copilot · 2025-08-29T19:55:37Z

packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx

+      <SegmentedControl.IconButton
+        onClick={handleOnClick}
+        aria-label={'Preview'}
+        aria-disabled={true}


Use boolean literal true instead of {true} for boolean props. This can be simplified to just aria-disabled.

Copilot · 2025-08-29T19:55:37Z

packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx

+        Preview
+      </SegmentedControl.IconButton>
+      <SegmentedControl.IconButton
+        aria-disabled={true}


Use boolean literal true instead of {true} for boolean props. These can be simplified to just aria-disabled.

Copilot · 2025-08-29T19:55:37Z

packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx

+        Raw
+      </SegmentedControl.IconButton>
+      <SegmentedControl.IconButton
+        aria-disabled={true}


Use boolean literal true instead of {true} for boolean props. These can be simplified to just aria-disabled.

packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx

Copilot · 2025-08-29T19:55:38Z

packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx

+    <SegmentedControl.Button aria-label={'Raw'} leadingIcon={FileCodeIcon}>
+      Raw
+    </SegmentedControl.Button>
+    <SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon} disabled={true}>


Use boolean literal true instead of {true} for boolean props. These can be simplified to just disabled.

Suggested change

<SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon} disabled={true}>

<SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon} disabled>

…stories.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Aug 7, 2025

Ensure that when aria-disabled is set, the selected tab doesn't change

27b3a27

khiga8 force-pushed the kh-segmented-control branch from d5c3571 to 27b3a27 Compare August 7, 2025 23:34

github-actions bot temporarily deployed to storybook-preview-6516 August 7, 2025 23:34 Inactive

khiga8 deployed to github-pages August 7, 2025 23:43 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6516 August 7, 2025 23:44 Inactive

Add disabled prop to SegmentedControl.Button

94c4b25

TylerJDev deployed to github-pages August 11, 2025 14:31 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6516 August 11, 2025 14:32 Inactive

Re-introduce the reverted "Clean up the feature flag for `primer_reac…

46f8beb

…t_segmented_control_tooltip`" This reverts commit 602b29a.

khiga8 deployed to github-pages August 19, 2025 21:33 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6516 August 19, 2025 21:33 Inactive

Merge branch 'main' into kh-segmented-control

57f988d

khiga8 deployed to github-pages August 29, 2025 18:37 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6516 August 29, 2025 18:37 Inactive

khiga8 changed the title ~~[a11y] When aria-disabled is set on SegmentedControl, the selected tab should not change~~ [a11y] When aria-disabled is set on SegmentedControl, don't allow action Aug 29, 2025

khiga8 marked this pull request as ready for review August 29, 2025 19:54

Copilot AI review requested due to automatic review settings August 29, 2025 19:54

khiga8 requested a review from a team as a code owner August 29, 2025 19:54

khiga8 requested a review from pksjce August 29, 2025 19:54

khiga8 assigned khiga8 and TylerJDev Aug 29, 2025

Update strong-mangos-rest.md

c2aad6e

Copilot AI reviewed Aug 29, 2025

View reviewed changes

khiga8 and others added 2 commits August 29, 2025 16:01

Update packages/react/src/SegmentedControl/SegmentedControl.examples.…

af99208

…stories.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update .changeset/strong-mangos-rest.md

307289d

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions bot temporarily deployed to storybook-preview-6516 August 29, 2025 20:05 Inactive

github-actions bot temporarily deployed to storybook-preview-6516 September 12, 2025 18:31 Inactive

TylerJDev added 2 commits September 15, 2025 09:02

Run format

d99fc85

Remove :hover and :active styles when disabled

3984849

github-actions bot temporarily deployed to storybook-preview-6516 September 15, 2025 13:11 Inactive

TylerJDev deployed to github-pages September 15, 2025 13:19 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6516 September 15, 2025 13:19 Inactive

Move :not

3b95781

TylerJDev deployed to github-pages September 15, 2025 14:14 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6516 September 15, 2025 14:14 Inactive

Fix lint

9ff45d6

TylerJDev deployed to github-pages September 15, 2025 14:41 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6516 September 15, 2025 14:41 Inactive

Merge branch 'main' into kh-segmented-control

af884b0

TylerJDev deployed to github-pages September 15, 2025 19:15 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6516 September 15, 2025 19:16 Inactive

pksjce removed their request for review September 16, 2025 04:51

Merge branch 'main' into kh-segmented-control

c31274e

TylerJDev deployed to github-pages September 29, 2025 15:07 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6516 September 29, 2025 15:07 Inactive

TylerJDev requested a review from hectahertz October 6, 2025 19:04

hectahertz approved these changes Oct 10, 2025

View reviewed changes

Merge branch 'main' into kh-segmented-control

154deb0

hectahertz deployed to github-pages October 10, 2025 15:19 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6516 October 10, 2025 15:19 View deployment

TylerJDev added this pull request to the merge queue Oct 10, 2025

TylerJDev mentioned this pull request Oct 10, 2025

Release tracking (rc) #6952

Merged

Merged via the queue into main with commit f896b37 Oct 10, 2025
42 of 46 checks passed

TylerJDev deleted the kh-segmented-control branch October 10, 2025 21:43

francinelucca mentioned this pull request Oct 11, 2025

Revert "[a11y] When aria-disabled is set on SegmentedControl, don't allow action" #6986

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[a11y] When aria-disabled is set on SegmentedControl, don't allow action #6516

[a11y] When aria-disabled is set on SegmentedControl, don't allow action #6516

Uh oh!

khiga8 commented Aug 7, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Aug 7, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Aug 7, 2025

Uh oh!

github-actions bot commented Aug 7, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Aug 29, 2025

Uh oh!

Copilot AI Aug 29, 2025

Uh oh!

Copilot AI Aug 29, 2025

Uh oh!

Uh oh!

Copilot AI Aug 29, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	<SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon} disabled={true}>
	<SegmentedControl.Button aria-label={'Blame'} leadingIcon={PeopleIcon} disabled>

[a11y] When aria-disabled is set on SegmentedControl, don't allow action #6516

[a11y] When aria-disabled is set on SegmentedControl, don't allow action #6516

Uh oh!

Conversation

khiga8 commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Rollout strategy

Merge checklist

Uh oh!

changeset-bot bot commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Aug 7, 2025

Uh oh!

github-actions bot commented Aug 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI Aug 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Aug 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

khiga8 commented Aug 7, 2025 •

edited

Loading

changeset-bot bot commented Aug 7, 2025 •

edited

Loading

github-actions bot commented Aug 7, 2025 •

edited

Loading