Block editor: fix misplaced rich text inline toolbar

[ellatrix]

Description

Fixes #26114.
Alternative to #28420.

Currently the inline toolbar popover is misplaced and positioned before the block toolbar, which means that you have to tab through the block toolbar to access it. The inline toolbar popover should be positioned after the block toolbar popover so it receives focus before the block toolbar when reverse tabbing from the block.

Both popovers are filled into the same slot and unfortunately it's not possible to set the order from a fill. I added another slot to enforce the order. Ideally, we should have a better API to define the toolbar area for a block editor.

In the GIF below I use Shift+Tab to navigate to the block toolbar and through the buttons to "Bold".

How has this been tested?

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• 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.

[talldan]

Testing this, I'm seeing the block wrapper focused first when shift tabbing from an image caption.

[ellatrix]

Right, that seems like a bug in our writing flow. I'll look into it.

[diegohaz]

I think we use a FocusCapture component to focus on the block toolbar when pressing Shift+Tab from the block wrapper. We would have to do something similar for the inline toolbar too.

[ellatrix]

Will be fixed as part of #31134 so closing this.