Changeset 32891

Timestamp:

06/20/2015 07:21:38 PM (11 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:

• wp-admin/js/customize-nav-menus.js (modified) (5 diffs)
• wp-includes/class-wp-customize-nav-menus.php (modified) (2 diffs)

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

@@ -126 +126 @@
                         this.sectionContent = this.$el.find( '.accordion-section-content' );
 
-                        this.debounceSearch = _.debounce( self.search, 250 );
+                        this.debounceSearch = _.debounce( self.search, 500 );
 
                         _.bindAll( this, 'close' );
@@ -212 +212 @@
                         } else if ( page > 1 ) {
                                 $section.addClass( 'loading-more' );
+                                $content.attr( 'aria-busy', 'true' );
+                                wp.a11y.speak( api.Menus.data.l10n.itemsLoadingMore );
                         } else if ( '' === self.searchTerm ) {
                                 $content.html( '' );
+                                wp.a11y.speak( '' );
                                 return;
                         }
@@ -235 +238 @@
                                 }
                                 $section.removeClass( 'loading loading-more' );
+                                $content.attr( 'aria-busy', 'false' );
                                 $section.addClass( 'open' );
                                 self.loading = false;
@@ -247 +251 @@
                                         self.pages.search = self.pages.search + 1;
                                 }
+                                if ( items && page > 1 ) {
+                                        wp.a11y.speak( api.Menus.data.l10n.itemsFoundMore.replace( '%d', items.length ) );
+                                } else if ( items && page === 1 ) {
+                                        wp.a11y.speak( api.Menus.data.l10n.itemsFound.replace( '%d', items.length ) );
+                                }
                         });
 
                         self.currentRequest.fail(function( data ) {
-                                $content.empty().append( $( '<p class="nothing-found"></p>' ).text( data.message ) );
-                                wp.a11y.speak( data.message );
+                                // data.message may be undefined, for example when typing slow and the request is aborted.
+                                if ( data.message ) {
+                                        $content.empty().append( $( '<p class="nothing-found"></p>' ).text( data.message ) );
+                                        wp.a11y.speak( data.message );
+                                }
                                 self.pages.search = -1;
                         });
@@ -257 +269 @@
                         self.currentRequest.always(function() {
                                 $section.removeClass( 'loading loading-more' );
+                                $content.attr( 'aria-busy', 'false' );
                                 self.loading = false;
                                 self.currentRequest = null;

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

@@ -292 +292 @@
                                 'taxonomyTermLabel' => __( 'Taxonomy' ),
                                 'postTypeLabel'     => __( 'Post Type' ),
+                                'itemsFound'        => __( 'Number of items found: %d' ),
+                                'itemsFoundMore'    => __( 'Additional items found: %d' ),
+                                'itemsLoadingMore'  => __( 'Loading more results... please wait.' ),
                         ),
                         'menuItemTransport'    => 'postMessage',
@@ -624 +627 @@
                                 <div class="accordion-section-title">
                                         <label class="screen-reader-text" for="menu-items-search"><?php _e( 'Search Menu Items' ); ?></label>
-                                        <input type="text" id="menu-items-search" placeholder="<?php esc_attr_e( 'Search menu items&hellip;' ) ?>" />
+                                        <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>
                                 </div>