[css-color] Keyboard operability for the previews

[matatk]

This comment is from the APA WG and relates to our review of CSS Color Module Level 5.

The color previews can be hovered over with the mouse. When this happens, they enlarge, covering some of the text behind. This is particularly useful if the preview is of a transparent color, as the text behind shows through the preview window. It is not possible to activate the preview with the keyboard, so keyboard-only users would likely miss out on this helpful feature.

[svgeesus]

@LeaVerou any thoughts on adding keyboard triggering of the hover behaviour?

[LeaVerou]

We just need to make it focusable (e.g. by adding tabindex), and then use :is(:hover, :focus) instead of :hover.

We could even write script to make them focusable en masse:

for (let swatch of document.querySelectorAll(".swatch") swatch.setAttribute("tabindex", "0");

[svgeesus]

That sounds good, want to do it?