Make WordPress Core

Changeset 32891


Ignore:
Timestamp:
06/20/2015 07:21:38 PM (7 years ago)
Author:
ocean90
Message:

Customizer: Accessibility improvements for menu item searches.

  • Add a description and an aria-describedby attribute to inform users this is a "live" search.
  • Announce the number of search results via wp.a11y.speak.
  • Use aria-busy attribute to stop screen readers announcing content while the "loading more results" is running.
  • Increase the search debounce wait interval to 500ms to be consistent with other live searches.
  • If a search fails don't call wp.a11y.speak with an undefined variable.

props afercia.
see #32720.

Location:
trunk/src
Files:
2 edited

Legend:

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

    r32890 r32891  
    126126            this.sectionContent = this.$el.find( '.accordion-section-content' );
    127127
    128             this.debounceSearch = _.debounce( self.search, 250 );
     128            this.debounceSearch = _.debounce( self.search, 500 );
    129129
    130130            _.bindAll( this, 'close' );
     
    212212            } else if ( page > 1 ) {
    213213                $section.addClass( 'loading-more' );
     214                $content.attr( 'aria-busy', 'true' );
     215                wp.a11y.speak( api.Menus.data.l10n.itemsLoadingMore );
    214216            } else if ( '' === self.searchTerm ) {
    215217                $content.html( '' );
     218                wp.a11y.speak( '' );
    216219                return;
    217220            }
     
    235238                }
    236239                $section.removeClass( 'loading loading-more' );
     240                $content.attr( 'aria-busy', 'false' );
    237241                $section.addClass( 'open' );
    238242                self.loading = false;
     
    247251                    self.pages.search = self.pages.search + 1;
    248252                }
     253                if ( items && page > 1 ) {
     254                    wp.a11y.speak( api.Menus.data.l10n.itemsFoundMore.replace( '%d', items.length ) );
     255                } else if ( items && page === 1 ) {
     256                    wp.a11y.speak( api.Menus.data.l10n.itemsFound.replace( '%d', items.length ) );
     257                }
    249258            });
    250259
    251260            self.currentRequest.fail(function( data ) {
    252                 $content.empty().append( $( '<p class="nothing-found"></p>' ).text( data.message ) );
    253                 wp.a11y.speak( data.message );
     261                // data.message may be undefined, for example when typing slow and the request is aborted.
     262                if ( data.message ) {
     263                    $content.empty().append( $( '<p class="nothing-found"></p>' ).text( data.message ) );
     264                    wp.a11y.speak( data.message );
     265                }
    254266                self.pages.search = -1;
    255267            });
     
    257269            self.currentRequest.always(function() {
    258270                $section.removeClass( 'loading loading-more' );
     271                $content.attr( 'aria-busy', 'false' );
    259272                self.loading = false;
    260273                self.currentRequest = null;
  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r32889 r32891  
    292292                'taxonomyTermLabel' => __( 'Taxonomy' ),
    293293                'postTypeLabel'     => __( 'Post Type' ),
     294                'itemsFound'        => __( 'Number of items found: %d' ),
     295                'itemsFoundMore'    => __( 'Additional items found: %d' ),
     296                'itemsLoadingMore'  => __( 'Loading more results... please wait.' ),
    294297            ),
    295298            'menuItemTransport'    => 'postMessage',
     
    624627                <div class="accordion-section-title">
    625628                    <label class="screen-reader-text" for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label>
    626                     <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ) ?>" />
     629                    <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ) ?>" aria-describedby="menu-items-search-desc" />
     630                    <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
    627631                    <span class="spinner"></span>
    628632                </div>
Note: See TracChangeset for help on using the changeset viewer.