Accessibility issues in "Forms → Autocomplete" (strong recommendations)

[roelvangils]

• The selected and focused state use the same grey bar. It's better to differentiate more between these for easier recognition.
• The aria-expanded is not only on an element that doesn't get focus, it also stays false at all times. Make it toggle when the list opens and closes, places on the input.
• The list does not scroll when the down arrow is used to go out of the "view". The view should follow the focus like an OS list.
• Navigating the list is not announced to a screen reader as the focus doesn't change and stays on the input.
• The input used a placeholder attribute. Placeholders are hard to see for many users, and can also be very confusing as there is already text in the input. If the text is meant as an instruction, it disappears when the instruction is most needed (when using the input). If the text is meant as a label, it should be the label. Advice to remove all placeholders and use instructions where necessary.
• There is a strong disconnect in the code between the input and the list. For a good example of a listbox, I suggest starting with the Aria Authoring Practice Example of a listbox. Right now, the focus is set on the input but not on the list. This could be solved by using aria-activedescendant. This also makes it that more attributes get announced. It also has suggestions for usable keyboard shortcuts
• The version with loading text crashes easily and feels (more) unstable than the one without. Sometimes it doesn't find anything on the first letter. Other times typing 1 letter, then pressing backspace, makes it no longer find anything.
• The default version doesn't always return all results. When you load the page, put focus on the field, type b-a-t, press control+a, press delete, the field is empty. The result list gives only "batman" as suggestion.
• You can use arrows to go through the list. In this case, escape can confirm the selection. This is very unusual behaviour