Global styles panel header is a menubar ARIA role with missing required menu items

[afercia]

Description

Tje top part of the Global Styles panel is an element with role="menubar" and aria-label="Styles actions" that wraps soem buttons (with the exception of the 'Close' button). Screenshot:

A menubar can only contain elements with role group, menuitem and the menuitems variants. It can not contain anything else. Reference:

https://www.w3.org/TR/wai-aria-1.2/#menubar
Required Owned Elements:

• group → menuitem
• group → menuitemradio
• group → menuitemcheckbox
• menuitem
• menuitemcheckbox
• menuitemradio

Instead:

• The buttons within the menubar are normal buttons with no role.
• The text 'Styles' is stray text with no semantis other than emphasis because of the <strong> element that wraps it.

Step-by-step reproduction instructions

• Go to Site Editor > Styles.
• Inspect the elements in the top bar of the Styles panel.
• Observe the element that contains the 'Styles' text and the following buttons has a role="menubar".
• Observe the buttons 'Style Book', 'Revisions', 'More', have no role.

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

[afercia]

Looks like the menubar role was added in #51318 but the button weren't changed to menuitems neither arrow navigation was implemented.

After looking a bit into this, I think the best option is:

• Remove the menubar role. It doesn't make much sense to use a menu semantics. These buttons are 'toggle buttons': they toggle other parts of the UI rather than executing commands.
• Make the 'Styles' text a H2 heading.
• Improve the semantics of all side panels (under the hood they are powered by the ComplementaryArea component) by making sure the default visible title is a H2 heading.