fix(css): improve color-mixer tool

[OnkarRuikar]

• addresses fix(css): update color-mix() page content#34371 (comment)

The PR

• makes color pickers keyboard navigable
• fixed width for labels so UI layout won't change

[pepelsbey]

This looks great! Thank you for improving the accessibility of this tool :)

I’d also suggest removing the role and tabindex attributes from buttons since they already have this role and are focusable by default. There’s one selector in the script that relies on the tabindex attribute, but it likely from the picker. I haven’t noticed any difference in the behavior.

Also, I noticed an error in DevTools because the source map file mentioned in the JS file is missing:

//# sourceMappingURL=pickr.es5.min.js.map

How about we remove this line to calm it down a bit? :)

[OnkarRuikar]

There’s one selector in the script that relies on the tabindex attribute, but it likely from the picker.

Yes, it's from picker. And the current changes don't affect it.

[pepelsbey]

Perfect! Thank you :)