Skip to content

Conversation

himanshupathak95
Copy link
Contributor

@himanshupathak95 himanshupathak95 commented May 16, 2025

What?

Closes #50874

Enhances the color picker's slider knob focus styles to make them more visible and accessible for keyboard navigation.

Why?

The previous focus style was insufficient - it only scaled the knob slightly, making it hard to see which slider was focused when navigating with the keyboard. This improvement addresses accessibility concerns by making the focus state much more visible.

How?

  • Added a white border and black outline to the slider knobs when focused
  • Increased the scale transformation to 1.5x
  • Added a smooth transition for the transform effect (with prefers-reduced-motion support)
  • Maintained the existing scaling behavior but enhanced it with proper borders

Testing Instructions

  1. Go to the Site editor
  2. Edit the color palette
  3. Click on a color button to open the color picker
  4. Use the Tab key to navigate between the sliders
  5. Observe that the focused slider knob now has a clear white border with black outline and is enlarged compared to the earlier behavior

Screencast

Before

Screen.Recording.2025-05-16.at.14.38.34.mov

After

Screen.Recording.2025-05-16.at.14.39.43.mov

@himanshupathak95 himanshupathak95 marked this pull request as ready for review May 16, 2025 09:10
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components labels May 17, 2025
@joedolson joedolson merged commit a366d7c into WordPress:trunk Jul 29, 2025
61 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.4 milestone Jul 29, 2025
adamsilverstein pushed a commit to adamsilverstein/gutenberg that referenced this pull request Jul 31, 2025
* Color Picker: Improve color picker slider focus styles

* Add respective changelog entry
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Color picker: insufficient sliders focus style
3 participants