Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jan 5, 2022
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
db3b6ef
fix issue 2002 by rewriting live region after delay
bbenjamin Dec 8, 2021
ec52d38
Autocomplete: eslint and test updates
bbenjamin Dec 8, 2021
7a6ce7e
Autocomplete: 2002 Reduce menufocus timeout
bbenjamin Dec 10, 2021
fb22d35
Autocomplete: change two uses of setTimeout to call this._delay
bbenjamin Dec 15, 2021
11da513
Autocomplete: remove unneeded 'that'
bbenjamin Jan 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 46 additions & 34 deletions tests/unit/autocomplete/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
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
15 changes: 11 additions & 4 deletions ui/widgets/autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ $.widget( "ui.autocomplete", {

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

_create: function() {

Expand Down Expand Up @@ -267,8 +268,11 @@ $.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 );
var that = this;
this.liveRegionTimer = setTimeout( function() {
that.liveRegion.html( $( "<div>" ).text( label ) );
}, 100 );
}
},
menuselect: function( event, ui ) {
Expand Down Expand Up @@ -663,8 +667,11 @@ $.widget( "ui.autocomplete", $.ui.autocomplete, {
} else {
message = this.options.messages.noResults;
}
this.liveRegion.children().hide();
$( "<div>" ).text( message ).appendTo( this.liveRegion );
clearTimeout( this.liveRegionTimer );
var that = this;
this.liveRegionTimer = setTimeout( function() {
that.liveRegion.html( $( "<div>" ).text( message ) );
}, 100 );
}
} );

Expand Down