Color Picker: Improve color picker slider focus styles

[himanshupathak95]

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

[github-actions]

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 <[email protected]>
Co-authored-by: afercia <[email protected]>

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