Change Alt+F10 to always select the block toolbar

[draganescu]

What problem does this address?

Currently Alt+F10 is a keyboard shortcut described as "Navigate to the nearest toolbar". This sort of behavior creates big problems when we want to alter the UI, because the notion of "nearest toolbar" is variable by definition and that causes unexpected focus management.

The most recent situation where we met this problem was in implementing the new Top Toolbar improvements:

• the original implementation which used Slot/Fill to move the fixed toolbar in the Interface header broke the Alt+F10 shortcut, as now with the "Top Toolbar" setting the "nearest toolbar" in the DOM is not the block toolbar anymore
• the alternate implementation which eventually got merged tried to preserve Alt+F10 's behavior by keeping the Top Toolbar in the same DOM spot and positioning it with lots of CSS

The problem is we need to revert to the original implementation because absolutely positioned chrome elements are ruining the expectations of plugins that hook into the editor UI. Elements of the editor chrome should just flow horizontally and vertically. Absolutely positioned elements with z-index higher than the Interface:

• ruin some plugins today
• block us tomorrow to add new plugin available slots, because they may fall "under" the absolutely positioned UI

The fragility of Alt+F10 being a shortcut for "nearest toolbar" is also visible in the recently fixed:

• Fix multiple tooltips showing on NavigableToolbars
• Fix Multiple Tooltips from Focus Toolbar Shortcut on Widget Editor
• Fix Multiple Tooltips from Focus Toolbar Shortcut on Site Editor

... where we've seen how it can be very easy to act on multiple DOM elements by trying to be overly clever.

What is your proposed solution?

I propose that we make Alt+F10 always focus the block toolbar, wherever in the DOM the block toolbar is. For navigating the interface we still have the regions and the shortcuts to move through each of the regions.

[jeryj]

I propose that we make Alt+F10 always focus the block toolbar, wherever in the DOM the block toolbar is. For navigating the interface we still have the regions and the shortcuts to move through each of the regions.

I'm fine with this. I had a similar thought with #49778. It ended up being tricky (for me) to implement. I'd be happy to pair with you on this!

[alexstine]

Hmm, I do not think you will be able to do this due to some complications right now. For example:

1. Insert an image block and select or upload an image.
2. Select the Caption button and focus will be placed in the field.
3. Pressing alt+f10 will focus the nearest toolbar which is the caption formatting sub-toolbar, not the main block toolbar.

Until these undesired messes are cleaned up in the block editor, things like this are simply going to have to wait due to mistakes made at the beginning.

Thanks.

[alexstine]

I think @tellthemachines actually explained to me about how these toolbars work so sending a mention. @ellatrix was also involved in making this happen with writing flow.

[draganescu]

Until these undesired messes are cleaned up in the block editor,

How would we clear them? Do we have any solution?

[alexstine]

Not at this point, no. The multi-toolbars work great for the sighted, but not so much for keyboard users. We should have thought about this at implementation but not much we can do about history now. It will need to be refactored somehow and will block this issue until done.

[draganescu]

@alexstine doesn't it help that the smaller formattig toolbars are focusable with Shift+Tab?

[alexstine]

@draganescu No, not really. Alt+f10 is kind of the global shortcut everywhere for finding toolbars. I think it would be highly confusing to have shift+tab find one toolbar and alt+f10 find another. In reality, there should only be 1 toolbar, that would make things much easier and this would not be a problem. Finding a way to communicate this context to users about multiple toolbars is not easily possible especially after a change like this.

[alexstine]

What I am getting at, shift+tab will likely not find toolbars in the future, it will be reserved for navigating content in block placeholders, fields, etc. so I would like alt+f10 to do only toolbar-related focus.

[ellatrix]

Can Alt+F10 cycle through the available toolbars? Maybe add Shift for reverse.

[alexstine]

No, I think not. This would go against how other popular web platforms implement this feature. What might make sense is alt+f10 always jumps to closest toolbar and then a second press of alt+f10 could jump to the other toolbar. On initial press, it should always jump to closest. That make sense?