From 2cfca50570ddd15da84247138cbb5ea338f6587f Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 17:19:55 +0800
Subject: [PATCH 1/7] Ensure the confirm dialog cannnot be submitted using
 enter when the cancel button is focused

---
 packages/components/src/confirm-dialog/component.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/confirm-dialog/component.tsx b/packages/components/src/confirm-dialog/component.tsx
index 92fb3fa08fbb1..78f3bf6cafa51 100644
--- a/packages/components/src/confirm-dialog/component.tsx
+++ b/packages/components/src/confirm-dialog/component.tsx
@@ -7,7 +7,7 @@ import type { ForwardedRef, KeyboardEvent } from 'react';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -42,6 +42,7 @@ function ConfirmDialog(
 
 	const cx = useCx();
 	const wrapperClassName = cx( styles.wrapper );
+	const cancelButtonRef = useRef();
 
 	const [ isOpen, setIsOpen ] = useState< boolean >();
 	const [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();
@@ -69,6 +70,10 @@ function ConfirmDialog(
 
 	const handleEnter = useCallback(
 		( event: KeyboardEvent< HTMLDivElement > ) => {
+			// Avoid triggering the 'confirm' action when the cancel button is focused.
+			if ( event.target === cancelButtonRef.current ) {
+				return;
+			}
 			if ( event.key === 'Enter' ) {
 				handleEvent( onConfirm )( event );
 			}
@@ -96,6 +101,7 @@ function ConfirmDialog(
 						<Text>{ children }</Text>
 						<Flex direction="row" justify="flex-end">
 							<Button
+								ref={ cancelButtonRef }
 								variant="tertiary"
 								onClick={ handleEvent( onCancel ) }
 							>

From a6292f7e6a090468567811525fd09607638d6d59 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 17:22:29 +0800
Subject: [PATCH 2/7] Add test case

---
 .../src/confirm-dialog/test/index.js          | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/components/src/confirm-dialog/test/index.js b/packages/components/src/confirm-dialog/test/index.js
index c9ea800cba3cb..da68a2468762f 100644
--- a/packages/components/src/confirm-dialog/test/index.js
+++ b/packages/components/src/confirm-dialog/test/index.js
@@ -194,6 +194,27 @@ describe( 'Confirm', () => {
 				expect( confirmDialog ).not.toBeInTheDocument();
 				expect( onConfirm ).toHaveBeenCalled();
 			} );
+
+			it( 'calls only the `onCancel` callback and not the `onConfirm` callback when the cancel button is submitted using the keyboard', async () => {
+				const user = userEvent.setup();
+
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				render(
+					<ConfirmDialog
+						onConfirm={ onConfirm }
+						onCancel={ onCancel }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				await user.keyboard( '[Tab][Enter]' );
+
+				expect( onConfirm ).not.toHaveBeenCalled();
+				expect( onCancel ).toHaveBeenCalled();
+			} );
 		} );
 	} );
 

From 6af106d468935314ff83229d860667f76ddecc35 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 17:24:27 +0800
Subject: [PATCH 3/7] Add CHANGELOG entry

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

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index f33d32ed89497..90f1d275626c3 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -13,6 +13,7 @@
 -   `Popover`: Allow legitimate 0 positions to update popover position ([#51320](https://github.com/WordPress/gutenberg/pull/51320)).
 -   `Button`: Remove unnecessary margin from dashicon ([#51395](https://github.com/WordPress/gutenberg/pull/51395)).
 -   `Autocomplete`: Announce how many results are available to screen readers when suggestions list first renders ([#51018](https://github.com/WordPress/gutenberg/pull/51018)).
+-   `ConfirmDialog`: Ensure onConfirm isn't called when submitting the cancel button using the keyboard ([#TBC](https://github.com/WordPress/gutenberg/pull/TBC)).
 
 ### Internal
 

From 0e5816996c2a911d213201b6eb0f8342c8f6d53c Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Wed, 21 Jun 2023 17:39:33 +0800
Subject: [PATCH 4/7] Add PR number to changelog

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

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 90f1d275626c3..63807bd014ed7 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -13,7 +13,7 @@
 -   `Popover`: Allow legitimate 0 positions to update popover position ([#51320](https://github.com/WordPress/gutenberg/pull/51320)).
 -   `Button`: Remove unnecessary margin from dashicon ([#51395](https://github.com/WordPress/gutenberg/pull/51395)).
 -   `Autocomplete`: Announce how many results are available to screen readers when suggestions list first renders ([#51018](https://github.com/WordPress/gutenberg/pull/51018)).
--   `ConfirmDialog`: Ensure onConfirm isn't called when submitting the cancel button using the keyboard ([#TBC](https://github.com/WordPress/gutenberg/pull/TBC)).
+-   `ConfirmDialog`: Ensure onConfirm isn't called when submitting the cancel button using the keyboard ([#51730](https://github.com/WordPress/gutenberg/pull/51730)).
 
 ### Internal
 

From acde51c1ace2708a6abb60e9b3463baa94738543 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 22 Jun 2023 11:54:06 +0800
Subject: [PATCH 5/7] Also prevent double submission of Confirm button

---
 packages/components/CHANGELOG.md              |  2 +-
 .../src/confirm-dialog/component.tsx          | 14 +++++++----
 .../src/confirm-dialog/test/index.js          | 23 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 63807bd014ed7..2322d6f48ae73 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -13,7 +13,7 @@
 -   `Popover`: Allow legitimate 0 positions to update popover position ([#51320](https://github.com/WordPress/gutenberg/pull/51320)).
 -   `Button`: Remove unnecessary margin from dashicon ([#51395](https://github.com/WordPress/gutenberg/pull/51395)).
 -   `Autocomplete`: Announce how many results are available to screen readers when suggestions list first renders ([#51018](https://github.com/WordPress/gutenberg/pull/51018)).
--   `ConfirmDialog`: Ensure onConfirm isn't called when submitting the cancel button using the keyboard ([#51730](https://github.com/WordPress/gutenberg/pull/51730)).
+-   `ConfirmDialog`: Ensure onConfirm isn't called an extra time when submitting one of the buttons using the keyboard ([#51730](https://github.com/WordPress/gutenberg/pull/51730)).
 
 ### Internal
 
diff --git a/packages/components/src/confirm-dialog/component.tsx b/packages/components/src/confirm-dialog/component.tsx
index 78f3bf6cafa51..7f7216db90287 100644
--- a/packages/components/src/confirm-dialog/component.tsx
+++ b/packages/components/src/confirm-dialog/component.tsx
@@ -43,6 +43,7 @@ function ConfirmDialog(
 	const cx = useCx();
 	const wrapperClassName = cx( styles.wrapper );
 	const cancelButtonRef = useRef();
+	const confirmButtonRef = useRef();
 
 	const [ isOpen, setIsOpen ] = useState< boolean >();
 	const [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();
@@ -70,11 +71,13 @@ function ConfirmDialog(
 
 	const handleEnter = useCallback(
 		( event: KeyboardEvent< HTMLDivElement > ) => {
-			// Avoid triggering the 'confirm' action when the cancel button is focused.
-			if ( event.target === cancelButtonRef.current ) {
-				return;
-			}
-			if ( event.key === 'Enter' ) {
+			// Avoid triggering the 'confirm' action when the a button is focused.
+			// As this can cause a double submission.
+			const isConfirmOrCancelButton =
+				event.target === cancelButtonRef.current ||
+				event.target === confirmButtonRef.current;
+
+			if ( ! isConfirmOrCancelButton && event.key === 'Enter' ) {
 				handleEvent( onConfirm )( event );
 			}
 		},
@@ -108,6 +111,7 @@ function ConfirmDialog(
 								{ cancelLabel }
 							</Button>
 							<Button
+								ref={ confirmButtonRef }
 								variant="primary"
 								onClick={ handleEvent( onConfirm ) }
 							>
diff --git a/packages/components/src/confirm-dialog/test/index.js b/packages/components/src/confirm-dialog/test/index.js
index da68a2468762f..4aecd43f57086 100644
--- a/packages/components/src/confirm-dialog/test/index.js
+++ b/packages/components/src/confirm-dialog/test/index.js
@@ -213,7 +213,28 @@ describe( 'Confirm', () => {
 				await user.keyboard( '[Tab][Enter]' );
 
 				expect( onConfirm ).not.toHaveBeenCalled();
-				expect( onCancel ).toHaveBeenCalled();
+				expect( onCancel ).toHaveBeenCalledTimes( 1 );
+			} );
+
+			it( 'calls only the `onConfirm` callback when the confirm button is submitted using the keyboard', async () => {
+				const user = userEvent.setup();
+
+				const onConfirm = jest.fn().mockName( 'onConfirm()' );
+				const onCancel = jest.fn().mockName( 'onCancel()' );
+
+				render(
+					<ConfirmDialog
+						onConfirm={ onConfirm }
+						onCancel={ onCancel }
+					>
+						Are you sure?
+					</ConfirmDialog>
+				);
+
+				await user.keyboard( '[Tab][Tab][Enter]' );
+
+				expect( onConfirm ).toHaveBeenCalledTimes( 1 );
+				expect( onCancel ).not.toHaveBeenCalled();
 			} );
 		} );
 	} );

From 00d17b300730228e533d1cf8169a7890270739f7 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 22 Jun 2023 12:11:31 +0800
Subject: [PATCH 6/7] Use actions in storybook example rather than outputting
 to a heading

---
 .../src/confirm-dialog/stories/index.js       | 23 +++++++------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/packages/components/src/confirm-dialog/stories/index.js b/packages/components/src/confirm-dialog/stories/index.js
index 92274c70aaf79..10d051c23fcf0 100644
--- a/packages/components/src/confirm-dialog/stories/index.js
+++ b/packages/components/src/confirm-dialog/stories/index.js
@@ -7,7 +7,6 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
-import { Heading } from '../../heading';
 import { ConfirmDialog } from '..';
 
 const meta = {
@@ -26,12 +25,8 @@ const meta = {
 		isOpen: {
 			control: { type: null },
 		},
-		onConfirm: {
-			control: { type: null },
-		},
-		onCancel: {
-			control: { type: null },
-		},
+		onConfirm: { action: 'onConfirm' },
+		onCancel: { action: 'onCancel' },
 	},
 	args: {
 		children: 'Would you like to privately publish the post now?',
@@ -43,19 +38,19 @@ const meta = {
 
 export default meta;
 
-const Template = ( args ) => {
+const Template = ( { onConfirm, onCancel, ...args } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
-	const [ confirmVal, setConfirmVal ] = useState( '' );
 
-	const handleConfirm = () => {
-		setConfirmVal( 'Confirmed!' );
+	const handleConfirm = ( ...confirmArgs ) => {
+		onConfirm( ...confirmArgs );
 		setIsOpen( false );
 	};
 
-	const handleCancel = () => {
-		setConfirmVal( 'Cancelled' );
+	const handleCancel = ( ...cancelArgs ) => {
+		onCancel( ...cancelArgs );
 		setIsOpen( false );
 	};
+
 	return (
 		<>
 			<Button variant="primary" onClick={ () => setIsOpen( true ) }>
@@ -70,8 +65,6 @@ const Template = ( args ) => {
 			>
 				{ args.children }
 			</ConfirmDialog>
-
-			<Heading level={ 1 }>{ confirmVal }</Heading>
 		</>
 	);
 };

From 18f2cd8a6ac31bc9e17db0541e1ecc049361378b Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 23 Jun 2023 13:00:33 +0800
Subject: [PATCH 7/7] Fix typo

---
 packages/components/src/confirm-dialog/component.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/confirm-dialog/component.tsx b/packages/components/src/confirm-dialog/component.tsx
index 7f7216db90287..b5c6cdf45f99a 100644
--- a/packages/components/src/confirm-dialog/component.tsx
+++ b/packages/components/src/confirm-dialog/component.tsx
@@ -71,8 +71,8 @@ function ConfirmDialog(
 
 	const handleEnter = useCallback(
 		( event: KeyboardEvent< HTMLDivElement > ) => {
-			// Avoid triggering the 'confirm' action when the a button is focused.
-			// As this can cause a double submission.
+			// Avoid triggering the 'confirm' action when a button is focused,
+			// as this can cause a double submission.
 			const isConfirmOrCancelButton =
 				event.target === cancelButtonRef.current ||
 				event.target === confirmButtonRef.current;