Tertiary button is-pressed style insufficient contrast ratio on hover

[afercia]

Description

Discovered while working on #68531

The tertiary button style variant can have (like all other variants) a pressed state. With this styling, the button background becomes a dark grrey. However, when hovering the button, the button text becomes blue. It is barely visible:

This appears to happen only with the tertiary variant. For the other variants, the text stays whie on hover.

Step-by-step reproduction instructions

• Go to https://wordpress.github.io/gutenberg/?path=/story/components-button--tertiary&args=aria-pressed:true
• Make sure the aria-pressed prop is true.
• Hover the button.
• Observe the text becomes blue on a dark gray background.
• Alternatively, go to the Post editor.
• Enable the preference Show button text labels from the top bar Options > Preferences > Accessibility.
• Make sure the Settings panel is open by clicking 'Settings' in the top bar.
• Hover the Settings button and observe the text becomes blue on a dark gray background.

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[patil-vipul]

@afercia I've verified the issue for the tertiary variant for the hover state as shown below.

However, the pressed or clicked state changes the button style to outline.

I've tested this on the latest version of WordPress (6.7.1). I'll raise the PR for the same.

[yogeshbhutkar]

I believe the following line is overriding the color property set by is-pressed rule:

gutenberg/packages/components/src/button/style.scss

Line 172 in ef7afef

color: $components-color-accent-darker-20;

This shouldn't be applied when is-pressed is set as it already applies the color and background properties.

gutenberg/packages/components/src/button/style.scss

Lines 351 to 358 in ef7afef

	&.is-pressed {
	&,
	&:hover {
	color: $components-color-foreground-inverted;
	&:not(:disabled, [aria-disabled="true"]) {
	background: $components-color-foreground;
	}
	}

[yogeshbhutkar]

Thank you, @patil-vipul, for testing the issue and apologies for submitting this PR after you had already committed to raising it. While reviewing the bug, I noticed a simple one-line fix and decided to create this quick PR.

That said, I’m open to exploring better solutions and would love to collaborate further to address this issue effectively.