From 85639bf0fa39427d8de1dc60131f746045ba4ddc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= <scott.gonzalez@gmail.com>
Date: Wed, 16 May 2012 09:43:49 -0400
Subject: [PATCH] Autocomplete: Update live region if focus event is canceled.
 Remove live region on destroy.

---
 demos/autocomplete/multiple-remote.html |  3 +--
 demos/autocomplete/multiple.html        |  5 ++---
 ui/jquery.ui.autocomplete.js            | 30 ++++++++++++++++---------
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html
index 00d739967..378e449d5 100644
--- a/demos/autocomplete/multiple-remote.html
+++ b/demos/autocomplete/multiple-remote.html
@@ -47,8 +47,7 @@
 					}
 				},
 				focus: function() {
-					// prevent value inserted on focus, update liveRegion instead
-					$( this ).data( "autocomplete" ).liveRegion.text( ui.item.label );
+					// prevent value inserted on focus
 					return false;
 				},
 				select: function( event, ui ) {
diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html
index 3d1326591..e3f84b65d 100644
--- a/demos/autocomplete/multiple.html
+++ b/demos/autocomplete/multiple.html
@@ -59,9 +59,8 @@
 					response( $.ui.autocomplete.filter(
 						availableTags, extractLast( request.term ) ) );
 				},
-				focus: function( event, ui ) {
-					// prevent value inserted on focus, update liveRegion instead
-					$( this ).data( "autocomplete" ).liveRegion.text( ui.item.label );
+				focus: function() {
+					// prevent value inserted on focus
 					return false;
 				},
 				select: function( event, ui ) {
diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js
index fa15bc278..1fc01d7a4 100644
--- a/ui/jquery.ui.autocomplete.js
+++ b/ui/jquery.ui.autocomplete.js
@@ -228,6 +228,13 @@ $.widget( "ui.autocomplete", {
 					if ( /^key/.test(event.originalEvent.type) ) {
 						this._value( item.value );
 					}
+				} else {
+					// Normally the input is populated with the item's value as the
+					// menu is navigated, causing screen readers to notice a change and
+					// announce the item. Since the focus event was canceled, this doesn't
+					// happen, so we update the live region so that screen readers can
+					// still notice the change and announce it.
+					this.liveRegion.text( item.value );
 				}
 			},
 			menuselect: function( event, ui ) {
@@ -261,6 +268,13 @@ $.widget( "ui.autocomplete", {
 			}
 		});
 
+		this.liveRegion = $( "<span>", {
+				role: "status",
+				"aria-live": "polite"
+			})
+			.addClass( "ui-helper-hidden-accessible" )
+			.insertAfter( this.element );
+
 		if ( $.fn.bgiframe ) {
 			 this.menu.element.bgiframe();
 		}
@@ -284,6 +298,7 @@ $.widget( "ui.autocomplete", {
 			.removeAttr( "aria-autocomplete" )
 			.removeAttr( "aria-haspopup" );
 		this.menu.element.remove();
+		this.liveRegion.remove();
 	},
 
 	_setOption: function( key, value ) {
@@ -530,24 +545,19 @@ $.extend( $.ui.autocomplete, {
 
 
 // live region extension, adding a `messages` option
+// NOTE: This is an experimental API. We are still investigating
+// a full solution for string manipulation and internationalization.
 $.widget( "ui.autocomplete", $.ui.autocomplete, {
 	options: {
 		messages: {
 			noResults: "No search results.",
 			results: function(amount) {
-				return amount + ( amount > 1 ? " results are" : " result is" ) +  " available, use up and down arrow keys to navigate.";
+				return amount + ( amount > 1 ? " results are" : " result is" ) +
+					" available, use up and down arrow keys to navigate.";
 			}
 		}
 	},
-	_create: function() {
-		this._super();
-		this.liveRegion = $( "<span>", {
-				role: "status",
-				"aria-live": "polite"
-			})
-			.addClass( "ui-helper-hidden-accessible" )
-			.insertAfter( this.element );
-	},
+
 	__response: function( content ) {
 		var message;
 		this._superApply( arguments );