[wp-trac] [WordPress Trac] #42078: Customizer: fix the color hue picker HTML and accessibility

[WordPress Trac]

#42078: Customizer: fix the color hue picker HTML and accessibility
---------------------------+-----------------------------
 Reporter:  afercia        |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Customize      |    Version:
 Severity:  normal         |   Keywords:  has-screenshots
  Focuses:  accessibility  |
---------------------------+-----------------------------
 The hue color picker control used in the Customizer, for example with
 Twenty Seventeen, has an empty `<label>` element and incorrect markup:

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

 the actual markup:


 {{{
 <div class="customize-control-content">
         <label>
                 <span class="screen-reader-text"></span>
                 <input class="color-picker-hue" type="text" data-
 type="hue" style="display: none;">
                 <div class="iris-picker iris-only-strip ... >{ rest of the
 iris color picker here}</div>
         </label>
 </div>
 }}}

 - the label is actually empty
 - it should not wrap the hidden input field and should use for/id
 attributes as per the WordPress accessibility standard
 - the iris picker should not be inside the label
 - the hidden input field should not be hidden, and should be used as an
 alternative way to enter a hue value

 Worth noting the normal color picker does use an input field as
 alternative to make sure everyone, with any device or ability, can enter a
 value:

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

--
Ticket URL: <https://core.trac.wordpress.org/ticket/42078>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform