Skip to content

Writing flow: Fix focus loss on toolbar return when last focus element isn't found #54443

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

Open
alexstine wants to merge 5 commits into
base: trunk
Choose a base branch
from
Open

Writing flow: Fix focus loss on toolbar return when last focus element isn't found #54443

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fea9104
Fix focus loss when returning from the block toolbar and block conten…
alexstine Sep 13, 2023
167046c
Cleanup code.
alexstine Sep 14, 2023
2f56283
If last focus defaults to block wrapper, try to find a better element…
alexstine Sep 14, 2023
65b9a77
Merge branch 'trunk' of github.com:WordPress/gutenberg into fix/writi…
alexstine Sep 18, 2023
87f37d8
Resolve conflict.
jeryj Aug 25, 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
Prev Previous commit
Next Next commit
Cleanup code.
  • Loading branch information
@alexstine
alexstine committed Sep 14, 2023
commit 167046c0e4b59dfdbc7a78bab83f16c3e4636029
27 changes: 10 additions & 17 deletions packages/block-editor/src/components/writing-flow/use-tab-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function useTabNav() {
} else if ( hasMultiSelection() ) {
container.current.focus();
} else if ( getSelectedBlockClientId() ) {
// Try to focus the last element.
// Try to focus the last element which had focus.
lastFocus.current.focus();
// Check to see if focus worked.
if (
Expand All @@ -51,24 +51,17 @@ export default function useTabNav() {
// Looks like yes, return early.
return;
}
// Access the last known block and try to find a new area to focus.
const selectedBlock = lastBlock.current;
if ( ! selectedBlock ) {
// TODO: Should this be handled?
return;
}
// Get first tabbable in the block if one exists.
const firstBlockTabbable = focus.tabbable.findNext( selectedBlock );
// Check to ensure tabbable element is inside the current block.
const tabbableInSelectedBlock = firstBlockTabbable
? isInSameBlock( firstBlockTabbable, selectedBlock )
: false;
if ( tabbableInSelectedBlock ) {
// Focus the found tabbable in the selected block.
// Last element focus did not work. Now try to find the first tabbable in the last block to focus.
const firstBlockTabbable = focus.tabbable.findNext(
lastBlock.current
);
// Check to ensure tabbable is inside the last block and that it is a form element.
if ( isInSameBlock( lastBlock.current, firstBlockTabbable ) ) {
// Focus the found tabbable in the last block.
firstBlockTabbable.focus();
} else {
// Focus the block wrapper if no tabbable was found.
selectedBlock.focus();
// Focus the last block wrapper if no tabbable was found.
lastBlock.current.focus();
}
} else {
setNavigationMode( true );
Expand Down