Splitting this out from #1516

See also:
Unexpected reverse-tab behaviour #1934
Image block keyboard focus and tab order #1829
Improve the block multi-selection and keyboard interaction #1308

Currently, the Tab/focus behavior across the blocks is inconsistent. Some blocks (e.g. text) have 2 focusable containers, while other blocks (e.g. image) have just one focusable container. This is particularly noticeable when tabbing backwards, see #1934 for more details.

On the first type of blocks (e.g. text), Gutenberg automatically moves focus from the outer container to the inner container (the one with contenteditable). On the second type of blocks, there's only one focusable container and users are forced to tab through all the toolbar controls.

This leads to an inconsistent experience for users and, I guess, to some complication codewise. Standardizing this behavior would improve usability and user experience. It would be great to also preserve quick navigation through blocks when tabbing.

What if all blocks had 2 focusable containers? This way, each container could have a different purpose, and expose different controls to users. However, at the same time there should be a mechanism to allow quickly tabbing through blocks with just one Tab press.

The outer container could be used for navigation through blocks, the inner container for editing the block.

On #1516 (comment), @jasmussen proposed a new flow to improve keyboard interaction and multiple selection that could be combined with two focusable containers:

• tab highlights a block (same as cursor hover)
• enter "clicks" it (block shows quick toolbar)
• escape unselects it (showing hover again)
• tab when "hovered" sets focus on a checkbox
• my edit: at step 2, when "clicked", the blocks controls and content become tabbable

With some adjustments, this approach could serve both purposes. Interaction details still to lay out but I'd propose to give this some serious thinking 🙂