diff options
author | Ben Mullins <benm@umich.edu> | 2022-01-05 05:35:34 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-01-05 11:35:34 +0100 |
commit | 933ce5d779135ad04734f14c50b38f9a8d8564f5 (patch) | |
tree | c70e00d5c28371436a65e9070aad5ba0cfaa52ac /tests/unit | |
parent | e90096e9dd25392118c2c578f490445870ced686 (diff) | |
download | jquery-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/unit')
-rw-r--r-- | tests/unit/autocomplete/core.js | 80 |
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 ) { |