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 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() { focus: function() {
// prevent value inserted on focus, update liveRegion instead // prevent value inserted on focus
$( this ).data( "autocomplete" ).liveRegion.text( ui.item.label );
return false; return false;
}, },
select: function( event, ui ) { select: function( event, ui ) {

5
demos/autocomplete/multiple.html
View File

@ -59,9 +59,8 @@
response( $.ui.autocomplete.filter( response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) ); availableTags, extractLast( request.term ) ) );
}, },
focus: function( event, ui ) { focus: function() {
// prevent value inserted on focus, update liveRegion instead // prevent value inserted on focus
$( this ).data( "autocomplete" ).liveRegion.text( ui.item.label );
return false; return false;
}, },
select: function( event, ui ) { 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) ) { if ( /^key/.test(event.originalEvent.type) ) {
this._value( item.value ); 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 ) { 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 ) { if ( $.fn.bgiframe ) {
this.menu.element.bgiframe(); this.menu.element.bgiframe();
} }
@ -284,6 +298,7 @@ $.widget( "ui.autocomplete", {
.removeAttr( "aria-autocomplete" ) .removeAttr( "aria-autocomplete" )
.removeAttr( "aria-haspopup" ); .removeAttr( "aria-haspopup" );
this.menu.element.remove(); this.menu.element.remove();
this.liveRegion.remove();
}, },
_setOption: function( key, value ) { _setOption: function( key, value ) {
@ -530,24 +545,19 @@ $.extend( $.ui.autocomplete, {
// live region extension, adding a `messages` option // 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, { $.widget( "ui.autocomplete", $.ui.autocomplete, {
options: { options: {
messages: { messages: {
noResults: "No search results.", noResults: "No search results.",
results: function(amount) { 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 ) { __response: function( content ) {
var message; var message;
this._superApply( arguments ); this._superApply( arguments );