library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Ben Mullins 2022-01-05 05:35:34 -05:00 committed by GitHub
parent e90096e9dd
commit 933ce5d779
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
tests/unit/autocomplete/core.js
View File

@ -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 ) {

13
ui/widgets/autocomplete.js
View File

@ -66,6 +66,7 @@ $.widget( "ui.autocomplete", {
requestIndex: 0,
pending: 0,
liveRegionTimer: null,
_create: function() {
@ -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 ) {
@ -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 );
}
} );