Color picker accessibility

[lessbloat]

In ticket:21206:79 the extra controls at the edge of the square were removed. Unfortunately, now there is no way for keyboard users to move the main color selector puck.

Also see: 21283.11.diff for keyboard triggering of the default button and color palette.

Hopefully someone else jumps on this first if they are inclined and able. Assigning to mattwiebe with the hope is able to take responsibility for this otherwise.

Added keyboard events for main color selector puck in: 22475.diff​

mattwiebe, mind helping me package this up? I tried to minify it, but I think I failed...

Can you patch ​https://github.com/Automattic/Iris directly? Would be much easier than tinkering with minification :-)

Replying to nacin:

Can you patch ​https://github.com/Automattic/Iris directly? Would be much easier than tinkering with minification :-)

He was having issues with my non-documentation over there. :( We hashed it out. :)

iris-keys.diff refreshes lessbloat's patch, minifies it, and does a bit of styling of the puck when focused. ​Changelog:

* use up, down, right, left on puck when focused
* multiply by 10 when using alt key
* default :focus styles for the puck
* keep :focus on the puck after clicking
* remove vendor prefixes in CSS

iris-keys.diff​ seems to work well for me as far as the puck goes. Can we look at the palette, too? :)

Replying to helenyhou:

iris-keys.diff​ seems to work well for me as far as the puck goes. Can we look at the palette, too? :)

I believe @kovshenin worked on that in http://core.trac.wordpress.org/attachment/ticket/21283/21283.11.diff

Replying to lessbloat:

I believe @kovshenin worked on that in http://core.trac.wordpress.org/attachment/ticket/21283/21283.11.diff

Looks mostly there. Trouble is that .iris-palette items are currently <li>s, so you won't get keyboard focus.

I'll bring it into Iris.

Replying to mattwiebe:

Looks mostly there. Trouble is that .iris-palette items are currently <li>s, so you won't get keyboard focus.

prop('tabindex', 0) seems to do the trick (making these <li> focusable).

Replying to lessbloat:

prop('tabindex', 0) seems to do the trick (making these <li> focusable).

Could be. Anyway, it belongs in Iris since that's where palettes live.

iris-keys-2.diff adds palette keyboard accessibility.

Nice. Is there anything else needed after -2.diff?

multiply by 10 when using alt key

This only works up down, not left right. Chrome stable OS X.

In 22697:

Color Picker keyboard accessibility. So awesome. props lessbloat, mattwiebe. see #22475.

Replying to nacin:

multiply by 10 when using alt key

This only works up down, not left right. Chrome stable OS X.

For some reason alt + control + left/right works. I am chalking it up to some kind of global shortcut on OS X, or something.

Only other thing I expressed in IRC was a nice-to-have that alt + arrow keys should max out, rather than stop short, which mattwiebe agreed.

Just following up: Nacin's computer is possessed; nobody else can duplicate his issue.

Did discover that the "puck" and slider controls weren't keyboard focusable in Safari (but palettes are). Further investigation revealed nothing about why not (open to anyone who might know something).

But I did recall that Safari handles a lot of keyboard stuff "uniquely." Sure enough, Preferences –> Advanced has a "Press Tab to highlight each item on a webpage" option that defaults to off. Looks like they're using some type of internal algorithm to decide what's focusable when it's off. Enabling the option makes everything behave smoothly from the keyboard.

iris-keys-3.diff:

• Let's you use alt+arrows all the way to the edge
• Gives instant✝ feedback when typing a color in the text field (see #22388)
• Above required a lot of robustifying to the underlying color parser. Accepts hsl, rgb and hsv colors as a bonus. :)

✝ with a 150 ms debounce so things don't go all crazy

In 22732:

Color picker: Instant feedback when typing a color. Strengthens alt + arrows for moving around the palette. props mattwiebe. fixes #22475. fixes #22388.