library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-05 01:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Autocomplete: Update live region if focus event is canceled. Remove live region on destroy.

Browse Source
This commit is contained in:
Scott González 2012-05-16 09:43:49 -04:00
parent 5912d36374
commit 85639bf0fa
3 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demos/autocomplete/multiple-remote.html
View File

@ -47,8 +47,7 @@
}
},
focus: function() {
// prevent value inserted on focus, update liveRegion instead
$( this ).data( "autocomplete" ).liveRegion.text( ui.item.label );
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {

5
demos/autocomplete/multiple.html
View File

@ -59,9 +59,8 @@
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function( event, ui ) {
// prevent value inserted on focus, update liveRegion instead
$( this ).data( "autocomplete" ).liveRegion.text( ui.item.label );
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {

30
ui/jquery.ui.autocomplete.js vendored
View File

@ -228,6 +228,13 @@ $.widget( "ui.autocomplete", {
if ( /^key/.test(event.originalEvent.type) ) {
this._value( item.value );
}
} else {
// Normally the input is populated with the item's value as the
// menu is navigated, causing screen readers to notice a change and
// announce the item. Since the focus event was canceled, this doesn't
// happen, so we update the live region so that screen readers can
// still notice the change and announce it.
this.liveRegion.text( item.value );
}
},
menuselect: function( event, ui ) {
@ -261,6 +268,13 @@ $.widget( "ui.autocomplete", {
}
});
this.liveRegion = $( "<span>", {
role: "status",
"aria-live": "polite"
})
.addClass( "ui-helper-hidden-accessible" )
.insertAfter( this.element );
if ( $.fn.bgiframe ) {
this.menu.element.bgiframe();
}
@ -284,6 +298,7 @@ $.widget( "ui.autocomplete", {
.removeAttr( "aria-autocomplete" )
.removeAttr( "aria-haspopup" );
this.menu.element.remove();
this.liveRegion.remove();
},
_setOption: function( key, value ) {
@ -530,24 +545,19 @@ $.extend( $.ui.autocomplete, {
// live region extension, adding a `messages` option
// NOTE: This is an experimental API. We are still investigating
// a full solution for string manipulation and internationalization.
$.widget( "ui.autocomplete", $.ui.autocomplete, {
options: {
messages: {
noResults: "No search results.",
results: function(amount) {
return amount + ( amount > 1 ? " results are" : " result is" ) + " available, use up and down arrow keys to navigate.";
return amount + ( amount > 1 ? " results are" : " result is" ) +
" available, use up and down arrow keys to navigate.";
}
}
},
_create: function() {
this._super();
this.liveRegion = $( "<span>", {
role: "status",
"aria-live": "polite"
})
.addClass( "ui-helper-hidden-accessible" )
.insertAfter( this.element );
},
__response: function( content ) {
var message;
this._superApply( arguments );