Toolbar More menu: focus loss and different behavior between WP 5.2 and master versions

[afercia]

Related: #15313 (WPCampus report issue)

Looks like the toolbar "More" menu behavior is different between the Gutenberg version in WordPress 5.2 and latest master 33208ba

WordPress 5.2 Gutenberg 5.6.1

• open the More menu
• click, either with mouse or keyboard, on one of the buttons e.g. Code Editor
• the menu closes
• focus is moved back to the menu toggle button
• this is true for all the buttons in the menu except "Copy All Content": the menu stays open

Current master 33208ba

• repeat the steps above
• the menu stays open, except for the buttons that open a modal and "Copy All Content"
• when one of the buttons is clicked, there's a focus loss

To make the focus loss apparent, I used a red outline for the focus style and made a GIF:

Notice that when clicking a button, the red outline disappears.

Pressing the Tab key after the focus loss sets the focus on the adjacent button but that's just because modern browsers try to be smart. They implement a sort of sequential focus navigation starting point mechanism to make tabbing start again from the area where focus was previously. However, that's not guaranteed to work with assistive technologies and doesn't work in Internet Explorer 11.

Additionally, when creating a new post and the post is empty, clicking on "Code Editor" or "Visual Editor" moves focus to the post title. This is inconsistent with the behavior on the other menu items and it's an unexpected interaction.

To recap, there are two issues:

1. The menu stays open: not sure if this change is intentional but there should be a consistent, predictable, pattern in the whole menu. See also Menu remains open after actions which moves focus #15313.
2. The focus loss needs to be avoided: also, a focus loss is a sign that the menu fully rerenders
3. Clicking on "Code Editor" or "Visual Editor" should not move focus to the post title

[afercia]

Note: "Manage All Reusable Blocks" is a link and shouldn't be placed in this menu, see #13390

[afercia]

Also, there should be a consistent behavior with the block more menu. Related:
#15313 from the WPCampus / Tenon accessibility audit
#15458 and related PR #15543
.

[gziolo]

#14851 will resolve most of the issues with focus loss in the More Menu. We still need to sort out the case for empty post separately. It probably makes sense to close this issue once this PR is merged and create a more targeted issue.

[gziolo]

Opened #16874 to tackle unexpected focus change when switching between the editor modes.