WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#42079 closed defect (bug) (duplicate)

Customize: some notification areas are within label elements producing invalid HTML

Reported by: afercia Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Customize Keywords:
Focuses: accessibility Cc:

Description

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

Change History (1)

#1 @westonruter
3 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

@afercia This will be resolved by #33085. The issue is that when there is no notification container in a control, it will get injected right after the control title. Since this is inside of a label, this is wrong. I mentioned this at https://core.trac.wordpress.org/ticket/33085#comment:21

Note: See TracTickets for help on using tickets.