Skip to content

Commit 85639bf

Browse files
committed
Autocomplete: Update live region if focus event is canceled. Remove live region on destroy.
1 parent 5912d36 commit 85639bf

File tree

3 files changed

+23
-15
lines changed

3 files changed

+23
-15
lines changed

demos/autocomplete/multiple-remote.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,7 @@
4747
}
4848
},
4949
focus: function() {
50-
// prevent value inserted on focus, update liveRegion instead
51-
$( this ).data( "autocomplete" ).liveRegion.text( ui.item.label );
50+
// prevent value inserted on focus
5251
return false;
5352
},
5453
select: function( event, ui ) {

demos/autocomplete/multiple.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,8 @@
5959
response( $.ui.autocomplete.filter(
6060
availableTags, extractLast( request.term ) ) );
6161
},
62-
focus: function( event, ui ) {
63-
// prevent value inserted on focus, update liveRegion instead
64-
$( this ).data( "autocomplete" ).liveRegion.text( ui.item.label );
62+
focus: function() {
63+
// prevent value inserted on focus
6564
return false;
6665
},
6766
select: function( event, ui ) {

ui/jquery.ui.autocomplete.js

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,13 @@ $.widget( "ui.autocomplete", {
228228
if ( /^key/.test(event.originalEvent.type) ) {
229229
this._value( item.value );
230230
}
231+
} else {
232+
// Normally the input is populated with the item's value as the
233+
// menu is navigated, causing screen readers to notice a change and
234+
// announce the item. Since the focus event was canceled, this doesn't
235+
// happen, so we update the live region so that screen readers can
236+
// still notice the change and announce it.
237+
this.liveRegion.text( item.value );
231238
}
232239
},
233240
menuselect: function( event, ui ) {
@@ -261,6 +268,13 @@ $.widget( "ui.autocomplete", {
261268
}
262269
});
263270

271+
this.liveRegion = $( "<span>", {
272+
role: "status",
273+
"aria-live": "polite"
274+
})
275+
.addClass( "ui-helper-hidden-accessible" )
276+
.insertAfter( this.element );
277+
264278
if ( $.fn.bgiframe ) {
265279
this.menu.element.bgiframe();
266280
}
@@ -284,6 +298,7 @@ $.widget( "ui.autocomplete", {
284298
.removeAttr( "aria-autocomplete" )
285299
.removeAttr( "aria-haspopup" );
286300
this.menu.element.remove();
301+
this.liveRegion.remove();
287302
},
288303

289304
_setOption: function( key, value ) {
@@ -530,24 +545,19 @@ $.extend( $.ui.autocomplete, {
530545

531546

532547
// live region extension, adding a `messages` option
548+
// NOTE: This is an experimental API. We are still investigating
549+
// a full solution for string manipulation and internationalization.
533550
$.widget( "ui.autocomplete", $.ui.autocomplete, {
534551
options: {
535552
messages: {
536553
noResults: "No search results.",
537554
results: function(amount) {
538-
return amount + ( amount > 1 ? " results are" : " result is" ) + " available, use up and down arrow keys to navigate.";
555+
return amount + ( amount > 1 ? " results are" : " result is" ) +
556+
" available, use up and down arrow keys to navigate.";
539557
}
540558
}
541559
},
542-
_create: function() {
543-
this._super();
544-
this.liveRegion = $( "<span>", {
545-
role: "status",
546-
"aria-live": "polite"
547-
})
548-
.addClass( "ui-helper-hidden-accessible" )
549-
.insertAfter( this.element );
550-
},
560+
551561
__response: function( content ) {
552562
var message;
553563
this._superApply( arguments );

0 commit comments

Comments
 (0)