WordPress.org

Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#22475 closed defect (bug) (fixed)

Color picker accessibility

Reported by: lessbloat Owned by: mattwiebe
Milestone: 3.5 Priority: low
Severity: normal Version:
Component: Accessibility Keywords: has-patch
Focuses: Cc:

Description (last modified by SergeyBiryukov)

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.

Attachments (4)

22475.diff (40.7 KB) - added by lessbloat 9 years ago.
iris-keys.diff (40.0 KB) - added by mattwiebe 9 years ago.
iris-keys-2.diff (40.1 KB) - added by mattwiebe 9 years ago.
iris-keys-3.diff (41.2 KB) - added by mattwiebe 9 years ago.

Download all attachments as: .zip

Change History (25)

#1 @helenyhou
9 years ago

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

#2 @SergeyBiryukov
9 years ago

  • Description modified (diff)

#3 @nacin
9 years ago

  • Owner set to mattwiebe
  • Status changed from new to assigned

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.

@lessbloat
9 years ago

#4 @lessbloat
9 years ago

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...

#5 follow-up: @nacin
9 years ago

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

#6 in reply to: ↑ 5 @mattwiebe
9 years ago

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. :)

@mattwiebe
9 years ago

#7 @mattwiebe
9 years ago

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

#8 follow-up: @helenyhou
9 years ago

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

#9 in reply to: ↑ 8 ; follow-up: @lessbloat
9 years ago

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

#10 in reply to: ↑ 9 ; follow-up: @mattwiebe
9 years ago

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.

#11 in reply to: ↑ 10 ; follow-up: @lessbloat
9 years ago

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).

#12 in reply to: ↑ 11 @mattwiebe
9 years ago

  • Keywords has-patch added

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.

#13 @nacin
9 years ago

  • Keywords commit added

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

#14 follow-up: @nacin
9 years ago

multiply by 10 when using alt key

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

#15 @nacin
9 years ago

In 22697:

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

#16 in reply to: ↑ 14 @nacin
9 years ago

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.

#17 @mattwiebe
9 years ago

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.

#18 @nacin
9 years ago

  • Keywords has-patch commit removed
  • Priority changed from normal to low

#19 @mattwiebe
9 years ago

  • Keywords has-patch added

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

#20 @nacin
9 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 22732:

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

#21 @kovshenin
9 years ago

  • Cc kovshenin added
Note: See TracTickets for help on using tickets.