Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Focus first focusable on Link UI #51105

Merged
merged 3 commits into from
Jun 9, 2023
Merged

Focus first focusable on Link UI #51105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f824519
Focus first focusable on Link UI
jeryj May 30, 2023
bd03bd8
Fix “should preserve trailing/leading whitespace from linked text in …
getdave Jun 9, 2023
1b446ef
Fix “should allow for modification of link text via Link UI” test
getdave Jun 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 2 additions & 9 deletions packages/block-editor/src/components/link-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
8 changes: 6 additions & 2 deletions packages/e2e-tests/specs/editor/various/links.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
Expand All @@ -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
);
Expand Down