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 1 Packages Projects Releases Wiki Activity

Autocomplete: Announce autocomplete correctly in all ATs.

Browse Source 
Fixes #9631
Closes gh-1153
This commit is contained in:
Dylan Barrell 2013-12-22 11:36:43 -05:00 committed by Jörn Zaefferer
parent 6ec452cc63
commit 0b28d597fe
3 changed files with 65 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demos/autocomplete/categories.html
View File

@ -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 );
}
});
}
});

58
tests/unit/autocomplete/autocomplete_core.js
View File

@ -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() {

23
ui/jquery.ui.autocomplete.js vendored
View File

@ -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 );
}
});