Block toolbar: Invisible tab stop due to scrollable container

[afercia]

Description

Spltting this out from #57710 (comment)

Firefox makes scrollable elements focusable. More accurately, there must be two conditions to trigger this Firefox behavior:

• The element must have a fixed height and a CSS overflow property that makes it scrollable e.g. auto or scroll.
• With the auto value, the element content must trigger an actual content overflow ie. hte content height exceeds the container height.

This behavior can be reproduced in the block toolbar, when the 'Top toolbar' is enabled.
Tabbing through the UI with the Tab key, there is an additional 'silent' tab stop compare to other browsers.

Silent tab stops are very confusing for keyboard and assistive technology users. It's a less than ideal experiences that needs to be fixed.

However, the block toolbar is not the only place where this behavior may happen. I think it's worth to revisit all the instanced in the editor where:

• The CSS overflow property is auto or scroll.
• Same for overflow-x or overflow-y.

This CSS techniques may seem useful at first but they actually introeuce a barriere for users. Specifically about the block toolbar, these lines:

gutenberg/packages/block-editor/src/components/block-toolbar/style.scss

Lines 11 to 13 in cd548af

	// Allow horizontal scrolling on mobile.
	overflow-y: hidden;
	overflow-x: auto;

were added to make the toolbar horizontally scrollable on mobile.
I'm not sure that's a great solution as it doesn't really solve the root problem and it does more harms than good.

Additionally, the height of the content of the toolbar may axceed the toolbar height. In this case, as reported at #57710 tabbing through the block mover buttons triggers a vertical shift of all the other content within the toolbar. Animated GIF to illustrate:

Step-by-step reproduction instructions

• Edit a post.
• Enable the 'Top toolbar'.
• Test with Chrome first.
• Select a paragraph so that the block toolbar is rendered within the top bar.
• Using the Tab key, start tabbing from the WP logo.
• Notice tha tab sequence is:
  1. WP logo
  2. Inserter toggle button.
  3. Block switcher button.

Screenshot to illustrate the tab sequence with Chrome:

• Now test with Firefox.
• Repeat the steps above.
• Notice tha tab sequence is:
  1. WP logo
  2. Inserter toggle button.
  3. Silent tab stop (no element appears to have focus).
  4. Block switcher button.

Screenshot to illustrate the tab sequence with Firefox:

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