aboutsummaryrefslogtreecommitdiffstats
path: root/tests
diff options
context:
space:
mode:
authorBen Mullins <benm@umich.edu>2022-01-05 05:35:34 -0500
committerGitHub <noreply@github.com>2022-01-05 11:35:34 +0100
commit933ce5d779135ad04734f14c50b38f9a8d8564f5 (patch)
treec70e00d5c28371436a65e9070aad5ba0cfaa52ac /tests
parente90096e9dd25392118c2c578f490445870ced686 (diff)
downloadjquery-ui-933ce5d779135ad04734f14c50b38f9a8d8564f5.tar.gz
jquery-ui-933ce5d779135ad04734f14c50b38f9a8d8564f5.zip
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
Diffstat (limited to 'tests')
-rw-r--r--tests/unit/autocomplete/core.js80
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 ) {