From 360b5a00e2c9f39648fa4ca616414cd575eebdce Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 9 Jun 2023 07:42:48 -0500 Subject: [PATCH] Focus first focusable on Link UI (#51105) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .../block-editor/src/components/link-control/index.js | 11 ++--------- packages/e2e-tests/specs/editor/various/links.test.js | 8 ++++++-- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 1d4003486727b..4803b9a0efebc 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -181,12 +181,6 @@ 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 @@ -194,9 +188,8 @@ function LinkControl( { // ...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(); diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index d902e35fc09eb..79f2ada80e61f 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/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 );