WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#27590 closed defect (bug) (fixed)

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

Reported by: davidakennedy Owned by: ocean90
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.9
Component: Widgets Keywords: has-patch
Focuses: accessibility Cc:

Description

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

Attachments (1)

27590.patch (1.0 KB) - added by SergeyBiryukov 4 years ago.

Download all attachments as: .zip

Change History (7)

#1 @nacin
4 years ago

  • Milestone changed from Awaiting Review to 3.9

Thanks, davidakennedy!

#2 @SergeyBiryukov
4 years ago

  • Keywords has-patch added

#3 @ocean90
4 years ago

  • Summary changed from "Find Widgets" Search Input has No Associated Label in Theme Customizer to Widget Customizer: "Find Widgets" Search Input has No Associated Label

#4 @davidakennedy
4 years ago

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

#5 follow-up: @ocean90
4 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 27860:

Widget Customizer: Add a label to widget search.

props SergeyBiryukov.
fixes #27590.

#6 in reply to: ↑ 5 @ocean90
4 years ago

Replying to ocean90:

In 27860:

Widget Customizer: Add a label to widget search.

props SergeyBiryukov.
fixes #27590.

And props to davidakennedy!

Note: See TracTickets for help on using tickets.