From 4f784544cedc90c4a7af6b4fd0a00f0e85967599 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sun, 6 Oct 2024 08:46:27 +0900
Subject: [PATCH 1/3] ToggleGroupControl: Don't autoselect option on first
 group focus

---
 .../test/__snapshots__/index.tsx.snap         | 12 ++++-----
 .../src/toggle-group-control/test/index.tsx   | 11 ++++++++
 .../component.tsx                             | 26 ++++++++-----------
 .../toggle-group-control/as-radio-group.tsx   |  3 +++
 .../src/toggle-group-control/types.ts         |  1 +
 5 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
index d2d98eaba85e6..832c6d7cb7a8c 100644
--- a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
+++ b/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"
diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx
index 170db01ae523c..4d4fa16f784a3 100644
--- a/packages/components/src/toggle-group-control/test/index.tsx
+++ b/packages/components/src/toggle-group-control/test/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { press, click, hover, sleep } from '@ariakit/test';
 
 /**
@@ -162,6 +163,16 @@ describe.each( [
 		expect( mockOnChange ).toHaveBeenCalledWith( 'rigas' );
 	} );
 
+	it( 'should not set a value on focus', async () => {
+		render(
+			<Component label="Test Toggle Group Control">{ options }</Component>
+		);
+
+		await userEvent.tab();
+		const radio = screen.getByRole( 'radio', { name: 'R' } );
+		expect( radio ).not.toBeChecked();
+	} );
+
 	it( 'should render tooltip where `showTooltip` === `true`', async () => {
 		render(
 			<Component label="Test Toggle Group Control">
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
index d8604c59c540f..b33f53dd706b5 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
+++ b/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>
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
index 342f9f128defd..4481fc9f6138d 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control/as-radio-group.tsx
+++ b/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,
diff --git a/packages/components/src/toggle-group-control/types.ts b/packages/components/src/toggle-group-control/types.ts
index 2a4af680263db..463d8d26e6441 100644
--- a/packages/components/src/toggle-group-control/types.ts
+++ b/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' ];

From d554d1fc4bd8ab28519081a215fb8453ddcbe0ca Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 7 Oct 2024 21:34:07 +0900
Subject: [PATCH 2/3] Fix test

---
 packages/components/src/toggle-group-control/test/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/toggle-group-control/test/index.tsx b/packages/components/src/toggle-group-control/test/index.tsx
index 4d4fa16f784a3..d7b4824fce4de 100644
--- a/packages/components/src/toggle-group-control/test/index.tsx
+++ b/packages/components/src/toggle-group-control/test/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { press, click, hover, sleep } from '@ariakit/test';
 
 /**
@@ -168,9 +167,12 @@ describe.each( [
 			<Component label="Test Toggle Group Control">{ options }</Component>
 		);
 
-		await userEvent.tab();
 		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 () => {

From eeaf0f64f77bc5ed1088e71950aff990876145de Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Mon, 7 Oct 2024 21:34:51 +0900
Subject: [PATCH 3/3] Add changelog

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index f7f22160c2187..80f3537e7749e 100644
--- a/packages/components/CHANGELOG.md
+++ b/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)).
 
 ## 28.9.0 (2024-10-03)