Changeset 37679

Timestamp:

06/10/2016 09:21:09 PM (10 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>