Ticket #36903: 36903.3.patch

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 ( 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 +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 */
@@ -840 +849 @@
         #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 ) {
@@ -846 +860 @@
         #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 ) */
+        }
 }

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">