A11y keyboard control AutoComplete nonstandard drop-down list filter

[DaveBest99]

Bug, feature request, or proposal:

Bug: AutoComplete Drop-Down list does not display States as expected.

What is the expected behavior?

With focus in an empty text box, type any letter key. If any of the available choices begin with the letter typed, those choices are displayed in a drop down. If the letter typed does not match any of the available choices the drop-down list is not displayed and the focus remains in the text box, and the user is allowed to press up/down arrow keys in the list box. Until the user presses the arrow keys to highlight a particular choice, only the typed letters are displayed in the text box.

What is the current behavior?

Currently the screen reader user cannot see what is in the Edit box, and filtered list items with the typed text that appears anywhere in the item is displayed.

What are the steps to reproduce?

Use the keyboard with mouse disconnected and screen reader running.

What is the use-case or motivation for changing an existing behavior?

WCAG standard keyboard controls provide a consistent behaviour, and a consistent filter listing.

Which versions of Angular, Material, OS, browsers are affected?

Windows10 browsers and screen readers.

Is there anything else we should know?

Typing characters moves focus to any list item that has that letter in the State name. When focus is on "Alabama", pressing "n" moves focus to "Arizona" instead of "Nebraska". Pressing up/down arrow keys only shows those States that have that letter in the name, instead of those that start with that letter. Focus does not stay in the Edit box until an arrow key is pressed. Aria-alert could be used to announce the list item without moving the focus from the Edit box.

[kara]

The filter is controlled by the user, not the autocomplete, so this is an issue with our demo. We should be using a demo filter that is more a11y-friendly. Will fix to filter by beginning of the string.

[DaveBest99]

When you say “the filter is controlled by the user”, do you mean the end-user or the web developer Autocomplete user? If the Autocomplete implementor wishes to use a nonstandard filter, then the component guidelines should instruct the implementor to include text below the Edit Combo box explaining the filter criteria. The AutoComplete component could be used for many different list selections that require specific filter criteria. David From: Kara [mailto:[email protected]] Sent: March 2, 2017 08:48 PM To: angular/material2 Cc: David Best; Author Subject: Re: [angular/material2] A11y keyboard control AutoComplete nonstandard drop-down list filter (#3373) The filter is controlled by the user, not the autocomplete, so this is an issue with our demo. We should be using a demo filter that is more a11y-friendly. Will fix to filter by beginning of the string. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3373 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/AVPBNrG12-GHuBTpW1wX_bbJ3vHcd3uvks5rh3E-gaJpZM4MQhM0> . <https://github.com/notifications/beacon/AVPBNmy_EfwhoNgPSeupSpDaN3y0D0jkks5rh3E-gaJpZM4MQhM0.gif>

[kara]

Apologies, I mean the web developer (not the end user). We can also add some guidance in the docs that recommends adding instructional info below for different filtering.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}