From 724b22938ec408aae6865bf99b8080dfbd6b4c75 Mon Sep 17 00:00:00 2001
From: "Dominik Schilling (ocean90)" <ocean90@git.wordpress.org>
Date: Sat, 20 Jun 2015 19:21:38 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@32891 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/customize-nav-menus.js        | 19 ++++++++++++++++---
 .../class-wp-customize-nav-menus.php          |  6 +++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/wp-admin/js/customize-nav-menus.js b/src/wp-admin/js/customize-nav-menus.js
index 4b8582b820..e9ee86f961 100644
--- a/src/wp-admin/js/customize-nav-menus.js
+++ b/src/wp-admin/js/customize-nav-menus.js
@@ -125,7 +125,7 @@
 			this.$search = $( '#menu-items-search' );
 			this.sectionContent = this.$el.find( '.accordion-section-content' );
 
-			this.debounceSearch = _.debounce( self.search, 250 );
+			this.debounceSearch = _.debounce( self.search, 500 );
 
 			_.bindAll( this, 'close' );
 
@@ -211,8 +211,11 @@
 				return;
 			} 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;
 			}
 
@@ -234,6 +237,7 @@
 					$content.empty();
 				}
 				$section.removeClass( 'loading loading-more' );
+				$content.attr( 'aria-busy', 'false' );
 				$section.addClass( 'open' );
 				self.loading = false;
 				items = new api.Menus.AvailableItemCollection( data.items );
@@ -246,16 +250,25 @@
 				} else {
 					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;
 			});
 
 			self.currentRequest.always(function() {
 				$section.removeClass( 'loading loading-more' );
+				$content.attr( 'aria-busy', 'false' );
 				self.loading = false;
 				self.currentRequest = null;
 			});
diff --git a/src/wp-includes/class-wp-customize-nav-menus.php b/src/wp-includes/class-wp-customize-nav-menus.php
index 83c7abb469..b15269d68b 100644
--- a/src/wp-includes/class-wp-customize-nav-menus.php
+++ b/src/wp-includes/class-wp-customize-nav-menus.php
@@ -291,6 +291,9 @@ final class WP_Customize_Nav_Menus {
 				'pendingTitleTpl'   => __( '%s (Pending)' ),
 				'taxonomyTermLabel' => __( 'Taxonomy' ),
 				'postTypeLabel'     => __( 'Post Type' ),
+				'itemsFound'        => __( 'Number of items found: %d' ),
+				'itemsFoundMore'    => __( 'Additional items found: %d' ),
+				'itemsLoadingMore'  => __( 'Loading more results... please wait.' ),
 			),
 			'menuItemTransport'    => 'postMessage',
 			'phpIntMax'            => PHP_INT_MAX,
@@ -623,7 +626,8 @@ final class WP_Customize_Nav_Menus {
 			<div id="available-menu-items-search" class="accordion-section cannot-expand">
 				<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>
 				<div class="accordion-section-content" data-type="search"></div>