Skip to content

Autocomplete: Announce autocomplete correctly in all ATs. Fixes #9631. #1153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Autocomplete: Announce autocomplete correctly in all ATs. Fixes #9631. #1153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion demos/autocomplete/categories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}
});
}
});
Expand Down
58 changes: 47 additions & 11 deletions tests/unit/autocomplete/autocomplete_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
23 changes: 13 additions & 10 deletions ui/jquery.ui.autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand All @@ -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 ) {
Expand Down Expand Up @@ -291,7 +292,8 @@ $.widget( "ui.autocomplete", {

this.liveRegion = $( "<span>", {
role: "status",
"aria-live": "polite"
"aria-live": "assertive",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is really clever, using aria-relevant="additions" and just appending nodes to the liveRegion rather than replacing the text content completely.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! :-)

"aria-relevant": "additions"
})
.addClass( "ui-helper-hidden-accessible" )
.appendTo( this.document[ 0 ].body );
Expand Down Expand Up @@ -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 );
}
});

Expand Down