Form.Autosuggestion Accessibility - Keyboard Navigation Behavior in Dropdown

[httpsmenahassan]

While working on #2435, the changes made broke keyboard navigation which prompted us to ask if the preferred behavior would be to be able to tab through dropdown item options and/or use arrow keys to flip through options.

Per Jeff W's advice on Slack:

Re Autocomplete / autosuggest implementation: I believe the
AlphaGov (UK govt design system) reference — see
https://alphagov.github.io/accessible-autocomplete/examples/ --
is consistent with the latest draft of ARIA 1.3 spec at
https://w3c.github.io/aria/#combobox
and it works will all of the screen readers we support. I suggest we use that as our reference.
It uses up and down arrow key to change selection, so I recommend going with that.

The AlphaGov example puts tabindex=-1 on each of the list items in suggestions list. The ARIA spec doesn’t seem to include that but I don’t think it matters?? Adding tabindex=0 to each option (as with the edx.org/search box) puts all items in the focus order, which is probably not a problem but I suggest we go with the tabindex=-1 method for Paragon.

TL;DR: Properly handle keyboard navigation behavior in dropdown by taking these steps

• use up/down arrow keys for navigation
• don't allow tab for navigation to happen throughout dropdown
• ensure all items in the dropdown have a tabindex=-1

[edx-semantic-release]

🎉 This issue has been resolved in version 21.1.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[edx-semantic-release]

🎉 This issue has been resolved in version 22.0.0-alpha.6 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀