Unable to shift+tab from post title

[stokesman]

Description

When editing a post in "post-only" mode and the post title is focused then shift+tab doesn’t allow navigating out of the canvas. This happens in Gutenberg trunk and 6.8 beta1 whereas in 6.7 it doesn’t. In 6.7 it takes two-steps to get out of the canvas and that may not be ideal but at least it’s possible.

The expectation is that the "Options" button is focused when pressing shift+tab from the post title.

Step-by-step reproduction instructions

1. Open a post in "post-only" view
2. Move focus into the post title
3. Press shift+tab repeatedly
4. Confirm that it’s not possible to navigate out of the canvas

Screenshots, screen recording, code snippet

post-title-no-shift-tab-out-of-canvas.mp4

Environment info

• WP 6.7.2 with Gutenberg plugin from trunk or WP 6.8 beta1
• Chrome
• macOS

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

[t-hamano]

I was able to reproduce the issue on a Windows OS. When I launch the NVDA screen reader and run Shift + Tab repeatedly in the post title, the screen reader repeatedly reads the following:

section

Edit Post “Hello world!” ‹ gutenberg — WordPress  document   
main landmark
Editor content  region
Editor canvas  frame
document
section
Add title  edit  multi line  Hello world!

Ideally, the focus should move from the post title to the Options button?

[stokesman]

Ideally, the focus should move from the post title to the Options button?

I think so. That’s where focus lands in 6.7 and it matches the the visual order.

[afercia]

Thanks for reporting this issue. It's a keyboard trap that makes the post editor unusable for all keyboard users, not only for screen reader users.

It's not clear to me if ths issue occurs also in the editor version for WordPress 6.8. In that case, it's a blocker and should be fixed for the release.

[t-hamano]

I identified this issue as occurring in #69079. That is, this early return:

gutenberg/packages/block-editor/src/components/writing-flow/use-tab-nav.js

Lines 128 to 130 in 66394c4

	if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) {
	return;
	}

This is because the post title has no clientId.

[t-hamano]

We can solve this by checking if the current element is a post title, but I don't think hardcoding the CSS class names is ideal:

diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
index 7f06cfe651..304dffedb5 100644
--- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js
+++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js
@@ -125,7 +125,15 @@ export default function useTabNav() {
                                return;
                        }
 
-                       if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) {
+                       const isPostTitle = event.target.classList.contains(
+                               'editor-post-title__input'
+                       );
+
+                       if (
+                               ! hasMultiSelection() &&
+                               ! getSelectedBlockClientId() &&
+                               ! isPostTitle
+                       ) {
                                return;
                        }