Color picker support for color related form fields

[noopkat]

There are a few card settings and dashboard settings that ask for a specific color. Typing it in is okay, but having the option of a color picker in addition would be awesome!

A svelte (small, smol) color picker library would be preferred if possible. Huge bonus points if you can use it with a keyboard and not just a mouse. Placing the color picker activator button to the right of the color text input in each case would be great.

[mtheoryx]

I found this one that is okay-ish regarding a11y (I don't think it handles enter/esc to get out of it).

But aside from the input, triggering the picker, entering hex, and exiting, what other sorts of a11y interactions were you imagining in this case? This could help me in narrowing down my search and creating criteria.

Thanks!

https://codepen.io/Brownsugar/pen/NaGPKy?editors=1010

[mtheoryx]

Notes from the June 24 live show, some enhancements (can possibly be a different PR):

Make the sliders focusable (left-right buttons, make it an "official slider") Make the rgb/hex toggle focusable Make the rgba inputs focusable

[noopkat]

Thanks @mtheoryx this is great and the things we need ti keep in mind, although these will need to be changed made upstream to the vue component's github repo.

Also as @svinkle also remarked: be sure to associate the input's label element correctly with the color picker input. On Electric-io we already do this, mostly via nesting the input within the label element itself.

I'd suggest moving forward with this color picker specifically, and I would love to see the improvements made by one of us to the upstream repo.

[mtheoryx]

Just for reference: Upstream does have a still-open issue:

https://github.com/xiaokaike/vue-color/issues/127

[mtheoryx]

There has been an update to that above issue indicating, perhaps, they resolved this issue.

[kleinfreund]

I’m working on this. 👋

[kleinfreund]

I’m no longer working on this. 🌊