Ticket #36903: 36903.patch

src/wp-admin/css/customize-controls.css

@@ -1420 +1420 @@
 
 #available-widgets-filter input,
 #available-menu-items-search input {
+        width: 100%;
         padding: 6px 10px;
-        width: 100%;
+        line-height: 1.14285714; /* 16 desired line height / 14 font size. Keep 8 decimals for same cross browser rounding */
 }
 
 #available-widgets .widget-top,

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

@@ -607 +607 @@
 
 #available-menu-items-search .clear-results {
         position: absolute;
-        top: 20px;
+        top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( ( 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 +629 @@
         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 +648 @@
 
 #available-menu-items-search .spinner {
         position: absolute;
-        top: 20px;
+        top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( ( 28 input height - 20 button height ) / 2 ) */
+        right: 20px;
         margin: 0 !important;
-        right: 20px;
 }
 
 /* search results list */

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

@@ -142 +142 @@
                         } );
 
                         // 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 +200 @@
                                 $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;

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

@@ -761 +761 @@
                                         <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">