From 57919960c02e5f3eb6746f9a260f2ad5e0b09883 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 30 Aug 2023 16:52:11 +0100
Subject: [PATCH 1/2] Reinstate focus trap and focus first element

---
 packages/format-library/src/link/inline.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
index 29636a8d8b94be..5edbae9fbb9a0c 100644
--- a/packages/format-library/src/link/inline.js
+++ b/packages/format-library/src/link/inline.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef, createInterpolateElement } from '@wordpress/element';
+import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { Popover } from '@wordpress/components';
@@ -197,9 +197,9 @@ function InlineLinkUI( {
 	// See https://github.com/WordPress/gutenberg/pull/34742.
 	const forceRemountKey = useLinkInstanceKey( popoverAnchor );
 
-	// The focusOnMount prop shouldn't evolve during render of a Popover
-	// otherwise it causes a render of the content.
-	const focusOnMount = useRef( addingLink ? 'firstElement' : false );
+	// Ensure focus is set on the first element when the popover is opened.
+	// This also ensures a focus trap is active on the Popover.
+	const focusOnMountWithTrap = 'firstElement';
 
 	async function handleCreate( pageTitle ) {
 		const page = await createPageEntity( {
@@ -230,7 +230,7 @@ function InlineLinkUI( {
 	return (
 		<Popover
 			anchor={ popoverAnchor }
-			focusOnMount={ focusOnMount.current }
+			focusOnMount={ focusOnMountWithTrap }
 			onClose={ stopAddingLink }
 			onFocusOutside={ () => stopAddingLink( false ) }
 			placement="bottom"

From 2c61d3ba224cd36220351e711a9769c7d1c9b3a2 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 1 Sep 2023 14:11:20 +0100
Subject: [PATCH 2/2] Improve commenting to explain the purpose of the mount
 controlling

---
 packages/format-library/src/link/inline.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
index 5edbae9fbb9a0c..bf84f4a05595d2 100644
--- a/packages/format-library/src/link/inline.js
+++ b/packages/format-library/src/link/inline.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createInterpolateElement } from '@wordpress/element';
+import { useRef, createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { Popover } from '@wordpress/components';
@@ -197,9 +197,13 @@ function InlineLinkUI( {
 	// See https://github.com/WordPress/gutenberg/pull/34742.
 	const forceRemountKey = useLinkInstanceKey( popoverAnchor );
 
-	// Ensure focus is set on the first element when the popover is opened.
-	// This also ensures a focus trap is active on the Popover.
-	const focusOnMountWithTrap = 'firstElement';
+	// Focus should only be moved into the Popover when the Link is being created or edited.
+	// When the Link is in "preview" mode focus should remain on the rich text because at
+	// this point the Link dialog is informational only and thus the user should be able to
+	// continue editing the rich text.
+	// Ref used because the focusOnMount prop shouldn't evolve during render of a Popover
+	// otherwise it causes a render of the content.
+	const focusOnMount = useRef( addingLink ? 'firstElement' : false );
 
 	async function handleCreate( pageTitle ) {
 		const page = await createPageEntity( {
@@ -230,7 +234,7 @@ function InlineLinkUI( {
 	return (
 		<Popover
 			anchor={ popoverAnchor }
-			focusOnMount={ focusOnMountWithTrap }
+			focusOnMount={ focusOnMount.current }
 			onClose={ stopAddingLink }
 			onFocusOutside={ () => stopAddingLink( false ) }
 			placement="bottom"