Add support for color picker

[murtuzaalisurti]

Is your feature request related to a problem? Please describe.
No, this issue is not related to a problem. It's related to a completely new feature!

Describe the solution you'd like
A color picker will be a great update so that users don't have to type the hex code manually.

Additional context

[EmmaDawsonDev]

Yes, that would be a really nice feature. I also like the idea of adding support for not only hex but RGB (as shown in the screenshot - I'll add that as it's own issue)

[murtuzaalisurti]

I was experimenting with it and I found that the native input[type=color] element takes in rgb, hsl, hex input but the value is represented only in hex code. This is good because we don't have to convert it from one code to another!

Here's a preview:

However, color input has it's own issues and styling it can be a nightmare! This article blew my mind!
https://css-tricks.com/color-inputs-a-deep-dive-into-cross-browser-differences/

[EmmaDawsonDev]

Ooh that’s super interesting! I hadn’t even considered the native colour picker. I wonder how accessible it is too. This is definitely worth investigating 👍🏻

[murtuzaalisurti]

It has some accessibility issues and cross browser implementation issues, worth checking out the article which I shared above!

[EmmaDawsonDev]

Just read through the article and it’s really in depth. Question is whether it’s improved enough since the article was written or we attempt to make our own. I’m busy this weekend but can do some experimenting next week to see how it currently works with keyboard and screen reader.

[murtuzaalisurti]

I guess if we go for manual implementation, it would be really complex. I hope we can leverage the native feature if all goes well.

[murtuzaalisurti]

Can we use a web component? I don't know much about web components but this might be an option!
https://sap.github.io/ui5-webcomponents/playground/components/ColorPicker/

[EmmaDawsonDev]

I've tested the native color picker and it works ok with keyboard navigation but it's awful with a screen reader so unfortunately we can't really use it in the project.

I'm not sure about web components, they'd have to be compatible with react and there's no guarantee that it would be more accessible either, unless they have an accessibility statement somewhere talking about it then it's often not something people focus on when making components.

[murtuzaalisurti]

So are you willing to go with manual implementation? Wouldn't it be too complex?

[EmmaDawsonDev]

I am going to have a look to see if any other accessibility sites have a good implementation or how they approach it. Maybe there's an npm package or we could look how reactAria does it (if at all)

Otherwise we could make it into another project where we create an accessible component then turn it into an npm package so others can use it too.

I'm thinking it might be a long term thing to work on

[murtuzaalisurti]

That's an amazing idea to turn it into a standalone project. And yeah, it will take a long time!

[EmmaDawsonDev]

I had a look at how the WebAIM contrast checker is built and they use the native input type=color but they also provide a separate input type=text so that those that can't use the color picker can input the color by writing it in themselves.

Maybe this is something we could do too so that we have a color picker and then start a separate project to build our own version too. There we can experiment as much as we like because there's no time limit.

The webAIM html looks like this:

 <fieldset>
<legend>Foreground Color</legend>
			<p class="error" id="fError">Please enter a valid <a href="http://en.wikipedia.org/wiki/Web_colors#Hex_triplet">hex triplet</a>, or use the color picker.</p>
			<label for="fHex" class="hidden">Hex</label>
			<input id="fHex" type="text" maxlength="7" required="">
			<label for="fPick" class="hidden">color picker</label>
			<img style="min-width:16px;min-height:16px;box-sizing:unset;box-shadow:none;background:unset;padding:0 6px 0 0;cursor:pointer;" src="chrome-extension://ohcpnigalekghcmgcdcenkpelffpdolg/img/icon16.png" title="Select with ColorPick Eyedropper - See advanced option: &quot;Add ColorPick Eyedropper near input[type=color] fields on websites&quot;" class="colorpick-eyedropper-input-trigger"><input id="fPick" type="color" colorpick-eyedropper-active="true">
			<div>
				<label for="fLightness">Lightness</label>
				<input id="fLightness" type="range" min="0" max="100" step="1">
				<div class="gradient" style="background: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 255), rgb(255, 255, 255));"></div>
			</div>
		</fieldset> 

[murtuzaalisurti]

Yeah that can be definitely done!