added keyboard Accessibility to dropdown links

[GypsyDangerous]

directly related to #1740

[vimkat]

Thanks for helping out again! 🚀
I don't know if a button element is the right choice here... Tagging @phucduong86, maybe he has a better idea?

[phucduong86]

Hi, sorry for the late review.
When you check for accessibility issue for these type of elements I'd suggest trying to navigate through the website with the keyboard first, and then use a Screenreader to dig more into its usability for screenreader users.
Here's some issues I found by just navigating via keyboard:

• The button automatically expanded when the focus enter the element - this is not a desirable behavior.
• Once the button is activated, there is no way of activating the links underneath using a keyboard, making these links completely inaccessible for keyboard users.
• While the button is focused, the next "tab" action remove the focus but doesn't put the focus on the next element. At this point user does not no where the focus is on the page until the next "tab" action.

Here's the desirable behaviors for the toggle button with links underneath:

• Either button or anchor element is OK as toggler since they are accessible by default (by means of keyboard/screen reader accessibility - not as a blanket rule :) )
• aria-expanded attribute should be presented on the element to let (screen reader) user know the state is "expanded" or "collapsed"
• When the button is focused: aria-expanded should be false (collapsed) and the sublinks should be hidden
• When the button is activated (space or enter keyboard key, or click), aria-expanded should be set to false (expanded) and the sublinks should be displayed, the focus should move to the first link in the list
• User should be able to navigate through the sublinks using tab keyboard
• User should be able to Crt Tab to the button and active/deactivate the button to collapse/expand the list
• The User should be able to tab through all the links within the list, after the last link the focus should be on the next button.

A bonus behavior: when the focus is on one of the links, "ESC" key should remove the links (or collapse the list) and place the focus back on the button.

Hope this is enough as a guide for you to start :)