From b1faca5ca881b88cffc5c0b0f084a081092a1df0 Mon Sep 17 00:00:00 2001
From: westonruter <westonruter@602fd350-edb4-49c9-b593-d223f7449a82>
Date: Wed, 4 Oct 2017 18:11:08 +0000
Subject: [PATCH] Customize: Improve accessibility of markup for base
 `WP_Customize_Control` and `WP_Customize_Nav_Menu_Control` with proper use of
 `label` elements and inclusion of `aria-describedby`.

See #33085.
Props valendesigns, afercia, westonruter.


git-svn-id: https://develop.svn.wordpress.org/trunk@41740 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-controls.css       |  10 +-
 .../class-wp-customize-control.php            | 156 +++++++++++-------
 .../class-wp-customize-nav-menu-control.php   |  31 ++--
 3 files changed, 114 insertions(+), 83 deletions(-)

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index f825c68977..96fc72b22a 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -929,9 +929,7 @@ p.customize-section-description {
 	line-height: 28px;
 }
 
-.customize-control-radio label,
-.customize-control-checkbox label,
-.customize-control-nav_menu_auto_add label {
+.customize-control .customize-inside-control-row {
 	line-height: 20px;
 	display: block;
 	margin-left: 24px;
@@ -2670,9 +2668,9 @@ body.adding-widget .add-new-widget:before,
 		display: inline;
 	}
 
-	.customize-control-radio label,
-	.customize-control-checkbox label,
-	.customize-control-nav_menu_auto_add label {
+	.customize-control-radio .customize-inside-control-row,
+	.customize-control-checkbox .customize-inside-control-row,
+	.customize-control-nav_menu_auto_add .customize-inside-control-row {
 		margin-left: 32px;
 	}
 
diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php
index 6a6069efe5..15e0262fe3 100644
--- a/src/wp-includes/class-wp-customize-control.php
+++ b/src/wp-includes/class-wp-customize-control.php
@@ -477,83 +477,104 @@ class WP_Customize_Control {
 	 * @since 3.4.0
 	 */
 	protected function render_content() {
-		switch( $this->type ) {
+		$input_id = '_customize-input-' . $this->id;
+		$description_id = '_customize-description-' . $this->id;
+		$describedby_attr = ( ! empty( $this->description ) ) ? 'aria-describedby="' . esc_attr( $description_id ) . '"' : '';
+		switch ( $this->type ) {
 			case 'checkbox':
 				?>
-				<label>
-					<input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
-					<?php echo esc_html( $this->label ); ?>
+				<span class="customize-inside-control-row">
+					<input
+						id="<?php echo esc_attr( $input_id ); ?>"
+						<?php echo $describedby_attr; ?>
+						type="checkbox"
+						value="<?php echo esc_attr( $this->value() ); ?>"
+						<?php $this->link(); ?>
+						<?php checked( $this->value() ); ?>
+					/>
+					<label for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_html( $this->label ); ?></label>
 					<?php if ( ! empty( $this->description ) ) : ?>
-						<span class="description customize-control-description"><?php echo $this->description; ?></span>
+						<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
 					<?php endif; ?>
-				</label>
+				</span>
 				<?php
 				break;
 			case 'radio':
-				if ( empty( $this->choices ) )
+				if ( empty( $this->choices ) ) {
 					return;
+				}
 
 				$name = '_customize-radio-' . $this->id;
-
-				if ( ! empty( $this->label ) ) : ?>
+				?>
+				<?php if ( ! empty( $this->label ) ) : ?>
 					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-				<?php endif;
-				if ( ! empty( $this->description ) ) : ?>
-					<span class="description customize-control-description"><?php echo $this->description ; ?></span>
-				<?php endif;
+				<?php endif; ?>
+				<?php if ( ! empty( $this->description ) ) : ?>
+					<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description ; ?></span>
+				<?php endif; ?>
 
-				foreach ( $this->choices as $value => $label ) :
-					?>
-					<label>
-						<input type="radio" value="<?php echo esc_attr( $value ); ?>" name="<?php echo esc_attr( $name ); ?>" <?php $this->link(); checked( $this->value(), $value ); ?> />
-						<?php echo esc_html( $label ); ?><br/>
-					</label>
-					<?php
-				endforeach;
+				<?php foreach ( $this->choices as $value => $label ) : ?>
+					<span class="customize-inside-control-row">
+						<input
+							id="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"
+							type="radio" <?php echo $describedby_attr; ?>
+							value="<?php echo esc_attr( $value ); ?>"
+							name="<?php echo esc_attr( $name ); ?>"
+							<?php $this->link(); ?>
+							<?php checked( $this->value(), $value ); ?>
+							/>
+						<label for="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"><?php echo esc_html( $label ); ?></label>
+					</span>
+				<?php endforeach; ?>
+				<?php
 				break;
 			case 'select':
-				if ( empty( $this->choices ) )
+				if ( empty( $this->choices ) ) {
 					return;
+				}
 
 				?>
-				<label>
-					<?php if ( ! empty( $this->label ) ) : ?>
-						<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<?php endif;
-					if ( ! empty( $this->description ) ) : ?>
-						<span class="description customize-control-description"><?php echo $this->description; ?></span>
-					<?php endif; ?>
+				<?php if ( ! empty( $this->label ) ) : ?>
+					<label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
+				<?php endif; ?>
+				<?php if ( ! empty( $this->description ) ) : ?>
+					<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
+				<?php endif; ?>
 
-					<select <?php $this->link(); ?>>
-						<?php
-						foreach ( $this->choices as $value => $label )
-							echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
-						?>
-					</select>
-				</label>
+				<select id="<?php echo esc_attr( $input_id ); ?>" <?php echo $describedby_attr; ?> <?php $this->link(); ?>>
+					<?php
+					foreach ( $this->choices as $value => $label ) {
+						echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
+					}
+					?>
+				</select>
 				<?php
 				break;
 			case 'textarea':
 				?>
-				<label>
-					<?php if ( ! empty( $this->label ) ) : ?>
-						<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<?php endif;
-					if ( ! empty( $this->description ) ) : ?>
-						<span class="description customize-control-description"><?php echo $this->description; ?></span>
-					<?php endif; ?>
-					<textarea rows="5" <?php $this->input_attrs(); ?> <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
-				</label>
+				<?php if ( ! empty( $this->label ) ) : ?>
+					<label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
+				<?php endif; ?>
+				<?php if ( ! empty( $this->description ) ) : ?>
+					<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
+				<?php endif; ?>
+				<textarea
+					id="<?php echo esc_attr( $input_id ); ?>"
+					rows="5"
+					<?php echo $describedby_attr; ?>
+					<?php $this->input_attrs(); ?>
+					<?php $this->link(); ?>>
+					<?php echo esc_textarea( $this->value() ); ?>
+				</textarea>
 				<?php
 				break;
 			case 'dropdown-pages':
 				?>
-				<label>
 				<?php if ( ! empty( $this->label ) ) : ?>
-					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-				<?php endif;
-				if ( ! empty( $this->description ) ) : ?>
-					<span class="description customize-control-description"><?php echo $this->description; ?></span>
+					<label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
+				<?php endif; ?>
+				<?php if ( ! empty( $this->description ) ) : ?>
+					<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
 				<?php endif; ?>
 
 				<?php
@@ -576,7 +597,7 @@ class WP_Customize_Control {
 				}
 
 				// Hackily add in the data link parameter.
-				$dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );
+				$dropdown = str_replace( '<select', '<select ' . $this->get_link() . ' id="' . esc_attr( $input_id ) . '" ' . $describedby_attr, $dropdown );
 
 				// Even more hacikly add auto-draft page stubs.
 				// @todo Eventually this should be removed in favor of the pages being injected into the underlying get_pages() call. See <https://github.com/xwp/wp-customize-posts/pull/250>.
@@ -596,30 +617,37 @@ class WP_Customize_Control {
 
 				echo $dropdown;
 				?>
-				</label>
 				<?php if ( $this->allow_addition && current_user_can( 'publish_pages' ) && current_user_can( 'edit_theme_options' ) ) : // Currently tied to menus functionality. ?>
-					<button type="button" class="button-link add-new-toggle"><?php
+					<button type="button" class="button-link add-new-toggle">
+						<?php
 						/* translators: %s: add new page label */
 						printf( __( '+ %s' ), get_post_type_object( 'page' )->labels->add_new_item );
-					?></button>
+						?>
+					</button>
 					<div class="new-content-item">
 						<label for="create-input-<?php echo $this->id; ?>"><span class="screen-reader-text"><?php _e( 'New page title' ); ?></span></label>
 						<input type="text" id="create-input-<?php echo $this->id; ?>" class="create-item-input" placeholder="<?php esc_attr_e( 'New page title&hellip;' ); ?>">
 						<button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
 					</div>
-				<?php endif;
+				<?php endif; ?>
+				<?php
 				break;
 			default:
 				?>
-				<label>
-					<?php if ( ! empty( $this->label ) ) : ?>
-						<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<?php endif;
-					if ( ! empty( $this->description ) ) : ?>
-						<span class="description customize-control-description"><?php echo $this->description; ?></span>
-					<?php endif; ?>
-					<input type="<?php echo esc_attr( $this->type ); ?>" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
-				</label>
+				<?php if ( ! empty( $this->label ) ) : ?>
+					<label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
+				<?php endif; ?>
+				<?php if ( ! empty( $this->description ) ) : ?>
+					<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
+				<?php endif; ?>
+				<input
+					id="<?php echo esc_attr( $input_id ); ?>"
+					type="<?php echo esc_attr( $this->type ); ?>"
+					<?php echo $describedby_attr; ?>
+					<?php $this->input_attrs(); ?>
+					value="<?php echo esc_attr( $this->value() ); ?>"
+					<?php $this->link(); ?>
+					/>
 				<?php
 				break;
 		}
diff --git a/src/wp-includes/customize/class-wp-customize-nav-menu-control.php b/src/wp-includes/customize/class-wp-customize-nav-menu-control.php
index 388c9bb17f..7018d6da8a 100644
--- a/src/wp-includes/customize/class-wp-customize-nav-menu-control.php
+++ b/src/wp-includes/customize/class-wp-customize-nav-menu-control.php
@@ -44,6 +44,7 @@ class WP_Customize_Nav_Menu_Control extends WP_Customize_Control {
 	 */
 	public function content_template() {
 		?>
+		<# var elementId; #>
 		<button type="button" class="button add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
 			<?php _e( 'Add Items' ); ?>
 		</button>
@@ -64,21 +65,25 @@ class WP_Customize_Nav_Menu_Control extends WP_Customize_Control {
 			</li>
 
 			<?php foreach ( get_registered_nav_menus() as $location => $description ) : ?>
-			<li class="customize-control customize-control-checkbox assigned-menu-location">
-				<label>
-					<input type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" /> <?php echo $description; ?>
-					<span class="theme-location-set"><?php
-						/* translators: %s: menu name */
-						printf( _x( '(Current: %s)', 'menu location' ),
-							'<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
-						);
-					?></span>
-				</label>
-			</li>
+				<# elementId = _.uniqueId( 'customize-nav-menu-control-location-' ); #>
+				<li class="customize-control customize-control-checkbox assigned-menu-location customize-inside-control-row">
+					<input id="{{ elementId }}" type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" />
+					<label for="{{ elementId }}">
+						<?php echo $description; ?>
+						<span class="theme-location-set">
+							<?php
+							/* translators: %s: menu name */
+							printf( _x( '(Current: %s)', 'menu location' ),
+								'<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
+							);
+							?>
+						</span>
+					</label>
+				</li>
 			<?php endforeach; ?>
-
 		</ul>
-		<?php endif;
+		<?php endif; ?>
+		<?php
 	}
 
 	/**