[wp-trac] [WordPress Trac] #42079: Customize: some notification areas are within label elements producing invalid HTML

[WordPress Trac]

#42079: Customize: some notification areas are within label elements producing
invalid HTML
---------------------------+-----------------------------
 Reporter:  afercia        |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Customize      |    Version:
 Severity:  normal         |   Keywords:
  Focuses:  accessibility  |
---------------------------+-----------------------------
 Some (not all) of the notification areas in the Customizer area actually
 `<div>` elements within a `<label>` element. This is invalid HTML and
 should be fixed.

 For example, the "Site Title" one has this markup:


 {{{
 <label>
         <span class="customize-control-title">Site Title</span>
         <div class="customize-control-notifications-container"></div>
         <input type="text" value="WordPress Develop" data-customize-
 setting-link="blogname">
 </label>
 }}}

 If there's really the need to have the notification area between the label
 text and the input field, one way to fix this is using an explicitly
 associated label, that is a label that doesn't wrap the input field and
 uses for/id attributes.

 This is also what is requested by the WordPress accessibility coding
 standards, see https://make.wordpress.org/core/handbook/best-practices
 /coding-standards/accessibility-coding-standards/#labeling

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