Changeset 37679

Timestamp:

06/10/2016 09:21:09 PM (7 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src

Files:

• wp-admin/css/customize-nav-menus.css (modified) (6 diffs)
• wp-admin/js/customize-nav-menus.js (modified) (2 diffs)
• wp-includes/class-wp-customize-nav-menus.php (modified) (1 diff)

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

@@ -608 +608 @@
 #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;
 }
 
@@ -624 +628 @@
 #available-menu-items-search .clear-results.is-visible {
     display: block;
+}
+
+.ie8 #available-menu-items-search.loading .clear-results:before {
+    content: ""; /* help IE8 redraw the pseudo element */
 }
 
@@ -629 +637 @@
     content: "\f335";
     font: normal 20px/1 dashicons;
+    vertical-align: middle;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -640 +649 @@
 #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;
 }
 
@@ -841 +850 @@
         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 ) */
+    }
 }
 
@@ -847 +861 @@
         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 ) */
+    }
+}

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

@@ -143 +143 @@
 
             // 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' );
             } );
 
@@ -209 +201 @@
                 $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' );
             }
 

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

@@ -762 +762 @@
                     <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>