Tabs: focus style overlaps text when 'Show button text labels' preference is enabled #62018
Labels
CSS Styling
Related to editor and front end styles, CSS-specific issues.
[Feature] Show button text labels
A preference in the Post and Site Editor that makes buttons show text instead of icons
[Focus] Accessibility (a11y)
Changes that impact accessibility and need corresponding review (e.g. markup changes).
Needs Design Feedback
Needs general design feedback.
[Package] Components
/packages/components
[Status] In Progress
Tracking issues with work in progress
[Type] Bug
An existing feature does not function as intended
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 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:
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:
Step-by-step reproduction instructions
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
The text was updated successfully, but these errors were encountered: