Accessibility: Customizer, make the menu items "clear search results" a button.

For Web standards and accessibility, always prefer native controls instead of
`span` or `div` elements.

Fixes #36903.
Built from https://develop.svn.wordpress.org/trunk@37679


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

wp-admin/css/customize-nav-menus-rtl.css

@@ -607,13 +607,17 @@
 
 #available-menu-items-search .clear-results {
 	position: absolute;
-	top: 20px;
+	top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( 4 is ( 28 input height - 20 button height ) / 2 ) */
 	left: 20px;
 	width: 20px;
 	height: 20px;
+	padding: 0;
+	border: 0;
 	cursor: pointer;
+	background: none;
 	color: #a00;
 	text-decoration: none;
+	outline: 0;
 }
 
 #available-menu-items-search .clear-results,
@@ -625,9 +629,14 @@
 	display: block;
 }
 
+.ie8 #available-menu-items-search.loading .clear-results:before {
+	content: ""; /* help IE8 redraw the pseudo element */
+}
+
 #available-menu-items-search .clear-results:before {
 	content: "\f335";
 	font: normal 20px/1 dashicons;
+	vertical-align: middle;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
@@ -639,9 +648,9 @@
 
 #available-menu-items-search .spinner {
 	position: absolute;
-	top: 20px;
-	margin: 0 !important;
+	top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( ( 28 input height - 20 button height ) / 2 ) */
 	left: 20px;
+	margin: 0 !important;
 }
 
 /* search results list */
@@ -840,10 +849,19 @@ li.assigned-to-menu-location .add-new-menu-item {
 	#available-menu-items #available-menu-items-search .accordion-section-content {
 		top: 63px;
 	}
+
+	#available-menu-items-search .spinner,
+	#available-menu-items-search .clear-results {
+		top: 20px; /* 12 container padding +1 input margin +1 input border +5.5 ( 5.5 rounded to 6 is ( 31 input height - 20 button height ) / 2 ) */
+	}
 }
 
 @media screen and ( max-width: 640px ) {
 	#available-menu-items #available-menu-items-search .accordion-section-content {
 		top: 133px;
 	}
+
+	#available-menu-items-search .clear-results {
+		top: 90px; /* 70 section title height + 12 container padding +1 input margin +1 input border +5.5 ( 5.5 rounded to 6 is ( 31 input height - 20 button height ) / 2 ) */
+	}
 }

wp-admin/css/customize-nav-menus.css

@@ -607,13 +607,17 @@
 
 #available-menu-items-search .clear-results {
 	position: absolute;
-	top: 20px;
+	top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( 4 is ( 28 input height - 20 button height ) / 2 ) */
 	right: 20px;
 	width: 20px;
 	height: 20px;
+	padding: 0;
+	border: 0;
 	cursor: pointer;
+	background: none;
 	color: #a00;
 	text-decoration: none;
+	outline: 0;
 }
 
 #available-menu-items-search .clear-results,
@@ -625,9 +629,14 @@
 	display: block;
 }
 
+.ie8 #available-menu-items-search.loading .clear-results:before {
+	content: ""; /* help IE8 redraw the pseudo element */
+}
+
 #available-menu-items-search .clear-results:before {
 	content: "\f335";
 	font: normal 20px/1 dashicons;
+	vertical-align: middle;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
@@ -639,9 +648,9 @@
 
 #available-menu-items-search .spinner {
 	position: absolute;
-	top: 20px;
-	margin: 0 !important;
+	top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( ( 28 input height - 20 button height ) / 2 ) */
 	right: 20px;
+	margin: 0 !important;
 }
 
 /* search results list */
@@ -840,10 +849,19 @@ li.assigned-to-menu-location .add-new-menu-item {
 	#available-menu-items #available-menu-items-search .accordion-section-content {
 		top: 63px;
 	}
+
+	#available-menu-items-search .spinner,
+	#available-menu-items-search .clear-results {
+		top: 20px; /* 12 container padding +1 input margin +1 input border +5.5 ( 5.5 rounded to 6 is ( 31 input height - 20 button height ) / 2 ) */
+	}
 }
 
 @media screen and ( max-width: 640px ) {
 	#available-menu-items #available-menu-items-search .accordion-section-content {
 		top: 133px;
 	}
+
+	#available-menu-items-search .clear-results {
+		top: 90px; /* 70 section title height + 12 container padding +1 input margin +1 input border +5.5 ( 5.5 rounded to 6 is ( 31 input height - 20 button height ) / 2 ) */
+	}
 }

wp-admin/js/customize-nav-menus.js

@@ -142,16 +142,8 @@
 			} );
 
 			// Clear the search results.
-			$( '.clear-results' ).on( 'click keydown', function( event ) {
-				if ( event.type === 'keydown' && ( 13 !== event.which && 32 !== event.which ) ) { // "return" or "space" keys only
-					return;
-				}
-
-				event.preventDefault();
-
-				$( '#menu-items-search' ).val( '' ).focus();
-				event.target.value = '';
-				self.search( event );
+			$( '.clear-results' ).on( 'click', function() {
+				self.$search.val( '' ).focus().trigger( 'keyup' );
 			} );
 
 			this.$el.on( 'input', '#custom-menu-item-name.invalid, #custom-menu-item-url.invalid', function() {
@@ -208,15 +200,11 @@
 				$otherSections.fadeOut( 100 );
 				$searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
 				$searchSection.addClass( 'open' );
-				$searchSection.find( '.clear-results' )
-					.prop( 'tabIndex', 0 )
-					.addClass( 'is-visible' );
+				$searchSection.find( '.clear-results' ).addClass( 'is-visible' );
 			} else if ( '' === event.target.value ) {
 				$searchSection.removeClass( 'open' );
 				$otherSections.show();
-				$searchSection.find( '.clear-results' )
-					.prop( 'tabIndex', -1 )
-					.removeClass( 'is-visible' );
+				$searchSection.find( '.clear-results' ).removeClass( 'is-visible' );
 			}
 
 			this.searchTerm = event.target.value;

wp-includes/class-wp-customize-nav-menus.php

@@ -761,8 +761,8 @@ final class WP_Customize_Nav_Menus {
 					<input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ) ?>" aria-describedby="menu-items-search-desc" />
 					<p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
 					<span class="spinner"></span>
-					<span class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></span>
 				</div>
+				<button type="button" class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></button>
 				<ul class="accordion-section-content" data-type="search"></ul>
 			</div>
 			<div id="new-custom-menu-item" class="accordion-section">

wp-includes/version.php

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