Refactor the ARIA structure of the flyout

[gonfunko]

The flyout's ARIA structure should be updated as follows:

• The flyout's role should become menu
• Labels should have their role set to heading
• Each set of items between a label should be wrapped in an element with role group
• All other flyout items should have their role set to menuitem

[BenHenning]

One open question I had is whether the readout will work correctly if there are no headings present, but looking into https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/menu_role I'm actually questioning the opposite: it doesn't seem standard to include headings within menus. It might be worth trying to find a standard HTML example of this that we can look at with a screen reader in order to see how it behaves in order to replicate it.

[microbit-robert]

Chakra UI is good for accessible components and they have a menu example with groups and headings, but I must admit I've not tried to find other examples yet. It is also currently unclear to me whether groups of menuitems must have headings or not.

FYI, I very briefly tried switching the flyout to a menu from a tree and this seemed to break VoiceOver when navigating to the toolbox. I didn't get the bottom of what was happening, but presume the accessibility tree was broken by this change in some way.