Inspector tabs: text no longer visible when 'Show button text labels' preference is enabled

[afercia]

Description

This appears to be a regression from WordPress 6.5 and should be fixed soon.

Depending on the selected block, the Inspector panel may show content organized within tabs. By default these tabs use icon buttons. Example screenshot:

When the 'Show button text labels' preference is enabled, the icons are supposed to be replacred by visible text. Example screenshot from WordPress 6.5. for a Navigation block:

On latest trunk, the text is not visible any longer. Screenshot for a Navigation block:

Screenshot for an Image block:

It appears that some recent changes to a CSS transition introduced this bug, as the ::before pseudo element that is supposed to generate the visible text has now an opacity: 0.

Worth noting the technique to reveal the text for the 'Show button text labels' preference is fragile to start with, as it uses pseudo elements that may be already used for other purposes. In this case, I think it's used also for the tabs focus style.

Regardless the change to the animation should be either fixed or reverted, as WP 6.6 Beta is very close.

Step-by-step reproduction instructions

• Go to Options > Preferences > Accessibility, and enable the 'Show button text labels' preference.
• Select any block that is supposed to render tabs in its Inspector panel e.g. an Image block or a Navigation block.
• Observe the tabs text is no longer visible.

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]

@jasmussen any clue what changed here? Thanks 🙏🏽

[jasmussen]

No clue. @WordPress/gutenberg-core

[t-hamano]

I've identified the problem and will submit a PR soon.