Autocomplete: popup results not read by screen-readers

There's a long discussion about this on the jquery-a11y list. I suggest going with what Drupal does because we're trying very hard not to move focus around.

Agreed that option 2 is likely best, especially for complex implementations such as custom data / categories.

That's also what Hans implemented: https://github.com/hanshillen/jquery-ui/commits/autocomplete-hh - https://github.com/hanshillen/jquery-ui/commit/b70a922f718efb55da6e6451948ced022823614c

I've been working on this issue, extending the work done by Hans.

• removes "menu" role from popup <ul> (this really isn't a menu in the context of autocomplete, and was causing problems with live region announcements)
• adds role="application" to element's parent
• announces "Autocomplete popup" when the menu appears (perhaps on a delay)
• announces items while navigating using arrow keys (in default demo), but not in multiple demo

I have a couple of questions that I think may clarify things for me.

1. Am I correct to believe that in default (single) mode the text contents of the element are replaced while navigating the menu, but that this is not the case in multiple mode?

2. Are there events that fire:

• when the populated menu appears
• when it is destroyed (or disappears)
• when an item in the menu is selected (highlighted)?

3. If the above events do not exist, what are your recommendations for the next best approximation of these 'events'?

Thanks

I did a bit more research, and would appreciate some confirmation:

1. Using the 'focus' event of the menu component I can find out which item of the menu has just received focus.

2. _suggest() executes when the menu is populated (refreshed).

3. close() executes when the menu is hidden.

Replying to [comment:5 ezufelt]:

- removes "menu" role from popup <ul> (this really isn't a menu in the context of autocomplete, and was causing problems with live region announcements)

That should be fine. I would assume there are no negative side effects to having all other ARIA roles and states set inside the menu even though it doesn't have the menu role.

- adds role="application" to element's parent

I'm a bit concerned about this because it can affect a lot of other content on the page. So far we've stayed away from ever setting an application role. We should have a longer discussion about this outside of this ticket.

I have a couple of questions that I think may clarify things for me. 1. Am I correct to believe that in default (single) mode the text contents of the element are replaced while navigating the menu, but that this is not the case in multiple mode?

Yes, but that's only the default implementation. If you call event.preventDefault() in the autocompletefocus event, then the value of the text field does not get updated during navigation. All of the multiple word demos do this, but you could do the same in a single word usage as well.

2. Are there events that fire: - when the populated menu appears

_suggest()

- when it is destroyed (or disappears)

close()

- when an item in the menu is selected (highlighted)?

The menu focus event.

https://github.com/ezufelt/jquery-ui/commit/1feec649032e20b66f005966be2ffe788ee09177

First pass at accessible autocomplete.

• Adds role="application" to input element parent*
• Adds an invisible live region
• Adds an options string to be spoken, placed in live region, when suggestions appear, defaults to "Autocomplete popup"
• Speaks name of focused menu item (suggestion)

I did quick testing and this is working in JAWS 13 + FF 8 for both default and multiple demos.

• We need to use role="application" to ensure that arrow keys are passed to the input element by screen-readers. I tried using

var elementApplicationWrapper = $("<span role='application'></span>");

this.element.replaceWith(elementApplicationWrapper).appendTo(elementApplicationWrapper);

This seemed to break things and I did not receive any suggestion popup, although the input element was a child of the span in the correct position in the DOM.

https://github.com/ezufelt/jquery-ui/commit/427815efbc031ec22139face9c016dcca1148cf6

The above commit:

• Removes the 'menu' role from the list of autocomplete suggestions
• creates a hidden live region span
• announces "Autocomplete popup" when the suggestions appear (configurable string)
• Announces each item as it is selected (sometimes twice because of application role not being enabled )
• does not have 'application' role

ToDo

• Decide if message needs to be added when search begins
• Test more thoroughly (write tests?)
• Make final decision on application role
• decide if we need to / can we remove all @role attributes from the suggestions 'menu'

Autocomplete: ARIA live region as extension, adding a messages option. Fixes #7840 - Autocomplete: popup results not read by screen-readers

Changeset: f4b2d7a4115814b64ff291e3518fe15f2dfbe390