From e1a8b6fe9d043f41231218ddb2e14a4d3ed1c9d6 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Fri, 10 Oct 2025 21:33:39 -0400 Subject: [PATCH] =?UTF-8?q?Revert=20"[a11y]=20When=20aria-disabled=20is=20?= =?UTF-8?q?set=20on=20SegmentedControl,=20don't=20allow=20act=E2=80=A6"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit f896b3768b6a153822323aae1491523fd60ff6d8. --- .changeset/strong-mangos-rest.md | 6 -- .../src/FeatureFlags/DefaultFeatureFlags.ts | 1 + .../SegmentedControl.dev.stories.tsx | 76 ------------------- .../SegmentedControl.examples.stories.tsx | 22 ------ .../SegmentedControl.module.css | 13 +--- .../SegmentedControl.test.tsx | 52 ++++++++++--- .../src/SegmentedControl/SegmentedControl.tsx | 16 ++-- .../SegmentedControlButton.tsx | 14 +--- .../SegmentedControlIconButton.stories.tsx | 8 -- .../SegmentedControlIconButton.tsx | 52 ++++++++----- 10 files changed, 81 insertions(+), 179 deletions(-) delete mode 100644 .changeset/strong-mangos-rest.md delete mode 100644 packages/react/src/SegmentedControl/SegmentedControl.examples.stories.tsx diff --git a/.changeset/strong-mangos-rest.md b/.changeset/strong-mangos-rest.md deleted file mode 100644 index 03b2ff7b98d..00000000000 --- a/.changeset/strong-mangos-rest.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@primer/react": minor ---- - -Remove the feature flag for `primer_react_segmented_control_tooltip` and GA tooltip by default behavior. -- Ensure that when `disabled` is applied, the tooltip is still triggered. diff --git a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts index d5a7aa7de0d..7a1112d7e37 100644 --- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts +++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts @@ -4,6 +4,7 @@ export const DefaultFeatureFlags = FeatureFlagScope.create({ primer_react_action_list_item_as_button: false, primer_react_breadcrumbs_overflow_menu: false, primer_react_overlay_overflow: false, + primer_react_segmented_control_tooltip: false, primer_react_select_panel_fullscreen_on_narrow: false, primer_react_select_panel_order_selected_at_top: false, primer_react_select_panel_remove_active_descendant: false, diff --git a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx index 8d3dd29fdbe..38519ec7f5a 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx @@ -13,82 +13,6 @@ export default { parameters: {controls: {exclude: excludedControlKeys}}, } as Meta -export const WithAriaDisabled = () => { - const handleOnClick = () => { - alert('Button clicked!') - } - - return ( - - - Preview - - - Raw - - - Blame - - - ) -} - -export const WithDisabled = () => { - const handleOnClick = () => { - alert('Button clicked!') - } - - return ( - - - Preview - - - Raw - - - Blame - - - ) -} - export const WithCss = () => ( - -export const WithDisabledButtons = () => ( - - - Preview - - - Raw - - - Blame - - -) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css index 03e5ae6d477..2717c72816b 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.module.css +++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css @@ -124,17 +124,6 @@ width: 0; } - &[aria-disabled='true']:not([aria-current='true']) { - cursor: not-allowed; - color: var(--fgColor-disabled); - background-color: transparent; - - & svg { - fill: var(--fgColor-disabled); - color: var(--fgColor-disabled); - } - } - @media (pointer: coarse) { &::before { position: absolute; @@ -194,7 +183,7 @@ } } -.Button:not([aria-current='true'], [aria-disabled='true']) { +.Button:not([aria-current='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 9a7b2aac5c9..7506c9fc151 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.test.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.test.tsx @@ -5,6 +5,7 @@ import {describe, expect, it, vi} from 'vitest' import BaseStyles from '../BaseStyles' import theme from '../theme' import ThemeProvider from '../ThemeProvider' +import {FeatureFlags} from '../FeatureFlags' import {SegmentedControl} from '../SegmentedControl' const segmentData = [ @@ -143,13 +144,19 @@ describe('SegmentedControl', () => { } }) - it('renders icon button with tooltip as label', () => { + it('renders icon button with tooltip as label when feature flag is enabled', () => { const {getByRole, getByText} = render( - - {segmentData.map(({label, icon}) => ( - - ))} - , + + + {segmentData.map(({label, icon}) => ( + + ))} + + , ) for (const datum of segmentData) { @@ -160,13 +167,19 @@ describe('SegmentedControl', () => { } }) - it('renders icon button with tooltip description', () => { + it('renders icon button with tooltip description when feature flag is enabled', () => { const {getByRole, getByText} = render( - - {segmentData.map(({label, icon, description}) => ( - - ))} - , + + + {segmentData.map(({label, icon, description}) => ( + + ))} + + , ) for (const datum of segmentData) { @@ -178,6 +191,21 @@ describe('SegmentedControl', () => { } }) + it('renders icon button with aria-label and no tooltip', () => { + const {getByRole} = render( + + {segmentData.map(({label, icon}) => ( + + ))} + , + ) + + for (const datum of segmentData) { + const labelledButton = getByRole('button', {name: datum.label}) + expect(labelledButton).toHaveAttribute('aria-label', datum.label) + } + }) + it('calls onChange with index of clicked segment button', async () => { const user = userEvent.setup() const handleChange = vi.fn() diff --git a/packages/react/src/SegmentedControl/SegmentedControl.tsx b/packages/react/src/SegmentedControl/SegmentedControl.tsx index 8dce85aa2f2..f613ae4f00a 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.tsx @@ -164,19 +164,13 @@ const Root: React.FC> = ({ const sharedChildProps = { onClick: onChange ? (event: React.MouseEvent) => { - const isDisabled = child.props.disabled === true || child.props['aria-disabled'] === true - if (!isDisabled) { - onChange(index) - isUncontrolled && setSelectedIndexInternalState(index) - child.props.onClick && child.props.onClick(event) - } + onChange(index) + isUncontrolled && setSelectedIndexInternalState(index) + child.props.onClick && child.props.onClick(event) } : (event: React.MouseEvent) => { - const isDisabled = child.props.disabled === true || child.props['aria-disabled'] === true - if (!isDisabled) { - child.props.onClick && child.props.onClick(event) - isUncontrolled && setSelectedIndexInternalState(index) - } + child.props.onClick && child.props.onClick(event) + isUncontrolled && setSelectedIndexInternalState(index) }, selected: index === selectedIndex, style: { diff --git a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx index 86471a6cd88..4681428ece8 100644 --- a/packages/react/src/SegmentedControl/SegmentedControlButton.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControlButton.tsx @@ -17,10 +17,6 @@ export type SegmentedControlButtonProps = { defaultSelected?: boolean /** The leading icon comes before item label */ leadingIcon?: React.FunctionComponent> | React.ReactElement - /** Applies `aria-disabled` to the button. This will disable certain functionality, such as `onClick` events. */ - disabled?: boolean - /** Applies `aria-disabled` to the button. This will disable certain functionality, such as `onClick` events. */ - 'aria-disabled'?: boolean /** Optional counter to display on the right side of the button */ count?: number | string } & ButtonHTMLAttributes @@ -30,8 +26,6 @@ const SegmentedControlButton: FCWithSlotMarker { return (
  • - + +
    • + ) + } else { + // This can be removed when primer_react_segmented_control_tooltip feature flag is GA-ed. + return ( +
  • - -
    • - ) + + ) + } } SegmentedControlIconButton.__SLOT__ = Symbol('SegmentedControl.IconButton')