Description

Responding to this feedback, a vertical heading level dropdown solves a couple of problems:

• It does not require a min-width to contain the items
• It opens downwards, and shows up to match
• It shows the hierarchy

GIF:

The missing piece here is to make the arrow keys function to move up/downwards. I could use some help there: from reading the documentation, supplying an orientation prop should do the work, and it does apply the correct aria-orientation to the container.

My best guess it that the ToolbarGroup component was never thought of as able to be vertical, and is locked to horizontal somewhere. So a fix might need to either allow that, or move to a Dropdown component instead.

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 (please manually search all *.native.js files for terms that need renaming or removal).