Description

The sliders of the color picker (e.g. Saturation - Brightness / Hue / Alpha) use a very subtle focus style that is barely noticeable. When tabbing through the color picker with the Tab key, is almost impossible to understand which slider is the focused one.

It appears the focus style is the default one provided by the React Colorful package. It just scales the 'knob' of the slider by 1.1 so it gets slightly bigger. See the package demo at https://omgovich.github.io/react-colorful/

In Gutenberg the 'knobs' are a bit smaller and the scaling effect on focus is barely noticeable. Regardless, the scaling effect is not enough. Indication of focus should be way clearer and I'd recommend an additional shape that works on any background color.

Also, the focus style should work on Windows High Contrast mode as well, even though I doubt the color picker is usable at all with Windows High Contrast.

Example of the slider knobs. Hint: the first one is focused:

Animated GIF to illustrate the insufficient focus style. In this GIF, I'm tabbing forwards and backwards through the three visible slider knobs. The focus style is almost unnoticeable and it's very difficult to understand where focus is:

Step-by-step reproduction instructions

• Go to the Site editor.
• Edit the color palette.
• Click on a color button: the color picker opens.
• Initial focus is set to the first slider knob.
• At this point, basically there's no focus indication: the knob with initial focus doesn't show any noticeable difference with the non-focused ones. It's just slightly bigger.
• Press the Tab key to move to the second and third slider knobs.
• Observe focus indication is very subtle.

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