[wp-trac] [WordPress Trac] #42022: Customize: Fix date time control defects

[WordPress Trac]

#42022: Customize: Fix date time control defects
--------------------------+--------------------------
 Reporter:  melchoyce     |       Owner:  westonruter
     Type:  defect (bug)  |      Status:  accepted
 Priority:  normal        |   Milestone:  4.9
Component:  Customize     |     Version:  trunk
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  ui
--------------------------+--------------------------

Comment (by afercia):

 Thanks for the PR. I see at the moment it doesn't address the main issue:
 > “form elements label are not explicitly associated with for/id
 attributes as required by the accessibility standard for any new code in
 core.”

 This is a requirement of the current WordPress coding standards and should
 be implemented.

 [attachment:42022.diff]  far from being a real patch, serves the purpose
 to highlight what needs to be done.

 If fixes also a few missing labels (also in other places in the
 Customizer) and avoids to print out empty labels. Again, please remember
 that ''any form input needs to be labeled''.

 Todo: find a better label text for AM / PM

 {{{
 <label for="date-time-ampm" class="screen-reader-text">AM / PM</label>
 }}}

 since it is visually hidden, it can be expanded with some more meaningful
 text.

 There are many other pending a11y issues in the Customizer and I'm a bit
 surprised that, after so many recent improvements, very basic things like
 valid and semantic HTML are so overlooked. I haven't seen so much progress
 in this regard, and I'd really like to see more focus on producing at
 least valid HTML. Hopefully, semantic HTML.

 Some examples of how the Customizer controls generate always a `<label>`
 element even when they're not meant to contain form controls...


 {{{
 <label for="custom_logo-button">
         <span class="customize-control-title">Logo</span>
         <div class="customize-control-notifications-container"></div>
 </label>
 }}}


 {{{
 <label for="site_icon-button">
         <span class="customize-control-title">Site Icon</span>
         <span class="description customize-control-description">The Site
 Icon is used as a browser and app icon for your site. Icons must be
 square, and at least <strong>512</strong> pixels wide and tall.</span>
 </label>
 }}}


 {{{
 <label for="header_image-button">
         <span class="customize-control-title">Current header</span>
 </label>
 }}}


 {{{
 <label for="background_image-button">
         <span class="customize-control-title">Background Image</span>
 </label>
 }}}

 This kind of HTML is, honestly, something that WordPress shouldn't, ever,
 output, for any reason.

 Software that read the HTML to assist users in using WordPress, have big
 troubles when trying to report so poor HTML to users. The information
 conveyed is just wrong and our communication to our users just fails.


 Aside:
 - colors like `red` shouldn't be used. WordPress has an official color
 palette and only colors from the palette should be used
 - please avoid using named colors e.g. `white`, this makes very difficult
 looking for occurrences of colors through the codebase
 - please avoid docblocks used as inline comments, for example this:

 {{{
 /**
  * Find all invalid setting less controls with notification type error.
  */
 }}}
 is just an inline comment but wrongly uses the double asterisk.

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