diff options
| -rw-r--r-- | demos/autocomplete/multiple-remote.html | 3 | ||||
| -rw-r--r-- | demos/autocomplete/multiple.html | 5 | ||||
| -rw-r--r-- | ui/jquery.ui.autocomplete.js | 30 |
3 files changed, 23 insertions, 15 deletions
diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html index 00d739967..378e449d5 100644 --- a/demos/autocomplete/multiple-remote.html +++ b/demos/autocomplete/multiple-remote.html @@ -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 ) { diff --git a/demos/autocomplete/multiple.html b/demos/autocomplete/multiple.html index 3d1326591..e3f84b65d 100644 --- a/demos/autocomplete/multiple.html +++ b/demos/autocomplete/multiple.html @@ -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 ) { diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js index fa15bc278..1fc01d7a4 100644 --- a/ui/jquery.ui.autocomplete.js +++ b/ui/jquery.ui.autocomplete.js @@ -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 ); |