Writing flow: improved tabbing for Edit mode

[ellatrix]

Description

Spit out from #18779.
Blocks #18779.

This PR changes block navigation (tabbing) behaviour for Edit mode, which is needed for #18779. This turns out to be a drastic improvement from the current tabbing experience.

• When in Edit mode, pressing Tab will focus the next focusable element after the content, which is normally the inspector controls (sidebar which contain block controls), and pressing Shift+Tab will focus the focusable element before the content, which will be the block toolbar in Lighter block DOM: contextual toolbar in popover #18779.
• When in Edit mode, pressing the arrow keys will navigate across blocks as before.
• When in Navigation mode (press Esc), pressing Tab will still focus the next block, and pressing Shift+Tab will focus the previous block.

I believe the new tabbing behaviour creates a beautiful balance between edit mode (super easy access to block controls), navigation mode (easy access to other blocks), and traditional editor navigation (arrow keys to access other blocks).

It also reduces the need for the obscure region shortcut Ctrl+~ and toolbar shortcut Alt+F10.

From @MarcoZehe:

I tested the latest and greatest from this pull request on gutenberg.run [#18779], and must say I am totally sold on this new tabbing behavior. This makes everything much more consistent than it was, and also makes everything reachable in a linear fashion. Moreover, if stuck in the side bar, there already is a Skip Link back to the main edit area, so one can nicely get around.

I am all for taking this and deal with any fall-out in followups, also with improving the toolbar experience so it is ARIA authoring practices compliant. This is an enormous step forward from the current master.

How has this been tested?

Tab around in Edit and Navigation mode.

Screenshots

Types of changes

Enhancement

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[youknowriad]

it's a little bit weird that that tabbing stops at the first block and then when we start over, the post title is skipped.

I still wonder whether it's better to have the "constraint tabbing" behavior when in edit mode and a block UI is focused but I'll defer to other a11y testers. I believe @MarcoZehe already approved the behavior in this PR.

[ellatrix]

@youknowriad You're right this this might be possible to improve when you first tab into a block. I feel like you should be in Navigation mode when you first tab to a block. That also make sense as it is the mode you Escape to, and Edit mode is the mode you Enter

[ellatrix]

@youknowriad Thanks for the review! Let's try this, and I'll follow up with more polish to this behaviour.

[aduth]

It troubles me when I see interactions like these in the end-to-end tests, because the first question which comes to mind is: Is there not an easier way to express this as a keyboard interaction? Or, worse, is it even possible to achieve this behavior via keyboard alone?

I'm not sure if it matters much for this specific test, since it seems to be at least somewhat contrived example to verify which options are present, but in general I'm a bit concerned about navigation mode, or at least specifically options for "cancelling" the isTyping flag. Previously, it was problematic in how it relied on a mouse or clunky selection operations to control. Later, Escape was added as an option to unset the flag (#10906), but I guess now that's been overridden to control whether the block editor is in navigation mode. I worry this all has put us back in a position we were in prior to #10906 where certain interactions are only possible using the cursor.