Make WordPress Core

Changeset 37679


Ignore:
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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-nav-menus.css

    r37153 r37679  
    608608#available-menu-items-search .clear-results {
    609609    position: absolute;
    610     top: 20px;
     610    top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( 4 is ( 28 input height - 20 button height ) / 2 ) */
    611611    right: 20px;
    612612    width: 20px;
    613613    height: 20px;
     614    padding: 0;
     615    border: 0;
    614616    cursor: pointer;
     617    background: none;
    615618    color: #a00;
    616619    text-decoration: none;
     620    outline: 0;
    617621}
    618622
     
    624628#available-menu-items-search .clear-results.is-visible {
    625629    display: block;
     630}
     631
     632.ie8 #available-menu-items-search.loading .clear-results:before {
     633    content: ""; /* help IE8 redraw the pseudo element */
    626634}
    627635
     
    629637    content: "\f335";
    630638    font: normal 20px/1 dashicons;
     639    vertical-align: middle;
    631640    -webkit-font-smoothing: antialiased;
    632641    -moz-osx-font-smoothing: grayscale;
     
    640649#available-menu-items-search .spinner {
    641650    position: absolute;
    642     top: 20px;
     651    top: 18px; /* 12 container padding +1 input margin +1 input border +4 ( ( 28 input height - 20 button height ) / 2 ) */
     652    right: 20px;
    643653    margin: 0 !important;
    644     right: 20px;
    645654}
    646655
     
    841850        top: 63px;
    842851    }
     852
     853    #available-menu-items-search .spinner,
     854    #available-menu-items-search .clear-results {
     855        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 ) */
     856    }
    843857}
    844858
     
    847861        top: 133px;
    848862    }
    849 }
     863
     864    #available-menu-items-search .clear-results {
     865        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 ) */
     866    }
     867}
  • trunk/src/wp-admin/js/customize-nav-menus.js

    r37347 r37679  
    143143
    144144            // Clear the search results.
    145             $( '.clear-results' ).on( 'click keydown', function( event ) {
    146                 if ( event.type === 'keydown' && ( 13 !== event.which && 32 !== event.which ) ) { // "return" or "space" keys only
    147                     return;
    148                 }
    149 
    150                 event.preventDefault();
    151 
    152                 $( '#menu-items-search' ).val( '' ).focus();
    153                 event.target.value = '';
    154                 self.search( event );
     145            $( '.clear-results' ).on( 'click', function() {
     146                self.$search.val( '' ).focus().trigger( 'keyup' );
    155147            } );
    156148
     
    209201                $searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );
    210202                $searchSection.addClass( 'open' );
    211                 $searchSection.find( '.clear-results' )
    212                     .prop( 'tabIndex', 0 )
    213                     .addClass( 'is-visible' );
     203                $searchSection.find( '.clear-results' ).addClass( 'is-visible' );
    214204            } else if ( '' === event.target.value ) {
    215205                $searchSection.removeClass( 'open' );
    216206                $otherSections.show();
    217                 $searchSection.find( '.clear-results' )
    218                     .prop( 'tabIndex', -1 )
    219                     .removeClass( 'is-visible' );
     207                $searchSection.find( '.clear-results' ).removeClass( 'is-visible' );
    220208            }
    221209
  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r37491 r37679  
    762762                    <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
    763763                    <span class="spinner"></span>
    764                     <span class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></span>
    765764                </div>
     765                <button type="button" class="clear-results"><span class="screen-reader-text"><?php _e( 'Clear Results' ); ?></span></button>
    766766                <ul class="accordion-section-content" data-type="search"></ul>
    767767            </div>
Note: See TracChangeset for help on using the changeset viewer.