Color picker usablity

[svinkle]

I was just thinking about the usability and keyboard accessibility of #7. In order to avoid folks having to Tab through each individual item, which would be a pain, what if it was implemented as:

1. Add tabindex="0" to the container in order to add it to the focus order.
2. Add an aria-label to the container explaining what this thing is and how to use it.
3. Add tabindex="-1" to each item in order to be removed from focus order.
4. Implement arrow navigation via JS in order for a selection to be chosen.

Enter and Space support has already been implemented so you're good there.

Off the top of my head I'm not sure how you'd support up and down arrows, but left and right might be a matter of incrementing or decrementing some index value and setting focus to that item. Perhaps to collect each item it would need a data-item-[index] type attribute? Maybe up and down could just add or subtract some set value to the current index, like 10? Just guessing here.

Keycodes:

• 👈 = 37
• 👆 = 38
• 👉 = 39
• 👇 = 40

Anyway, something to consider. Wanted to share this before I forgot. 🙂

[orthros]

Hey thanks for bringing this up! Not sure how I missed the notification for it, but I'm glad I caught it!

I'll take a look at implementing your suggestions; I'm not a primary web ux dev, but I've been learning more about modern web dev of late so this'll be a fun challenge to tackle!

Thanks again 😸

[svinkle]

@orthros Very cool! Let me know when you've got something and I'll give it a run through. 😀