ToggleGroupControl: Don't autoselect option on first group focus (#65892)

* ToggleGroupControl: Don't autoselect option on first group focus

* Fix test

* Add changelog

Co-authored-by: mirka <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: jeryj <[email protected]>

Author: 5 people

packages/components/CHANGELOG.md

@@ -7,6 +7,7 @@
 -   `PaletteEdit`: dedupe palette element slugs ([#65772](https://github.com/WordPress/gutenberg/pull/65772)).
 -   `RangeControl`: do not tooltip contents to the DOM when not shown ([#65875](https://github.com/WordPress/gutenberg/pull/65875)).
 -   `Tabs`: fix skipping indication animation glitch ([#65878](https://github.com/WordPress/gutenberg/pull/65878)).
+-   `ToggleGroupControl`: Don't autoselect option on first group focus ([#65892](https://github.com/WordPress/gutenberg/pull/65892)).
 
 ### Enhancements
 

packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -283,7 +283,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-11"
+        id="toggle-group-control-as-radio-group-12"
         role="radiogroup"
       >
         <div
@@ -297,7 +297,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-11-30"
+            id="toggle-group-control-as-radio-group-12-32"
             role="radio"
             type="button"
             value="uppercase"
@@ -330,7 +330,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-11-31"
+            id="toggle-group-control-as-radio-group-12-33"
             role="radio"
             type="button"
             value="lowercase"
@@ -575,7 +575,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
         class="components-toggle-group-control emotion-8 emotion-9"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-10"
+        id="toggle-group-control-as-radio-group-11"
         role="radiogroup"
       >
         <div
@@ -588,7 +588,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-10-28"
+            id="toggle-group-control-as-radio-group-11-30"
             role="radio"
             type="button"
             value="rigas"
@@ -610,7 +610,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-10-29"
+            id="toggle-group-control-as-radio-group-11-31"
             role="radio"
             type="button"
             value="jack"

packages/components/src/toggle-group-control/test/index.tsx

@@ -162,6 +162,19 @@ describe.each( [
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
 
+	it( 'should not set a value on focus', async () => {
+		render(
+			<Component label="Test Toggle Group Control">{ options }</Component>
+		);
+
+		const radio = screen.getByRole( 'radio', { name: 'R' } );
+		expect( radio ).not.toBeChecked();
+
+		await press.Tab();
+		expect( radio ).toHaveFocus();
+		expect( radio ).not.toBeChecked();
+	} );
+
 	it( 'should render tooltip where `showTooltip` === `true`', async () => {
 		render(
 			<Component label="Test Toggle Group Control">

packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx

@@ -75,7 +75,6 @@ function ToggleGroupControlOptionBase(
 		value,
 		children,
 		showTooltip = false,
-		onFocus: onFocusProp,
 		disabled,
 		...otherButtonProps
 	} = buttonProps;
@@ -132,7 +131,6 @@ function ToggleGroupControlOptionBase(
 					<button
 						{ ...commonProps }
 						disabled={ disabled }
-						onFocus={ onFocusProp }
 						aria-pressed={ isPressed }
 						type="button"
 						onClick={ buttonOnClick }
@@ -142,19 +140,17 @@ function ToggleGroupControlOptionBase(
 				) : (
 					<Ariakit.Radio
 						disabled={ disabled }
-						render={
-							<button
-								type="button"
-								{ ...commonProps }
-								onFocus={ ( event ) => {
-									onFocusProp?.( event );
-									if ( event.defaultPrevented ) {
-										return;
-									}
-									toggleGroupControlContext.setValue( value );
-								} }
-							/>
-						}
+						onFocusVisible={ () => {
+							// Conditions ensure that the first visible focus to a radio group
+							// without a selected option will not automatically select the option.
+							if (
+								toggleGroupControlContext.value !== null ||
+								toggleGroupControlContext.activeItemIsNotFirstItem?.()
+							) {
+								toggleGroupControlContext.setValue( value );
+							}
+						} }
+						render={ <button type="button" { ...commonProps } /> }
 						value={ value }
 					>
 						<ButtonContentView>{ children }</ButtonContentView>

packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx

@@ -75,6 +75,8 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 
 	const groupContextValue = useMemo(
 		(): ToggleGroupControlContextProps => ( {
+			activeItemIsNotFirstItem: () =>
+				radio.getState().activeId !== radio.first(),
 			baseId,
 			isBlock: ! isAdaptiveWidth,
 			size,
@@ -87,6 +89,7 @@ function UnforwardedToggleGroupControlAsRadioGroup(
 		[
 			baseId,
 			isAdaptiveWidth,
+			radio,
 			selectedValue,
 			setSelectedElement,
 			setValue,

packages/components/src/toggle-group-control/types.ts

@@ -131,6 +131,7 @@ export type ToggleGroupControlProps = Pick<
 };
 
 export type ToggleGroupControlContextProps = {
+	activeItemIsNotFirstItem?: () => boolean;
 	isDeselectable?: boolean;
 	baseId: string;
 	isBlock: ToggleGroupControlProps[ 'isBlock' ];