[wp-trac] [WordPress Trac] #27590: "Find Widgets" Search Input has No Associated Label in Theme Customizer

[WordPress Trac]

#27590: "Find Widgets" Search Input has No Associated Label in Theme Customizer
---------------------------+-----------------------------
 Reporter:  davidakennedy  |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Widgets        |    Version:  trunk
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 The issue: When testing the new Widget customizer with a screen reader (in
 this case Mac OS 10.2 with Voiceover and Chrome), I do not know what to do
 at the "Find Widgets" search input because it does not have a label. This
 can be accessed by clicking "Add a widget". The screen reader pronounces
 "Edit text, blank."

 The current code for this element on the /wp-admin/customize.php screen
 is:

 {{{
 <div id="available-widgets-filter">
     <input type="search" placeholder="Find widgets…">
 </div>
 }}}

 It's invalid HTML and causes a barrier to screen reader users.

 What I expected: With a label, it would say, "Find Widgets, Edit text."

 A potential fix might be:

 {{{
 <div id="available-widgets-filter">
     <label for="widgets-filter">Find widgets</label>
     <input id="widgets-filter" type="search" placeholder="Find widgets…">
 </div>
 }}}

 I'd be happy to retest a fix! :)

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