Autocomplete does not announce which item you've selected

[sandbergja]

Steps to recreate

1. Turn on Voiceover
2. Go to https://pulibrary.github.io/lux-design-system/#!/Components/LuxAutocompleteInput
3. Tab to the input named "Fruit"
4. Clear the input
5. Type the character "o"
6. Use the down arrow to select "Orange". Note that it does not tell you that you've selected "Orange"
7. Use the down arrow again to select "Mango". Note that it also does not tell you about "Mango"

URL

https://pulibrary.github.io/lux-design-system/#!/Components/LuxAutocompleteInput

Severity

Medium. This is currently only used in one application (approvals), where the autocomplete behavior provides helpful, but not essential, information.

WCAG Success Criterion

WCAG Conformance level (A, AA, AAA)

User impact

Screen reader user couldn't find out what the autocomplete options are.

Recommended fix

Two possible approaches:

• Combobox Aria Authoring Practices Guide
• Accessible Autocomplete

Acceptance criteria

• Voice Over in Safari announces the item that you select with the arrow keys
• I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
  • axe dev tools
  • Lighthouse
  • Wave