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

diff --git a/demos/autocomplete/multiple-remote.html b/demos/autocomplete/multiple-remote.html
index 00d739967655415e999bcaff2cff3be2434ffc6e..378e449d5faae44010dff44009fcf5e4e911f4d3 100644 (file)
--- 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 3d1326591afbf5ea017ab1a72863d490d745a469..e3f84b65d07dcc1eed9182740f0b458ca81c5a92 100644 (file)
--- 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 fa15bc27881c2eb260fd52887d911589247c7dfb..1fc01d7a4d2537534f06636aee46e9b5da5dfe4f 100644 (file)
--- 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 );