Autocomplete: Announce autocomplete correctly in all ATs.

Fixes #9631
Closes gh-1153

diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html
index 3c436efbd40631fb9cc69b434a9af83576ad89e9..998ae9ea69cf839b4e0d4c215654eb2e5af2e2c5 100644 (file)
--- a/demos/autocomplete/categories.html
+++ b/demos/autocomplete/categories.html
@@ -29,11 +29,15 @@
                        var that = this,
                                currentCategory = "";
                        $.each( items, function( index, item ) {
+                               var li;
                                if ( item.category != currentCategory ) {
                                        ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                                        currentCategory = item.category;
                                }
-                               that._renderItemData( ul, item );
+                               li = that._renderItemData( ul, item );
+                               if ( item.category ) {
+                                       li.attr( "aria-label", item.category + " : " + item.label );
+                               }
                        });
                }
        });

diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js
index 58e96755a6290e6a9bbf2e616df2209cf43ffb75..961aca40028cf45389176a8b9f7e9ed395786efb 100644 (file)
--- a/tests/unit/autocomplete/autocomplete_core.js
+++ b/tests/unit/autocomplete/autocomplete_core.js
@@ -221,40 +221,76 @@ asyncTest( "simultaneous searches (#9334)", function() {
 });
 
 test( "ARIA", function() {
-       expect( 7 );
+       expect( 13 );
        var element = $( "#autocomplete" ).autocomplete({
                        source: [ "java", "javascript" ]
                }),
                liveRegion = element.autocomplete( "instance" ).liveRegion;
 
-       equal( liveRegion.text(), "", "Empty live region on create" );
+       equal( liveRegion.children().length, 0, "Empty live region on create" );
+       equal( liveRegion.attr( "aria-live" ), "assertive",
+               "Live region's aria-live attribute must be assertive" );
+       equal( liveRegion.attr( "aria-relevant" ), "additions",
+               "Live region's aria-relevant attribute must be additions" );
+       equal( liveRegion.attr( "role" ), "status",
+               "Live region's role attribute must be status" );
 
        element.autocomplete( "search", "j" );
-       equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
+       equal( liveRegion.children().first().text(),
+               "2 results are available, use up and down arrow keys to navigate.",
                "Live region for multiple values" );
 
        element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
-       equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
-               "Live region not changed on focus" );
+       equal( liveRegion.children().filter( ":visible" ).text(), "java",
+               "Live region changed on keydown to announce the highlighted value" );
 
        element.one( "autocompletefocus", function( event ) {
                event.preventDefault();
        });
        element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
-       equal( liveRegion.text(), "javascript",
+       equal( liveRegion.children().filter( ":visible" ).text(), "javascript",
                "Live region updated when default focus is prevented" );
 
        element.autocomplete( "search", "javas" );
-       equal( liveRegion.text(), "1 result is available, use up and down arrow keys to navigate.",
+       equal( liveRegion.children().filter( ":visible" ).text(),
+               "1 result is available, use up and down arrow keys to navigate.",
                "Live region for one value" );
 
        element.autocomplete( "search", "z" );
-       equal( liveRegion.text(), "No search results.",
+       equal( liveRegion.children().filter( ":visible" ).text(), "No search results.",
                "Live region for no values" );
 
-       element.autocomplete( "search", "j" );
-       equal( liveRegion.text(), "2 results are available, use up and down arrow keys to navigate.",
-               "Live region for multiple values" );
+       equal( liveRegion.children().length, 5,
+               "Should be five children in the live region after the above" );
+       equal( liveRegion.children().filter( ":visible" ).length, 1,
+               "Only one should be still visible" );
+       ok( liveRegion.children().filter( ":visible" )[ 0 ] === liveRegion.children().last()[ 0 ],
+               "The last one should be the visible one" );
+
+       element.autocomplete( "destroy" );
+       equal( liveRegion.parent().length, 0,
+               "The liveRegion should be detached after destroy" );
+});
+
+test( "ARIA, aria-label announcement", function() {
+       expect( 1 );
+       $.widget( "custom.catcomplete", $.ui.autocomplete, {
+               _renderMenu: function( ul, items ) {
+                       var that = this;
+                       $.each( items, function( index, item ) {
+                               that._renderItemData( ul, item )
+                                       .attr( "aria-label", item.category + " : " + item.label );
+                       });
+               }
+       });
+       var element = $( "#autocomplete" ).catcomplete({
+                       source: [ { label: "anders andersson", category: "People" } ]
+               }),
+               liveRegion = element.catcomplete( "instance" ).liveRegion;
+       element.catcomplete( "search", "a" );
+       element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
+       equal( liveRegion.children().filter( ":visible" ).text(), "People : anders andersson",
+               "Live region changed on keydown to announce the highlighted value's aria-label attribute" );
 });
 
 test( "ARIA, init on detached input", function() {

diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js
index f5dea64de7d90b1c4fb2d314a30298e99271ceb0..77024afa07a80628ef9cadca552562481c82004d 100644 (file)
--- a/ui/jquery.ui.autocomplete.js
+++ b/ui/jquery.ui.autocomplete.js
@@ -230,6 +230,7 @@ $.widget( "ui.autocomplete", {
                                }
                        },
                        menufocus: function( event, ui ) {
+                               var label, item;
                                // support: Firefox
                                // Prevent accidental activation of menu items in Firefox (#7024 #9118)
                                if ( this.isNewMenu ) {
@@ -245,19 +246,19 @@ $.widget( "ui.autocomplete", {
                                        }
                                }
 
-                               var item = ui.item.data( "ui-autocomplete-item" );
+                               item = ui.item.data( "ui-autocomplete-item" );
                                if ( false !== this._trigger( "focus", event, { item: item } ) ) {
                                        // use value to match what will end up in the input, if it was a key event
                                        if ( event.originalEvent && /^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 );
+                               }
+
+                               // Announce the value in the liveRegion
+                               label = ui.item.attr( "aria-label" ) || item.value;
+                               if ( label && jQuery.trim( label ).length ) {
+                                       this.liveRegion.children().hide();
+                                       $( "<div>" ).text( label ).appendTo( this.liveRegion );
                                }
                        },
                        menuselect: function( event, ui ) {
@@ -291,7 +292,8 @@ $.widget( "ui.autocomplete", {
 
                this.liveRegion = $( "<span>", {
                                role: "status",
-                               "aria-live": "polite"
+                               "aria-live": "assertive",
+                               "aria-relevant": "additions"
                        })
                        .addClass( "ui-helper-hidden-accessible" )
                        .appendTo( this.document[ 0 ].body );
@@ -595,7 +597,8 @@ $.widget( "ui.autocomplete", $.ui.autocomplete, {
                } else {
                        message = this.options.messages.noResults;
                }
-               this.liveRegion.text( message );
+               this.liveRegion.children().hide();
+               $( "<div>" ).text( message ).appendTo( this.liveRegion );
        }
 });