Skip to content

Commit

Permalink
If last focus defaults to block wrapper, try to find a better element…
Browse files Browse the repository at this point in the history
… to focus instead. The fallback is still wrapper but its last in the list.
  • Loading branch information
alexstine committed Sep 14, 2023
1 parent 167046c commit 2f56283
Showing 1 changed file with 13 additions and 10 deletions.
23 changes: 13 additions & 10 deletions packages/block-editor/src/components/writing-flow/use-tab-nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,22 +41,25 @@ export default function useTabNav() {
} else if ( hasMultiSelection() ) {
container.current.focus();
} else if ( getSelectedBlockClientId() ) {
// Try to focus the last element which had focus.
lastFocus.current.focus();
// Check to see if focus worked.
if (
lastFocus.current.ownerDocument.activeElement ===
lastFocus.current
) {
// Looks like yes, return early.
return;
// If last focus position matches last block, this likely means we're on the last block wrapper. Let's try to find a better place to focus before defaulting to the wrapper.
if ( lastBlock.current !== lastFocus.current ) {
// Try to focus the last element which had focus.
lastFocus.current.focus();
// Check to see if focus worked.
if (
lastFocus.current.ownerDocument.activeElement ===
lastFocus.current
) {
// Looks like yes, return early.
return;
}
}
// 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 ) ) {
if ( isInsideRootBlock( lastBlock.current, firstBlockTabbable ) ) {
// Focus the found tabbable in the last block.
firstBlockTabbable.focus();
} else {
Expand Down

0 comments on commit 2f56283

Please sign in to comment.