Widget Customizer: "Find Widgets" Search Input has No Associated Label

[davidakennedy]

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! :)

[nacin]

Thanks, davidakennedy!

[davidakennedy]

I tested the patch and it works as expected. Thanks SergeyBiryukov for the quick patch!

[ocean90]

In 27860:

Widget Customizer: Add a label to widget search.

props SergeyBiryukov.
fixes #27590.

[ocean90]

Replying to ocean90:

In 27860:

Widget Customizer: Add a label to widget search.

props SergeyBiryukov.
fixes #27590.

And props to davidakennedy!