Description

Splitting this out from #57400 (comment)

Setting initial focus on a specific place in any UI should only be done when there's a very, unique, specific flow users haev to follos so that establishing a 'starting point' makes sense based on that flow.

In all other cases, where there's no unique, specific, flow users can take the best option is to not set initial focus and just let the Tab order start from the document root. This also helps discoverability and consistency as users start navigating the UI from the beginning and they're not forced to 'skip' important parts that live before any place where initial focus may be set.

Currently, in the Site Editor when switching from 'view' to 'edit' mode, initial focus appears to go to the editor canvas. Actually, focus is already on the editor canvas iframe. It just stays there but other parts of the UI are now rendered before the iframe.

That happens because in 'preview' mode, the preview only shows the iframe, which has an ARIArole="button" and a label Edit. When the iframe is focused and after pressing the Enter key, the editor switches to 'edit mode. Focus just stays on the iframe but now the entire top bar is rendered before it. From a keyboard accessibility perspective this is equivalent to setting initial focus to a place that doesn't make much sense and that skips important parts of the UI. This current behavior assumes users have to start their flow in the editor canvas, which isn't necessarily true.

Rather after the editor switches to edit mode, focus should normally start from the document root.

The current behavior is also inconsistent with the initial focus in the Post editor, where the Tab sequence normally starts from the document root. Sooner or later the two editors will be unified so that having a consistent, expected, focus behavior should be implemented anyways.

Video to illustrate. Observe that after the editor switches to edit mode:

• Focus is not visible. Actually, it's still on the iframe.
• The editor top bar is now rendered before the iframe.
• After pressing the Tab key, focus goes to the first focusable block inside the editor canvas iframe.

Ideally, focus should be naturally reset bt I'm not sure that can be done in any way other than using an explicit blur() so that it starts from teh document root and the first Tab key press will focus the 'Open navigation' button at the top left.

Step-by-step reproduction instructions

• Go to the Site editor.
• Use the Tab key to navigate the UI.
• Once focus lands on the preview iframe, you will see a blue outline around the preview.
• Press the Enter key.
• Observe that focus is not visible.
• Press the Tab key.
• Observe focus is now on the first block inside the editor canvas iframe.

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure