Navigation block not focused on setup

[tellthemachines]

Description

When adding a block that doesn't immediately contain a text area, the block wrapper is focused. See for example Group or Columns block: add a Group, note that focus is on the block wrapper, and pressing Tab or Arrow down once transfers focus to the block inserter inside.

With the, Navigation block, clicking "Start empty" should move focus to the block wrapper as well, but that's not happening: focus is lost (document.activeElement returns the document body). Tab will move it to the block wrapper, but this is inconsistent with how other blocks behave so can cause confusion.

Step-by-step reproduction instructions

1. Add a Navigation block to the page.
2. Select "Start empty" from the block placeholder.
3. Note that focus is not on the block wrapper.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[getdave]

Thanks for reporting 👍

[getdave]

Related to #37934 ?

[tellthemachines]

Related to #37934 ?

I don't think so; #37934 only moves focus into the block when it displays a placeholder, not once it's already set up.

This may be related to the spinner if the block remounts on displaying it, but that's just a guess, I didn't really look into what the cause was.

[JustinyAhin]

Hello @getdave @youknowriad. I have been trying to debug this issue in order to fix it.

I've noticed that after the new navigation menu is created here

gutenberg/packages/block-library/src/navigation/edit/index.js

Line 655 in 2044a07

onCreateEmpty={ () => createNavigationMenu( '', [] ) }

the focus immediately moves to the document body.

So, I have tried setting the focus to the navigation block by doing

onCreateEmpty={ async () => {
	const createNav = createNavigationMenu( '', [] );
	await createNav.then( () => {
		const selector = `#block-${ clientId }`;
		const navigationElement = document.querySelector(
			selector
		);
		navigationElement.focus();
	} );
} }

But this seems to have no effect.

Do you have an idea about why (and where) the focus is moved to body?

[getdave]

Do you have an idea about why (and where) the focus is moved to body?

I'd suggest that the item that is currently focused is probably temporarily being removed from the DOM during a loading state. This might cause the focus to jump back to the document body in lieu of the previously focused element no longer being present.

Bear in mind this may happen very quickly on powerful devices with good internet connections so we'll need to think carefully about how/why it's occuring.

[kathrynwp]

@getdave Just circling back to see if this issue might be able to be moved along – thanks!

[getdave]

Thanks for the followup @kathrynwp 👍

The UX of the block has now been changed so that Create new is within the block inspector controls. Now when Create new is clicked the focus returns to the dropdown menu under which Create new is an option. AFAIK this is correct a11y wise and probably means this issue can be closed out. What say you @tellthemachines?

[jordesign]

@tellthemachines just a quick ping to see if this one is sufficiently resolved for us to close it?

[getdave]

Seems to be resolved.