Autocomplete: Announce autocomplete correctly in all ATs.

Fixes #9631
Closes gh-1153

Author: dylanb

demos/autocomplete/categories.html

@@ -29,11 +29,15 @@
 			var that = this,
 				currentCategory = "";
 			$.each( items, function( index, item ) {
+				var li;
 				if ( item.category != currentCategory ) {
 					ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
 					currentCategory = item.category;
 				}
-				that._renderItemData( ul, item );
+				li = that._renderItemData( ul, item );
+				if ( item.category ) {
+					li.attr( "aria-label", item.category + " : " + item.label );
+				}
 			});
 		}
 	});

tests/unit/autocomplete/autocomplete_core.js

@@ -221,40 +221,76 @@ asyncTest( "simultaneous searches (#9334)", function() {
 });
 
 test( "ARIA", function() {
-	expect( 7 );
+	expect( 13 );
 	var element = $( "#autocomplete" ).autocomplete({
 			source: [ "java", "javascript" ]
 		}),
 		liveRegion = element.autocomplete( "instance" ).liveRegion;
 
-	equal( liveRegion.text(), "", "Empty live region on create" );
+	equal( liveRegion.children().length, 0, "Empty live region on create" );
+	equal( liveRegion.attr( "aria-live" ), "assertive",
+		"Live region's aria-live attribute must be assertive" );
+	equal( liveRegion.attr( "aria-relevant" ), "additions",
+		"Live region's aria-relevant attribute must be additions" );
+	equal( liveRegion.attr( "role" ), "status",
+		"Live region's role attribute must be status" );
 
 	element.autocomplete( "search", "j" );
-	equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
+	equal( liveRegion.children().first().text(),
+		"2 results are available, use up and down arrow keys to navigate.",
 		"Live region for multiple values" );
 
 	element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
-	equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
-		"Live region not changed on focus" );
+	equal( liveRegion.children().filter( ":visible" ).text(), "java",
+		"Live region changed on keydown to announce the highlighted value" );
 
 	element.one( "autocompletefocus", function( event ) {
 		event.preventDefault();
 	});
 	element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
-	equal( liveRegion.text(), "javascript",
+	equal( liveRegion.children().filter( ":visible" ).text(), "javascript",
 		"Live region updated when default focus is prevented" );
 
 	element.autocomplete( "search", "javas" );
-	equal( liveRegion.text(), "1 result is available, use up and down arrow keys to navigate.",
+	equal( liveRegion.children().filter( ":visible" ).text(),
+		"1 result is available, use up and down arrow keys to navigate.",
 		"Live region for one value" );
 
 	element.autocomplete( "search", "z" );
-	equal( liveRegion.text(), "No search results.",
+	equal( liveRegion.children().filter( ":visible" ).text(), "No search results.",
 		"Live region for no values" );
 
-	element.autocomplete( "search", "j" );
-	equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
-		"Live region for multiple values" );
+	equal( liveRegion.children().length, 5,
+		"Should be five children in the live region after the above" );
+	equal( liveRegion.children().filter( ":visible" ).length, 1,
+		"Only one should be still visible" );
+	ok( liveRegion.children().filter( ":visible" )[ 0 ] === liveRegion.children().last()[ 0 ],
+		"The last one should be the visible one" );
+
+	element.autocomplete( "destroy" );
+	equal( liveRegion.parent().length, 0,
+		"The liveRegion should be detached after destroy" );
+});
+
+test( "ARIA, aria-label announcement", function() {
+	expect( 1 );
+	$.widget( "custom.catcomplete", $.ui.autocomplete, {
+		_renderMenu: function( ul, items ) {
+			var that = this;
+			$.each( items, function( index, item ) {
+				that._renderItemData( ul, item )
+					.attr( "aria-label", item.category + " : " + item.label );
+			});
+		}
+	});
+	var element = $( "#autocomplete" ).catcomplete({
+			source: [ { label: "anders andersson", category: "People" } ]
+		}),
+		liveRegion = element.catcomplete( "instance" ).liveRegion;
+	element.catcomplete( "search", "a" );
+	element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
+	equal( liveRegion.children().filter( ":visible" ).text(), "People : anders andersson",
+		"Live region changed on keydown to announce the highlighted value's aria-label attribute" );
 });
 
 test( "ARIA, init on detached input", function() {

ui/jquery.ui.autocomplete.js

@@ -230,6 +230,7 @@ $.widget( "ui.autocomplete", {
 				}
 			},
 			menufocus: function( event, ui ) {
+				var label, item;
 				// support: Firefox
 				// Prevent accidental activation of menu items in Firefox (#7024 #9118)
 				if ( this.isNewMenu ) {
@@ -245,19 +246,19 @@ $.widget( "ui.autocomplete", {
 					}
 				}
 
-				var item = ui.item.data( "ui-autocomplete-item" );
+				item = ui.item.data( "ui-autocomplete-item" );
 				if ( false !== this._trigger( "focus", event, { item: item } ) ) {
 					// use value to match what will end up in the input, if it was a key event
 					if ( event.originalEvent && /^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 );
+				}
+
+				// Announce the value in the liveRegion
+				label = ui.item.attr( "aria-label" ) || item.value;
+				if ( label && jQuery.trim( label ).length ) {
+					this.liveRegion.children().hide();
+					$( "<div>" ).text( label ).appendTo( this.liveRegion );
 				}
 			},
 			menuselect: function( event, ui ) {
@@ -291,7 +292,8 @@ $.widget( "ui.autocomplete", {
 
 		this.liveRegion = $( "<span>", {
 				role: "status",
-				"aria-live": "polite"
+				"aria-live": "assertive",
+				"aria-relevant": "additions"
 			})
 			.addClass( "ui-helper-hidden-accessible" )
 			.appendTo( this.document[ 0 ].body );
@@ -595,7 +597,8 @@ $.widget( "ui.autocomplete", $.ui.autocomplete, {
 		} else {
 			message = this.options.messages.noResults;
 		}
-		this.liveRegion.text( message );
+		this.liveRegion.children().hide();
+		$( "<div>" ).text( message ).appendTo( this.liveRegion );
 	}
 });