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

[WordPress Trac]

#39662: Color picker accessibility improvements
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |      Owner:
     Type:  defect (bug)             |     Status:  new
 Priority:  normal                   |  Milestone:  Awaiting Review
Component:  Customize                |    Version:
 Severity:  normal                   |   Keywords:  has-screenshots needs-
  Focuses:  accessibility,           |  patch
  javascript                         |
-------------------------------------+-------------------------------------
 While investigating #39096, I've noticed the color picker control could be
 greatly improved and simplified. The main accessibility issue is about the
 HTML output, which turns out to be confusing for screen readers.

 Ideally, a `<label>` element should contain just the label text (if it's
 explicitly associated) or the label text and the associated form control
 (if it's implicitly associated). That is what screen readers (and any
 other software) expect to find.

 In this case instead, the `<label>` element contains other controls (a
 link, a button, the notification container, and the whole iris color
 picker). Not surprisingly, this can make screen readers not able to
 understand "what" the color picker is and how it is supposed to work.

 Testing with Safari 10 + VoiceOver, the confusion is so severe that
 VoiceOver starts announcing "Safari busy" and then just hangs on a "busy"
 state:

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

 Note: I think the message "Safari busy" is unrelated to the real issue. I
 guess what's happening here is VoiceOver just assumes it has to wait for
 Safari to correctly expose the information it needs, but that never
 happens.

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