Skip to content

Commit

Permalink
Autocomplete: Rewrite with a delay instead of appending the live region
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@bbenjamin
bbenjamin committed Jan 5, 2022
1 parent e90096e commit 933ce5d
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 38 deletions.
80 changes: 46 additions & 34 deletions tests/unit/autocomplete/core.js
View file
Expand Up @@ -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" ]
Expand All @@ -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 ) {
Expand All @@ -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 ) {
Expand Down
13 changes: 9 additions & 4 deletions ui/widgets/autocomplete.js
View file
Expand Up @@ -66,6 +66,7 @@ $.widget( "ui.autocomplete", {

requestIndex: 0,
pending: 0,
liveRegionTimer: null,

_create: function() {

Expand Down Expand Up @@ -267,8 +268,10 @@ $.widget( "ui.autocomplete", {
// Announce the value in the liveRegion
label = ui.item.attr( "aria-label" ) || item.value;
if ( label && String.prototype.trim.call( label ).length ) {
this.liveRegion.children().hide();
$( "<div>" ).text( label ).appendTo( this.liveRegion );
clearTimeout( this.liveRegionTimer );
this.liveRegionTimer = this._delay( function() {
this.liveRegion.html( $( "<div>" ).text( label ) );
}, 100 );
}
},
menuselect: function( event, ui ) {
Expand Down Expand Up @@ -663,8 +666,10 @@ $.widget( "ui.autocomplete", $.ui.autocomplete, {
} else {
message = this.options.messages.noResults;
}
this.liveRegion.children().hide();
$( "<div>" ).text( message ).appendTo( this.liveRegion );
clearTimeout( this.liveRegionTimer );
this.liveRegionTimer = this._delay( function() {
this.liveRegion.html( $( "<div>" ).text( message ) );
}, 100 );
}
} );

Expand Down

0 comments on commit 933ce5d

Please sign in to comment.