version switcher dropdown not accessible

[drammock]

the version switcher does not conform to best practices for keyboard navigation / screen readers. Although it is possible to focus the switcher via tab-indexing, once focused it doesn't behave nicely (should allow arrow keys but only tabs work, visual focus highlighting inconsistent, etc)

• fix: version selector JS #1305 (comment)
• fix: version selector JS #1305 (comment)
• fix: version selector JS #1305 (comment)

[trallard]

Adding more context from a previous review comment:

Also, I'd like to point out that the version selector component is not currently keyboard focusable and operable. I tried fixing / testing by setting tabindex="0" on the parent <div> with no success, so I will need to spend more time debugging/fixing this behaviour.

The desired behaviours would be as follows:

Collapsed select - menu button

• TAB Focuses the selector button
• Space / Enter opens the list and moves focus to the current option
• Down and Up arrows expand the list

Expanded list

• Up and Down arrows move through options, changing the highlighted option (do not change selection).
• Space does nothing
• Enter closes the menu, keeping the currently highlighted option selected
• Escape closes the menu, keeping the currently highlighted option selected, and sets focus to the button

[trallard]

An up to date status of keyboard navigation can be found at #1357

cc/ @gabalafou