Customize: Fix invalid HTML and `aria-describedby` values.

- fixes invalid HTML and duplicate IDs
- as per the Accessibility coding standards, all new code must use explicitly associated form labels
- properly escapes a few HTML attributes

Props celloexpressions, afercia.
Fixes #42054.

Built from https://develop.svn.wordpress.org/trunk@41709


git-svn-id: http://core.svn.wordpress.org/trunk@41543 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/js/customize-controls.js

@@ -1659,7 +1659,7 @@
 
 				// Search terms.
 				debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 milliseconds to initiate a search.
-				section.contentContainer.on( 'input', '#wp-filter-search-input', function() {
+				section.contentContainer.on( 'input', '.wp-filter-search', function() {
 					debounced( section );
 					if ( ! section.expanded() ) {
 						section.expand();
@@ -2003,7 +2003,7 @@
 		checkTerm: function( section ) {
 			var newTerm;
 			if ( 'wporg' === section.params.action ) {
-				newTerm = $( '#wp-filter-search-input' ).val();
+				newTerm = section.contentContainer.find( '.wp-filter-search' ).val();
 				if ( section.term !== newTerm ) {
 					section.initializeNewQuery( newTerm, section.tags );
 				}

wp-includes/customize/class-wp-customize-theme-control.php

@@ -67,9 +67,9 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
 		$install_label = sprintf( __( 'Install and preview theme: %s' ), '{{ data.theme.name }}' );
 		?>
 		<# if ( data.theme.active ) { #>
-			<div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
+			<div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action">
 		<# } else { #>
-			<div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
+			<div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action">
 		<# } #>
 
 			<# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>

wp-includes/customize/class-wp-customize-themes-panel.php

@@ -46,7 +46,7 @@ class WP_Customize_Themes_Panel extends WP_Customize_Panel {
 				?>
 
 				<?php if ( current_user_can( 'switch_themes' ) ) : ?>
-					<button type="button" class="button change-theme" aria-label="<?php _e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
+					<button type="button" class="button change-theme" aria-label="<?php esc_attr_e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
 				<?php endif; ?>
 			</h3>
 			<ul class="accordion-sub-container control-panel-content"></ul>
@@ -90,9 +90,9 @@ class WP_Customize_Themes_Panel extends WP_Customize_Panel {
 			<?php endif; ?>
 		</li>
 		<li class="customize-themes-full-container-container">
-			<ul class="customize-themes-full-container">
+			<div class="customize-themes-full-container">
-				<li class="customize-themes-notifications"></li>
+				<div class="customize-themes-notifications"></div>
-			</ul>
+			</div>
 		</li>
 		<?php
 	}

wp-includes/customize/class-wp-customize-themes-section.php

@@ -100,9 +100,9 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
 		<button type="button" class="button button-primary customize-section-back customize-themes-mobile-back"><?php _e( 'Back to theme sources' ); ?></button>
 		<# if ( 'wporg' === data.action ) { #>
 			<div class="search-form">
-				<label class="screen-reader-text" for="wp-filter-search-input"><?php _e( 'Search themes&hellip;' ); ?></label>
+				<label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
-				<input placeholder="<?php _e( 'Search themes&hellip;' ); ?>" type="search" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
+				<input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
-				<span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
+				<span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
 			</div>
 			<button type="button" class="button feature-filter-toggle">
 				<span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
@@ -129,13 +129,11 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
 				?>
 			</div>
 		<# } else { #>
-			<p class="themes-filter-container">
+			<div class="themes-filter-container">
-				<label for="themes-filter">
+				<label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
-					<span class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></span>
+				<input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
-					<input type="search" id="themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="live-search-desc" class="wp-filter-search wp-filter-search-themes" />
+				<span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
-					<span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
+			</div>
-				</label>
-			</p>
 		<# } #>
 		<div class="filter-themes-count">
 			<span class="themes-displayed">

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-alpha-41708';
+$wp_version = '4.9-alpha-41709';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.