Skip to content

Tertiary button is-pressed style insufficient contrast ratio on hover #68535

@afercia

Description

@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:

Image

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

Metadata

Metadata

Assignees

Labels

Needs DesignNeeds design efforts.[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Components/packages/components[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

Status

✅ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions