Description

The various panels in the editor may use content organized in two or three horizontal tabs.
Typically this is for some blocks inspector panel e.g. the Image and Navigation block but this design pattern is used also in the Glogabl styles panel and elsewhere.

The well known problem with horizontal tabs is that the layout may break when the horizontal space is limited. The editor panels do have limted space, as they are rendered in a narrow column.

As such, when the 'Show button text labels' preference is enabled and the editor is set to languages other than English, some translations provide longer strings that go in two or even three lines.

The focus style for the Tabs uses a CSS pseudo element that is positioned absolutely and draws the focus blue outline.
Additionally:

• The tabs have a fixed height.
• The vertical padding is insufficient.

The current CSS doesn't take into account longer strings and it appears it hasn't ever been tested with languages other than English.

Having an outline that draws a line on top of text isn't ideal as it partially obscures the text.

Fixed height on the web are often problematic. The desire of making a 'pixel perfect' design often clashes with the reality where content on the web is supposed to re-flow and adapt when strings are longer and / or the viewport changes.

Overall, the styling of the tabs should be adjusted to take into account longer strings by:

• Avoiding to use a fixed height.
• Provide sufficient vertical padding to reserve space for the focus style outline.

This problem can be reproduced when testing with languages that typically provide longer strings or do take more vertical space. Here's a couple screenshots witht the editor language set to Italian and Japanese:

It would be worth to start a broader discussion about ways to make sure the Editor layout doesn't break with languages other than English. At the very lesst:

• Testing with other languages should be part of any development that touches the UI and the base components.
• Any design should take inco account languages other than English to start with.

Step-by-step reproduction instructions

• Switch WordPress language to Italian or Japanese.
• Go to the post editor and add a navigation block.
• Go to Options > Preferences > Accessibility, and enable the 'Show button text labels' preference.
• With the navigation block selected, observe the block inspector panel.
• Use the Tab key to focus the first tab.
• Use the right and left arrow keys to move through the tabs.
• Observe the focus style appears on top of the text.

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