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

[WordPress Trac]

#42078: Customize: fix the color hue picker HTML and accessibility
---------------------------------------+-----------------------------
 Reporter:  afercia                    |       Owner:
     Type:  defect (bug)               |      Status:  new
 Priority:  normal                     |   Milestone:  Future Release
Component:  Customize                  |     Version:  4.7
 Severity:  normal                     |  Resolution:
 Keywords:  has-screenshots has-patch  |     Focuses:  accessibility
---------------------------------------+-----------------------------

Comment (by dlh):

 [attachment:42078.diff] builds on the previous patches with approaches for
 almost all of the issues described.

 > the label is actually empty

 This appears to be a bug in Twenty Seventeen, which doesn't pass a label
 to the control. I assume that no label is used because the control is
 meant to be visually part of the "Color Scheme" control above it.

 The patch adds a label along with JavaScript that applies the `screen-
 reader-text` class to maintain the existing appearance.

 > it should not wrap the hidden input field and should use for/id
 attributes as per the WordPress accessibility standard

 The patch moves the hidden input field out of the label and adds the
 attributes.

 > the iris picker should not be inside the label

 The change to the label in the patch should also cause the Iris picker to
 appear outside the label.

 > the hidden input field should not be hidden, and should be used as an
 alternative way to enter a hue value

 I encountered the same difficulty as @subrataemfluence here: The field
 responds to the slider, but not to manual input. If I had to guess, I
 would say the `_addInputListeners()` function in `iris.min.js` isn't
 handling the values correctly, but that's only a guess.

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