From d142cb0e72cedb369df918caa89513074bda9904 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 7 Feb 2023 09:57:02 +0000
Subject: [PATCH] Add settings "drawer" to Link Control (#47328)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add basic panel toggle

* Implement drawer like effect

* Implement basic animation

* Update to have drawer below button

* Update timing to 0.2s

* Fix janky animation

* Close settings drawer when editing is stopped

* Fix input overflowing in settings drawer

* Disable animations when user requests reduced motion

* Force no animations in component tests

* Fix text input tests broken due to move into settings drawer

* Fix remaining tests broken by settings drawer

* speed up animation

* Move drawer to dedicated component

* Add test for settings drawer with unique ID

* Check for aria expanded attribute

* Avoid extra div when reduced motion is active

* Don’t show settings unless in edit mode

* Add test for link settings toggle not being displayed unless editing

* Fix e2e tests due to change of text input location

* Fix more e2e tests

* Fix final e2e test

* Fix e2e test that arrived following rebase

---------

Co-authored-by: scruffian <ben@escruffian.com>
---
 .../src/components/link-control/index.js      |  44 +++----
 .../link-control/settings-drawer.js           | 115 +++++++++++++-----
 .../src/components/link-control/settings.js   |  41 +++++++
 .../src/components/link-control/style.scss    |  40 ++++--
 .../src/components/link-control/test/index.js |  96 ++++++++++++++-
 .../specs/editor/various/links.test.js        |  66 +++++++---
 6 files changed, 326 insertions(+), 76 deletions(-)
 create mode 100644 packages/block-editor/src/components/link-control/settings.js

diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 73e2f6bb8e0e1d..a63723e463d813 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
+import { Button, Spinner, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
@@ -136,6 +136,8 @@ function LinkControl( {
 	const textInputRef = useRef();
 	const isEndingEditWithFocus = useRef( false );
 
+	const [ settingsOpen, setSettingsOpen ] = useState( false );
+
 	const [ internalUrlInputValue, setInternalUrlInputValue ] =
 		useInternalInputValue( value?.url || '' );
 
@@ -201,6 +203,7 @@ function LinkControl( {
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
+		setSettingsOpen( false );
 		setIsEditingLink( false );
 	};
 
@@ -267,7 +270,7 @@ function LinkControl( {
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
-	const showSettingsDrawer = !! settings?.length;
+	const showSettings = !! settings?.length;
 
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
@@ -275,6 +278,7 @@ function LinkControl( {
 	const showTextControl = hasLinkValue && hasTextControl;
 
 	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
+
 	return (
 		<div
 			tabIndex={ -1 }
@@ -295,18 +299,6 @@ function LinkControl( {
 							'has-text-control': showTextControl,
 						} ) }
 					>
-						{ showTextControl && (
-							<TextControl
-								__nextHasNoMarginBottom
-								ref={ textInputRef }
-								className="block-editor-link-control__field block-editor-link-control__text-content"
-								label="Text"
-								value={ internalTextInputValue }
-								onChange={ setInternalTextInputValue }
-								onKeyDown={ handleSubmitWithEnter }
-							/>
-						) }
-
 						<LinkControlSearchInput
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
@@ -350,18 +342,26 @@ function LinkControl( {
 				/>
 			) }
 
-			<div className="block-editor-link-control__drawer">
-				{ showSettingsDrawer && (
-					<div className="block-editor-link-control__tools">
+			{ isEditing && (
+				<div className="block-editor-link-control__tools">
+					{ ( showSettings || showTextControl ) && (
 						<LinkControlSettingsDrawer
+							settingsOpen={ settingsOpen }
+							setSettingsOpen={ setSettingsOpen }
+							showTextControl={ showTextControl }
+							showSettings={ showSettings }
+							textInputRef={ textInputRef }
+							internalTextInputValue={ internalTextInputValue }
+							setInternalTextInputValue={
+								setInternalTextInputValue
+							}
+							handleSubmitWithEnter={ handleSubmitWithEnter }
 							value={ value }
 							settings={ settings }
 							onChange={ onChange }
 						/>
-					</div>
-				) }
+					) }
 
-				{ isEditing && (
 					<div className="block-editor-link-control__search-actions">
 						<Button
 							variant="primary"
@@ -375,8 +375,8 @@ function LinkControl( {
 							{ __( 'Cancel' ) }
 						</Button>
 					</div>
-				) }
-			</div>
+				</div>
+			) }
 
 			{ renderControlBottom && renderControlBottom() }
 		</div>
diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js
index 4b9d0d7f7419e7..e58b4409645b33 100644
--- a/packages/block-editor/src/components/link-control/settings-drawer.js
+++ b/packages/block-editor/src/components/link-control/settings-drawer.js
@@ -1,41 +1,96 @@
 /**
  * WordPress dependencies
  */
+import {
+	Button,
+	TextControl,
+	__unstableMotion as motion,
+	__unstableAnimatePresence as AnimatePresence,
+} from '@wordpress/components';
+import { settings as settingsIcon } from '@wordpress/icons';
+import { useReducedMotion, useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, VisuallyHidden } from '@wordpress/components';
-
-const noop = () => {};
+import { Fragment } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import Settings from './settings';
 
-const LinkControlSettingsDrawer = ( { value, onChange = noop, settings } ) => {
-	if ( ! settings || ! settings.length ) {
-		return null;
-	}
+function LinkSettingsDrawer( {
+	settingsOpen,
+	setSettingsOpen,
+	showTextControl,
+	showSettings,
+	textInputRef,
+	internalTextInputValue,
+	setInternalTextInputValue,
+	handleSubmitWithEnter,
+	value,
+	settings,
+	onChange,
+} ) {
+	const prefersReducedMotion = useReducedMotion();
+	const MaybeAnimatePresence = prefersReducedMotion
+		? Fragment
+		: AnimatePresence;
+	const MaybeMotionDiv = prefersReducedMotion ? 'div' : motion.div;
 
-	const handleSettingChange = ( setting ) => ( newValue ) => {
-		onChange( {
-			...value,
-			[ setting.id ]: newValue,
-		} );
-	};
+	const id = useInstanceId( LinkSettingsDrawer );
 
-	const theSettings = settings.map( ( setting ) => (
-		<ToggleControl
-			className="block-editor-link-control__setting"
-			key={ setting.id }
-			label={ setting.title }
-			onChange={ handleSettingChange( setting ) }
-			checked={ value ? !! value[ setting.id ] : false }
-		/>
-	) );
+	const settingsDrawerId = `link-control-settings-drawer-${ id }`;
 
 	return (
-		<fieldset className="block-editor-link-control__settings">
-			<VisuallyHidden as="legend">
-				{ __( 'Currently selected link settings' ) }
-			</VisuallyHidden>
-			{ theSettings }
-		</fieldset>
+		<>
+			<Button
+				className="block-editor-link-control__drawer-toggle"
+				aria-expanded={ settingsOpen }
+				onClick={ () => setSettingsOpen( ! settingsOpen ) }
+				icon={ settingsIcon }
+				label={ __( 'Toggle link settings' ) }
+				aria-controls={ settingsDrawerId }
+			/>
+			<MaybeAnimatePresence>
+				{ settingsOpen && (
+					<MaybeMotionDiv
+						className="block-editor-link-control__drawer"
+						hidden={ ! settingsOpen }
+						id={ settingsDrawerId }
+						initial="collapsed"
+						animate="open"
+						exit="collapsed"
+						variants={ {
+							open: { opacity: 1, height: 'auto' },
+							collapsed: { opacity: 0, height: 0 },
+						} }
+						transition={ {
+							duration: 0.1,
+						} }
+					>
+						<div className="block-editor-link-control__drawer-inner">
+							{ showTextControl && (
+								<TextControl
+									__nextHasNoMarginBottom
+									ref={ textInputRef }
+									className="block-editor-link-control__setting block-editor-link-control__text-content"
+									label="Text"
+									value={ internalTextInputValue }
+									onChange={ setInternalTextInputValue }
+									onKeyDown={ handleSubmitWithEnter }
+								/>
+							) }
+							{ showSettings && (
+								<Settings
+									value={ value }
+									settings={ settings }
+									onChange={ onChange }
+								/>
+							) }
+						</div>
+					</MaybeMotionDiv>
+				) }
+			</MaybeAnimatePresence>
+		</>
 	);
-};
+}
 
-export default LinkControlSettingsDrawer;
+export default LinkSettingsDrawer;
diff --git a/packages/block-editor/src/components/link-control/settings.js b/packages/block-editor/src/components/link-control/settings.js
new file mode 100644
index 00000000000000..beddc00d5cd50f
--- /dev/null
+++ b/packages/block-editor/src/components/link-control/settings.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToggleControl, VisuallyHidden } from '@wordpress/components';
+
+const noop = () => {};
+
+const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
+	if ( ! settings || ! settings.length ) {
+		return null;
+	}
+
+	const handleSettingChange = ( setting ) => ( newValue ) => {
+		onChange( {
+			...value,
+			[ setting.id ]: newValue,
+		} );
+	};
+
+	const theSettings = settings.map( ( setting ) => (
+		<ToggleControl
+			className="block-editor-link-control__setting"
+			key={ setting.id }
+			label={ setting.title }
+			onChange={ handleSettingChange( setting ) }
+			checked={ value ? !! value[ setting.id ] : false }
+		/>
+	) );
+
+	return (
+		<fieldset className="block-editor-link-control__settings">
+			<VisuallyHidden as="legend">
+				{ __( 'Currently selected link settings' ) }
+			</VisuallyHidden>
+			{ theSettings }
+		</fieldset>
+	);
+};
+
+export default LinkControlSettings;
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index cadb0ce6340e28..f93c724598b893 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -80,6 +80,7 @@ $preview-image-height: 140px;
 	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
 	justify-content: flex-start;
 	gap: $grid-unit-10;
+	order: 20;
 }
 
 .components-button .block-editor-link-control__search-submit .has-icon {
@@ -427,12 +428,42 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__drawer {
+	display: flex; // allow for ordering.
+	order: 30;
+	flex-direction: column;
+	flex-basis: 100%; // occupy full width.
+}
+
+// Inner div required to avoid padding/margin
+// causing janky animation.
+.block-editor-link-control__drawer-inner {
+	display: flex; // allow for ordering.
+	flex-direction: column;
+	flex-basis: 100%; // occupy full width.
+	margin-top: $grid-unit-20;
+	padding-top: $grid-unit-20;
+	position: relative;
+
+	&::after {
+		content: "";
+		display: block;
+		height: 1px;
+		background-color: $gray-300;
+		position: absolute;
+		left: -$grid-unit-20;
+		right: -$grid-unit-20;
+		top: 0;
+	}
+}
+
+.block-editor-link-control__tools {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
-	border-top: $border-width solid $gray-300;
 	margin: 0;
 	padding: $grid-unit-20;
+	padding-top: 0;
 }
 
 .block-editor-link-control__unlink {
@@ -444,11 +475,6 @@ $preview-image-height: 140px;
 	flex: 1;
 	margin: 0;
 
-
-	:last-child {
-		margin-bottom: 0;
-	}
-
 	.is-alternate & {
 		border-top: $border-width solid $gray-900;
 	}
@@ -457,7 +483,7 @@ $preview-image-height: 140px;
 .block-editor-link-control__setting {
 	margin-bottom: $grid-unit-20;
 
-	:last-child {
+	&.block-editor-link-control__setting:last-child {
 		margin-bottom: 0;
 	}
 }
diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index 3133f8e075d4f0..e030e6cce5ca3f 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -53,6 +53,11 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 
 jest.useRealTimers();
 
+jest.mock( '@wordpress/compose', () => ( {
+	...jest.requireActual( '@wordpress/compose' ),
+	useReducedMotion: jest.fn( () => true ),
+} ) );
+
 beforeEach( () => {
 	// Setup a DOM element as a render target.
 	mockFetchSearchSuggestions.mockImplementation( fetchFauxEntitySuggestions );
@@ -789,6 +794,8 @@ describe( 'Manual link entry', () => {
 
 			await user.click( editButton );
 
+			await toggleSettingsDrawer( user );
+
 			let searchInput = screen.getByRole( 'combobox', {
 				name: 'URL',
 			} );
@@ -821,6 +828,8 @@ describe( 'Manual link entry', () => {
 
 			await user.click( editButton );
 
+			await toggleSettingsDrawer( user );
+
 			// Re-query the inputs as they have been replaced.
 			searchInput = screen.getByRole( 'combobox', {
 				name: 'URL',
@@ -1649,6 +1658,62 @@ describe( 'Selecting links', () => {
 } );
 
 describe( 'Addition Settings UI', () => {
+	it( 'should not show a means to toggle the link settings when not editing a link', async () => {
+		const selectedLink = fauxEntitySuggestions[ 0 ];
+
+		const LinkControlConsumer = () => {
+			const [ link ] = useState( selectedLink );
+
+			return <LinkControl value={ link } />;
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const settingsToggle = screen.queryByRole( 'button', {
+			name: 'Toggle link settings',
+			ariaControls: 'link-settings-1',
+		} );
+
+		expect( settingsToggle ).not.toBeInTheDocument();
+	} );
+	it( 'should provides a means to toggle the link settings', async () => {
+		const selectedLink = fauxEntitySuggestions[ 0 ];
+
+		const LinkControlConsumer = () => {
+			const [ link ] = useState( selectedLink );
+
+			return <LinkControl value={ link } forceIsEditingLink />;
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const user = userEvent.setup();
+
+		const settingsToggle = screen.queryByRole( 'button', {
+			name: 'Toggle link settings',
+			ariaControls: 'link-settings-1',
+		} );
+
+		expect( settingsToggle ).toHaveAttribute( 'aria-expanded', 'false' );
+
+		expect( settingsToggle ).toBeVisible();
+
+		await user.click( settingsToggle );
+
+		expect( settingsToggle ).toHaveAttribute( 'aria-expanded', 'true' );
+
+		const newTabSettingInput = screen.getByRole( 'checkbox', {
+			name: 'Open in new tab',
+		} );
+
+		expect( newTabSettingInput ).toBeVisible();
+
+		await user.click( settingsToggle );
+
+		expect( settingsToggle ).toHaveAttribute( 'aria-expanded', 'false' );
+		expect( newTabSettingInput ).not.toBeVisible();
+	} );
+
 	it( 'should display "New Tab" setting (in "off" mode) by default when a link is selected', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 		const expectedSettingText = 'Open in new tab';
@@ -1656,11 +1721,15 @@ describe( 'Addition Settings UI', () => {
 		const LinkControlConsumer = () => {
 			const [ link ] = useState( selectedLink );
 
-			return <LinkControl value={ link } />;
+			return <LinkControl value={ link } forceIsEditingLink />;
 		};
 
 		render( <LinkControlConsumer /> );
 
+		const user = userEvent.setup();
+
+		await toggleSettingsDrawer( user );
+
 		const newTabSettingLabel = screen.getByText( expectedSettingText );
 		expect( newTabSettingLabel ).toBeVisible();
 
@@ -1693,12 +1762,17 @@ describe( 'Addition Settings UI', () => {
 				<LinkControl
 					value={ { ...link, newTab: false, noFollow: true } }
 					settings={ customSettings }
+					forceIsEditingLink
 				/>
 			);
 		};
 
 		render( <LinkControlConsumer /> );
 
+		const user = userEvent.setup();
+
+		await toggleSettingsDrawer( user );
+
 		expect( screen.queryAllByRole( 'checkbox' ) ).toHaveLength( 2 );
 
 		expect(
@@ -2047,6 +2121,10 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		const user = userEvent.setup();
+
+		await toggleSettingsDrawer( user );
+
 		expect(
 			screen.queryByRole( 'textbox', { name: 'Text' } )
 		).toBeVisible();
@@ -2073,6 +2151,10 @@ describe( 'Controlling link title text', () => {
 				/>
 			);
 
+			const user = userEvent.setup();
+
+			await toggleSettingsDrawer( user );
+
 			const textInput = screen.queryByRole( 'textbox', {
 				name: 'Text',
 			} );
@@ -2095,6 +2177,8 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		await toggleSettingsDrawer( user );
+
 		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
 
 		await user.clear( textInput );
@@ -2129,6 +2213,8 @@ describe( 'Controlling link title text', () => {
 			/>
 		);
 
+		await toggleSettingsDrawer( user );
+
 		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
 
 		expect( textInput ).toBeVisible();
@@ -2152,3 +2238,11 @@ describe( 'Controlling link title text', () => {
 		).not.toBeInTheDocument();
 	} );
 } );
+
+async function toggleSettingsDrawer( user ) {
+	const settingsToggle = screen.queryByRole( 'button', {
+		name: 'Toggle link settings',
+	} );
+
+	await user.click( settingsToggle );
+}
diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js
index 9ffbd6aa041ca7..6d60631984e35f 100644
--- a/packages/e2e-tests/specs/editor/various/links.test.js
+++ b/packages/e2e-tests/specs/editor/various/links.test.js
@@ -8,6 +8,7 @@ import {
 	createNewPost,
 	pressKeyWithModifier,
 	showBlockToolbar,
+	pressKeyTimes,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Links', () => {
@@ -119,6 +120,10 @@ describe( 'Links', () => {
 		// Type a URL.
 		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
+		// Open settings.
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Space' );
+
 		// Navigate to and toggle the "Open in new tab" checkbox.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
@@ -524,6 +529,10 @@ describe( 'Links', () => {
 		await waitForURLFieldAutoFocus();
 		await page.keyboard.type( 'w.org' );
 
+		// Toggle link settings open
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Space' );
+
 		// Navigate to and toggle the "Open in new tab" checkbox.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
@@ -532,10 +541,9 @@ describe( 'Links', () => {
 		// a changing value of the setting.
 		await page.waitForSelector( ':focus.components-form-toggle__input' );
 
-		// Close dialog. Expect that "Open in new tab" would have been applied
+		// Submit link. Expect that "Open in new tab" would have been applied
 		// immediately.
-
-		await pressKeyWithModifier( 'shift', 'Tab' );
+		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Enter' );
 
 		// Wait for Gutenberg to finish the job.
@@ -596,8 +604,10 @@ describe( 'Links', () => {
 			// Press Cmd+K to insert a link.
 			await pressKeyWithModifier( 'primary', 'K' );
 
-			// Wait for the URL field to auto-focus.
-			await waitForURLFieldAutoFocus();
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Toggle link settings")]'
+			);
+			await settingsToggle.click();
 
 			const textInput = await page
 				.waitForXPath(
@@ -624,11 +634,17 @@ describe( 'Links', () => {
 				'//button[contains(@aria-label, "Edit")]'
 			);
 			await editButton.click();
+
 			await waitForURLFieldAutoFocus();
 
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Toggle link settings")]'
+			);
+			await settingsToggle.click();
 
-			// Tabbing back should land us in the text input.
+			await page.keyboard.press( 'Tab' );
+
+			// Tabbing should land us in the text input.
 			const { isTextInput, textValue } = await page.evaluate( () => {
 				const el = document.activeElement;
 
@@ -685,7 +701,12 @@ describe( 'Links', () => {
 
 			await waitForURLFieldAutoFocus();
 
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Toggle link settings")]'
+			);
+			await settingsToggle.click();
+
+			await page.keyboard.press( 'Tab' );
 
 			// Tabbing back should land us in the text input.
 			const textInputValue = await page.evaluate(
@@ -715,9 +736,14 @@ describe( 'Links', () => {
 			await editButton.click();
 			await waitForURLFieldAutoFocus();
 
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Toggle link settings")]'
+			);
+			await settingsToggle.click();
 
-			// Tabbing back should land us in the text input.
+			await page.keyboard.press( 'Tab' );
+
+			// Tabbing should land us in the text input.
 			const textInputValue = await page.evaluate(
 				() => document.activeElement.value
 			);
@@ -761,11 +787,13 @@ describe( 'Links', () => {
 			await editButton.click();
 			await waitForURLFieldAutoFocus();
 
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Toggle link settings")]'
+			);
+			await settingsToggle.click();
+
 			// Move focus back to RichText for the underlying link.
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
+			await pressKeyTimes( 'Tab', 5 );
 
 			// Make a selection within the RichText.
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
@@ -773,7 +801,7 @@ describe( 'Links', () => {
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
 
 			// Move back to the text input.
-			await page.keyboard.press( 'Tab' );
+			await pressKeyTimes( 'Tab', 3 );
 
 			// Tabbing back should land us in the text input.
 			const textInputValue = await page.evaluate(
@@ -971,8 +999,14 @@ describe( 'Links', () => {
 			await page.keyboard.press( 'Tab' );
 			await page.keyboard.press( 'Enter' );
 
+			await waitForURLFieldAutoFocus();
+
+			// Toggle link settings open
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.press( 'Space' );
+
 			// Move to Link Text field.
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			await page.keyboard.press( 'Tab' );
 
 			// Change text to "z"
 			await page.keyboard.type( 'z' );