[wp-trac] [WordPress Trac] #40331: The placeholder attribute should not be used as a replacement for a label

[WordPress Trac]

#40331: The placeholder attribute should not be used as a replacement for a label
-------------------------------------------------+-------------------------
 Reporter:  afercia                              |       Owner:  joedolson
     Type:  defect (bug)                         |      Status:  accepted
 Priority:  normal                               |   Milestone:  6.6
Component:  Administration                       |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots a11y-task has-patch  |     Focuses:  ui,
                                                 |  accessibility
-------------------------------------------------+-------------------------

Comment (by afercia):

 Couple long standing issues that would need a decision:

 == Clicking the Search Menu Items label doesn't do anything
 Making the 'Search Menu Items' label visible in the Customizer surfaces a
 problem with the JavaScript of the accordions. To reproduce:
 - Go to Customize > Menus > edit a menu > click 'Add Items'.
 - The search panel opens.
 - Click the 'Search Menu Items' label and observe focus is not set to the
 search input label.
 - Expected: focus to be set on the input when clicking the visible label.
 That's native browser behavior.

 I tracked down this issue to the fact the menu item search is wrapped
 within the HTML markup that is meant to be used for accordions. There is a
 container element with CSS class `accordion-container` and a children with
 CSS class `accordion-section-title` that contains the label and the input.
 The click event callback runs when clicking anything inside `accordion-
 section-title` and it calls `preventDefault()` thus preventing the native
 behavior of a clicked label element. See [https://github.com/WordPress
 /wordpress-
 develop/blob/ff2c933afa7e432084b3e1d2540a1f6c2bc54eb7/src/js/_enqueues/lib/accordion.js#L36-L45
 the related code].

 I'm not sure why the menu items search is wrapped within elements with the
 CSS classes meant for accordions. The ''widgets'' search markup, which is
 very similar, doesn't use those classes.

 It is worth noting that the CSS class `accordion-section-title` is meant
 to be used only on an element that contains an accordion title. Any other
 usage is incorrect so this appears to be a bug that originates from
 [32806] / #32576.

 As said, this bug is unrelated to the patch proposed on this ticket but it
 is surfaced by it. It would be worth investigating the best path to fix
 it.

 == Placeholders that use the same text of a visually hidden label
 I'm not sure why other placeholder aren't addressed, for example `Search
 installed themes...` in wp-admin/themes.php. This input field has:
 - A visually hidden label: 'Search Installed Themes'
 - A placeholder attribute with text that almost matches the label: 'Search
 installed themes...'

 Are we going to allow this pattern? While that may work for screen reader
 users, it isn't ideal for speech recognition software users. Testing with
 Safari and Voice Control, when issuing a voice command like 'click search
 installed themes', Voice Control will show two numbers on the screen,
 because both the label and the input use the same text. The expected
 behavior is the input field to receive focus. See attached screenshot.
 While this may be a Voice Control glitch, I'd tend to think we should
 better consider this pattern.

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