From 0b28d597fe1857590c9719c8b41f00e77967f7d7 Mon Sep 17 00:00:00 2001 From: Dylan Barrell Date: Sun, 22 Dec 2013 11:36:43 -0500 Subject: [PATCH] Autocomplete: Announce autocomplete correctly in all ATs. Fixes #9631 Closes gh-1153 --- demos/autocomplete/categories.html | 6 +- tests/unit/autocomplete/autocomplete_core.js | 58 ++++++++++++++++---- ui/jquery.ui.autocomplete.js | 23 ++++---- 3 files changed, 65 insertions(+), 22 deletions(-) diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html index 3c436efbd..998ae9ea6 100644 --- 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( "
  • " + item.category + "
    • " ); 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 58e96755a..961aca400 100644 --- 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 f5dea64de..77024afa0 100644 --- 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(); + $( "
    " ).text( label ).appendTo( this.liveRegion ); } }, menuselect: function( event, ui ) { @@ -291,7 +292,8 @@ $.widget( "ui.autocomplete", { this.liveRegion = $( "", { 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(); + $( "
    " ).text( message ).appendTo( this.liveRegion ); } });