Conditions 629 Autocomplete Move Focus into List

[williamphelps13]

Summary

• This is behind a feature toggle so will not impact prod
• Changes:
  • Move Focus into List to try to solve the following:
    • NVDA/Firefox - the input value is read every time you navigate the dropdown options
    • JAWS/Chrome, Narrator/Edge - Cannot navigate through the dropdown options with UP + Down keys
  • Replace onBlur with eventListener that closes list only if click outside container and add tabIndex so that focus can go on list items.
  • Ensure any key press other than arrow up/down, enter, or escape, brings focus back to input.
  • Add focus onMouseEnter so that highlight and focus are always aligned.
  • Remove search onFocus functionality since this was firing with stale data whenever focusOnInput ran. Need to determine how to add back this functionality.
  • Remove updating aria text when arrow since this is now coming from focus
• Which team do you work for, does your team own the maintenance of this component? Conditions Team and Yes

Related issue(s)

• Autocomplete Accessibility Review in Staging #629

[bacitracin]

We'll want to switch this to mouseup so that users can change their mind about the action / cancel it. Check out this doc for more info: https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html#dfn-down-event

[williamphelps13]

Changed with: b32cbf1

I tried canceling the action to test this change, but even moving the mouse out of the browser window still resulted in the list closing. I read this: "They normally receive visual feedback when an item is pressed. If they discover they have selected the wrong item, they can cancel the action by moving their pointer or finger away from the target before releasing." Are you able to cancel the action in the UI now?

[bacitracin]

Doh sorry I got this one wrong, it would be mouse up when selecting the item. This is related to handleClickOutside. Let's switch it back to mouse down 😅 Sorry!