Implement an accessible color picker for user-selected colors

[aitchiss]

We have quite a few color pickers in the app:

• Admin > Customization > User experience and brand
• Admin > Content manager > Tags > tag
• User settings > Profile
• Tag > Edit
• New creator onboarding flow (soon!)

(there may be others I've missed)

Unfortunately, inputs with type "color" are not very accessible. In Safari for example, you can't even keyboard focus them.

We get around this in most places by also providing a plain text field where a user can insert the desired hex code (in the tag edit page we don't have this functionality), but it's not an equal experience for users who rely on the keyboard alone, or other assistive technologies. One set of users have to somehow "just know" the hex code they want to use, whereas others have the richer experience of the picker guiding them to make their choice. The disparity in the UX is going to become more pronounced as Forems begin to be used by more people without the technical background to know about hex colors.

A quick search on npm shows quite a few options for accessible color pickers we could potentially use. Implementing one of these would also give us the freedom to remove the plain text fields for hex codes, if we choose to.

[github-actions]

Thanks for the issue, we will take it into consideration! Our team of engineers is busy working on many types of features, please give us time to get back to you.

Feature requests that require more discussion may be closed. Read more about our feature request process on forem.dev.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem/oss. The OSS Community Manager or the engineers on OSS rotation will follow up.

For full info on how to contribute, please check out our contributors guide.