Autocomplete: Rewrite with a delay instead of appending the live region

This fixes the issue caused by https://bugs.jqueryui.com/ticket/9357.
We now empty the live region instead of appending to it, and we do so
after a brief timeout so the live region isn't updated on every mousemove
event or when quickly traversing through options.

Fixes gh-2002
Closes gh-2031

1 files changed, 46 insertions, 34 deletions

diff --git a/tests/unit/autocomplete/core.js b/tests/unit/autocomplete/core.js
index d78db3bb9..a2a36cb4c 100644
--- a/tests/unit/autocomplete/core.js
+++ b/tests/unit/autocomplete/core.js
@@ -293,6 +293,7 @@ QUnit.test( "simultaneous searches (#9334)", function( assert ) {
 } );
 
 QUnit.test( "ARIA", function( assert ) {
+	var ready = assert.async();
 	assert.expect( 13 );
 	var element = $( "#autocomplete" ).autocomplete( {
 			source: [ "java", "javascript" ]
@@ -308,43 +309,51 @@ QUnit.test( "ARIA", function( assert ) {
 		"Live region's role attribute must be status" );
 
 	element.autocomplete( "search", "j" );
-	assert.equal( liveRegion.children().first().text(),
-		"2 results are available, use up and down arrow keys to navigate.",
-		"Live region for multiple values" );
+	setTimeout( function() {
+		assert.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 } );
-	assert.equal( liveRegion.children().filter( ":visible" ).text(), "java",
-		"Live region changed on keydown to announce the highlighted value" );
+		element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
+		setTimeout( function() {
+			assert.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 } );
-	assert.equal( liveRegion.children().filter( ":visible" ).text(), "javascript",
-		"Live region updated when default focus is prevented" );
-
-	element.autocomplete( "search", "javas" );
-	assert.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" );
-	assert.equal( liveRegion.children().filter( ":visible" ).text(), "No search results.",
-		"Live region for no values" );
-
-	assert.equal( liveRegion.children().length, 5,
-		"Should be five children in the live region after the above" );
-	assert.equal( liveRegion.children().filter( ":visible" ).length, 1,
-		"Only one should be still visible" );
-	assert.ok( liveRegion.children().filter( ":visible" )[ 0 ] === liveRegion.children().last()[ 0 ],
-		"The last one should be the visible one" );
-
-	element.autocomplete( "destroy" );
-	assert.equal( liveRegion.parent().length, 0,
-		"The liveRegion should be detached after destroy" );
+			element.one( "autocompletefocus", function( event ) {
+				event.preventDefault();
+			} );
+			element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
+			setTimeout( function() {
+				assert.equal( liveRegion.children().filter( ":visible" ).text(), "javascript",
+					"Live region updated when default focus is prevented" );
+				element.autocomplete( "search", "javas" );
+				setTimeout( function() {
+					assert.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" );
+					setTimeout( function() {
+						assert.equal( liveRegion.children().filter( ":visible" ).text(), "No search results.",
+							"Live region for no values" );
+						assert.equal( liveRegion.children().length, 1,
+							"Should be one child in the live region after the above" );
+						assert.equal( liveRegion.children().filter( ":visible" ).length, 1,
+							"Only one should be still visible" );
+						assert.ok( liveRegion.children().filter( ":visible" )[ 0 ] === liveRegion.children().last()[ 0 ],
+							"The last one should be the visible one" );
+						element.autocomplete( "destroy" );
+						assert.equal( liveRegion.parent().length, 0,
+							"The liveRegion should be detached after destroy" );
+						ready();
+					}, 110 );
+				}, 110 );
+			}, 110 );
+		}, 110 );
+	}, 110 );
 } );
 
 QUnit.test( "ARIA, aria-label announcement", function( assert ) {
+	var ready = assert.async();
 	assert.expect( 1 );
 	$.widget( "custom.catcomplete", $.ui.autocomplete, {
 		_renderMenu: function( ul, items ) {
@@ -361,8 +370,11 @@ QUnit.test( "ARIA, aria-label announcement", function( assert ) {
 		liveRegion = element.catcomplete( "instance" ).liveRegion;
 	element.catcomplete( "search", "a" );
 	element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
-	assert.equal( liveRegion.children().filter( ":visible" ).text(), "People : anders andersson",
-		"Live region changed on keydown to announce the highlighted value's aria-label attribute" );
+	setTimeout( function() {
+		assert.equal( liveRegion.children().filter( ":visible" ).text(), "People : anders andersson",
+			"Live region changed on keydown to announce the highlighted value's aria-label attribute" );
+		ready();
+	}, 110 );
 } );
 
 QUnit.test( "ARIA, init on detached input", function( assert ) {