Can't tab to the post title when in edit mode

[afercia]

Describe the bug

Not 100% sure but I think this originates from #19235 (review)

When the editor is in "Edit mode", it is not possible to tab to the post title.

This behavior is extremely confusing for all keyboard users as the post title is there, visible, available, but there's no way to tab to it.

It is even more confusing when creating a new post. To my understanding:

• the default mode is "Navigation mode"
• but, when creating a new post, the default mode is "Edit mode"
• I'm not sure this difference ie beneficial for users as it's really confusing, though I might understand some reasoning behind this decision
• regardless, not being able to tab to the post title should be fixed, especially because the behavior is different for new posts and existing posts: not sure users can understand why.

To reproduce

• create a new post
• initial focus is set to the post title: so far so good, this is the expected behavior
• press tab
• focus goes to the empty block below the post title
• notice the editor is now in "Edit mode"
• try to tab back to the post title: no way the post title is skipped
• focus goes to the inline "Add block" button
• tab back again: focus goes to the toolbar "More" menu button
• tab forward: the post title is skipped again
• whatever you do, there's no way for keyboard users to move to the post title

Now try this:

• once in the empty block, press Escape
• the editor is now in "Navigation mode" (also called "Select" mode)
• tab back: this time focus goes to the post title
• tab around backward and forward: the post title is always included in the tab sequence 👍
• edit an existing post
• the default mode is "Navigation mode"
• in this mode, there's no problem: the post title can be reached by tabbing
• as soon as you switch the editor to "Edit" mode, the post title is excluded from the tab sequence

I think this behavior is highly confusing and should hopefully fixed soon.

Animated GIF to illustrate the behavior on a new post:

Note: In the test above, I'm using a small plugin that adds a red outline to the focused elements for debugging purposes.

[afercia]

Pinging @ellatrix and @youknowriad as I saw you worked on this bit of code. Thanks!

[afercia]

I noticed the FocusCapture component, which is part of this implementation, renders an empty div element with a tabindex=0 attribute:

<div tabindex="0" style="position: fixed;"></div>

I'd like to understand a bit better what is meant for, not sure I can follow the code to get an idea.

[ellatrix]

There's two options: either the title should become an unmovable block or the title should go outside of the writing flow component. I think ideally the title just becomes a block, but I'm not sure how close we are to that.

[alexstine]

Assigning this to me so I can test this soon. Hopefully this is stale and no longer the case.