Empty inner block area isn't keyboard accessible when contain text cursor inside block preference is enabled

[tellthemachines]

Description

If the "Contain text cursor inside block" preference is enabled in the post editor, it is impossible to add a block to an empty inner block area using only the keyboard, for example, inside a newly-added Group or Submenu block.

When the text cursor is contained inside the block, it's not possible to use arrow key navigation between blocks in Edit mode, and in Navigation mode the block inserter isn't selectable.

I'm not sure what the best solution would be. Could add the inline inserter to the tabbing order perhaps?

Step-by-step reproduction instructions

1. In Options > Preferences > Blocks, enable "Contain text cursor inside block".
2. Add a Group block and try to open the inserter inside it with the keyboard only.
3. In a Navigation block, add a Submenu and try to navigate to the inserter inside the submenu area with the keyboard only.

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

[alexstine]

I think for this, we need to look at refactoring the code to take in to account Blocks without content editable. Tab key should not focus Sidebar until end of Block content. Can test this with focusable/tabbable I suppose.

@tellthemachines Any idea what file handles this?

[tellthemachines]

@alexstine this seems to be where it's implemented.

[alexstine]

@tellthemachines Which Block uses role="region"? It seems like there is some type of exclusion maybe... Interested to know why a specific role was searched for. That code is kind of crazy at first glance, looks like might be some work involved to figure out where in the Block content you are at any given time. Looks like this was designed specifically for older Blocks and hasn't taken new Blocks in mind.

[tellthemachines]

No block uses the region role, but the editor areas such as sidebar and content do.

[alexstine]

Ah okay. That makes sense, probably trying to make sure nothing happens when contained within a region role I guess. Sometimes I wonder how accessible Gutenberg would be without all this tab/focus changing. Would be a crazy experiment.

Will you have time to work on this or should I give it a go after I finish my big PR?

[tellthemachines]

I can work on this @alexstine , will let you know once I have something ready to test.

[tellthemachines]

I started looking into this, but realised am not super clear on what the expected interaction should be for container blocks that have multiple inner blocks.

We want to be able to tab to any block inserter that's inside the container, but if the container also has inner blocks, should we skip those, and just tab straight to the inserter?

The problem with making it possible to tab through inner blocks is that there might be lots of them, and some of them might themselves contain inner blocks (e.g if we have a Navigation inside a Group, which is common in site templates), so it's easy to end up lost in a tree of child blocks when all we want to do is get to the inserter and add a new block to the top-level container.

[alexstine]

@tellthemachines I was thinking that the Navigation Mode could still be used for switching from Block to Block and eventually the Navigation Mode could be replaced with the List View. My main focus for this is to make sure you can Tab through Blocks to even get to a point where inner Blocks can exist. E.g. if I insert a Navigation Block but can't select a menu with Tab, there will be no inner Blocks/child Blocks to speak of.

Hope this makes sense. I certainly want to think about the interaction model a little more, but maybe we should create a different Issue for the actual inner Blocks navigation if this gets too busy here.