[wp-trac] [WordPress Trac] #39662: Color picker accessibility improvements

[WordPress Trac]

#39662: Color picker accessibility improvements
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |       Owner:  afercia
     Type:  defect (bug)             |      Status:  assigned
 Priority:  normal                   |   Milestone:  4.8
Component:  Customize                |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-screenshots has-     |     Focuses:  accessibility,
  patch needs-testing                |  javascript
-------------------------------------+-------------------------------------
Changes (by afercia):

 * keywords:  has-screenshots has-patch => has-screenshots has-patch needs-
     testing


Comment:

 Yep, [attachment:39662.diff] works in the Customizer but doesn't in the
 standalone version. The new patch takes a different approach and uses a
 default label to wrap the input field. This way, either in the standalone
 version or in the Customizer one, there's always a label that wraps the
 input field and it can be used as "hook" in the DOM to inject all the
 other elements.

 The color picker could probably benefit from some kind of JS templating,
 and that would be a nice improvement for the future. For back-compat
 reasons, I guess the safer option for now is to stick to jQuery methods to
 build all the HTML.

 [attachment:39662.2.diff] improves a bit also the responsive view. To test
 the standalone version, it's possible to directly access the old `wp-
 admin/themes.php?page=custom-header` and `wp-admin/themes.php?page=custom-
 background` pages, if the active theme supports them (try with Twenty
 Sixteen).

 Note: the patch includes some labels for the Iris color picker meant for
 future improvements. Iris could be greatly improved for accessibility,
 however some of the required changes should be implemented upstream. Will
 open a separate ticket.

 Responsive view, no default color:

 [[Image(https://cldup.com/Euj7jm3pvW.png)]]

 Responsive view, with default color:

 [[Image(https://cldup.com/Xxrbg6EMgE.png)]]

 In other languages, the translated strings may be a bit longer and there's
 not enough space. The input field and the Clear/Default button drop below
 the toggle button but that deosn't look too bad:

 [[Image(https://cldup.com/0EETPm2zHC.png)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/39662#comment:5>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform