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>