I am developing a combo box which predicts the cities from the city list. When the user types the minimum of 3 letters and if the city list box has at least one search result, the result should be auto populated to the textbox without using the down arrow key.
For ex: if the user types SYD and if the predicted result has SYDNEY,Australia , the value of the textbox will be dynamically updated to SYDNEY,Australia.
NVDA is reading the updated text SYDNEY,Australia. JAWS is reading only those 3 letters(SYD) but not the updated text.
I have set the following attributes to the textbox "aria-autocomplete":"both","aria-live":"assertive"(have tried all the 3 values of aria-live). Still it couldn't help.
var myTimer;
this.element
.addClass( "ui-autocomplete-input" )
.attr( "autocomplete", "off" )
// TODO verify these actually work as intended
.attr({
role: "textbox",
"aria-autocomplete": "both",
"aria-haspopup": "true",
"aria-live":"assertive"
})
The following code is to select values from the city list:
clearTimeout(myTimer);
thisInstance = this;
myTimer=setTimeout(function () {
if(thisInstance.menu.element.find('ul li.ui-menu-item a.ui-corner-all').length == 1) {
var event = jQuery.Event("keydown");
event.which = 0;
event.keyCode = 40;
var item = thisInstance.menu.element.find('ul li.ui-menu-item');
thisInstance.menu.active = item.eq(0).children('a')
.attr("id", "ui-active-menuitem")
.end();
thisInstance.menu._trigger("focus", event, { item: item });
}}
, 600, this);
Could anyone please answer?