Parent block selector button: missing focus style when 'Show button text labels' is enabled

[afercia]

Description

The Parent block selector button doesn't show a focus style when 'Show button text labels' is enabled.

Focus indication must always be clear. It appears it broke after #56335

Turns out all the buttons must use position: relative to allow the CSS pseudo generated element responsible for the focus style to appear and be positioned correctly. #56335 set position: static on this button, thus breaking the focus style.

Screenshot from WordPress 6.4:

Screenshot from Gutenberg trunk:

Note: the button label is now longer, it changed in #56146

When the 'Top toolbar' is enabled, the focus style is visible. Screenshot:

Other visual glitches

Left and right padding is inconsistent compared with other buttons. Screenshot:

When 'Top toolbar' is enabled, a 'dot divider' visually separates the parent selector button from the other buttons. The dot is unevenly positioned, with both icons or text displayed. Screenshots:

Step-by-step reproduction instructions

• Enable: Options > Preferences > Accessibility > 'Show button text labels'
• Add a Group block and add a few paragraphs within it.
• Select one of the paragraphs.
• Shift+Tab to move focus to the block toolbar.
• Observe the parent selector button doesn't show any focus style.
• Visual glitches: see screenshots.

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]

Also: the font size of the 'block switcher' button (the text 'Paragraph' in the screenshot below) is clearly bigger than the font size of the other buttons. It's 14 pixels vs. 12 pixels. This inconsistency doesn't help with aligning the buttons text. Seems simple enough to fix in this issue.

The font size inconsistency is visible also in the Site Editor:

Introduced in #28691 for the template part 'display title'. I'm not sure that is still in use and anyways it shouldn't be done this way.

[afercia]

Just noticed one more problem: wiht 'Top toolbar' and 'Show icon labels' enabled, the block toolbar buttons shift vertically by 1 pixel when moving focus between the buttons 'Move Up' and 'Moce Down'. See animated Gif below.

This is triggered ny some overflow CSS properties applied to the toolbar:

    overflow: auto;
    overflow-y: hidden;

There's two problems with this:

• The vertical shift should not happen.
• More importantly: with Firefox there is a silent tab stop between the document tools toolbar and the block toolbar. Firefox makes focusable all scrollable elements that have an actual content overflow. As such, the div element with overflow is focusable in Firefox. This is far from ideal for keyboard accessibility and needs to be fixed. Will create a separate issue.

Animated GIF to illustrate the vertical shift on current trunk: