Focus first focusable on Link UI (WordPress#51105)

* Focus first focusable on Link UI

* Fix “should preserve trailing/leading whitespace from linked text in text input” test

* Fix “should allow for modification of link text via Link UI” test

---------

Co-authored-by: Dave Smith <getdavemail@gmail.com>

packages/block-editor/src/components/link-control/index.js

@@ -181,22 +181,15 @@ function LinkControl( {
 			isMounting.current = false;
 			return;
 		}
-		// Unless we are mounting, we always want to focus either:
-		// - the URL input
-		// - the first focusable element in the Link UI.
-		// But in editing mode if there is a text input present then
-		// the URL input is at index 1. If not then it is at index 0.
-		const whichFocusTargetIndex = textInputRef?.current ? 1 : 0;
 
 		// Scenario - when:
 		// - switching between editable and non editable LinkControl
 		// - clicking on a link
 		// ...then move focus to the *first* element to avoid focus loss
 		// and to ensure focus is *within* the Link UI.
 		const nextFocusTarget =
-			focus.focusable.find( wrapperNode.current )[
-				whichFocusTargetIndex
-			] || wrapperNode.current;
+			focus.focusable.find( wrapperNode.current )[ 0 ] ||
+			wrapperNode.current;
 
 		nextFocusTarget.focus();
 

packages/e2e-tests/specs/editor/various/links.test.js

@@ -585,7 +585,9 @@ describe( 'Links', () => {
 
 			await editButton.click();
 
-			// Tabbing back should land us in the text input.
+			// Tabbing forward should land us in the "Text" input.
+			await page.keyboard.press( 'Tab' );
+
 			const textInputValue = await page.evaluate(
 				() => document.activeElement.value
 			);
@@ -612,7 +614,9 @@ describe( 'Links', () => {
 			);
 			await editButton.click();
 
-			// Tabbing should land us in the text input.
+			// tab forward to the text input.
+			await page.keyboard.press( 'Tab' );
+
 			const textInputValue = await page.evaluate(
 				() => document.activeElement.value
 			);