2565: Scalable keyboard accessibility for Dropdown in User Settings Dialog

[wdoberschuetz]

Changes proposed in this pull request:

• handling of the keyboard up and down arrows, as well as confirmation with enter as per description in the ticket

Related issue(s)
#2565

[UlianaMunich]

Please make sure the selector of the dropdown can be applied to any dropdown independently from the language, index, aria-label, placeholder, etc. Most likely the unique class or id added to the HTML might help. Keeping in mind there might be different content inside of the dropdown we call "language dropdown" and there could be multiple dropdowns on the same view.

[UlianaMunich]

Couple of things to adjust from my side.

• There is an example that DXP is referring to and using a lot when it comes to components' behavior. here. Please use it to mimic the behavior in our code.

• The dropdown can't be opened now on the "Enter" key-press, same as it does now on the "Space" key-press. Please check it. It did working the past

• Regarding the active state of the selected item in the dropdown. When the dropdown is open, the focus has to be on a selected item. Once the arrow up or down is pressed, the focus needs to show which item is in focus without adding the "is-sected" class. The "is-selected" class is only applied if the "Enter" key was pressed.

• if you might have a possibility to add E2E tests, it would be amazing.

Thank you!

[UlianaMunich]

Here is an example of the arrow behavior from the openUI5. When a user clicks on the arrow the focus should show the navigation, while the selected item stays the same. Once a user clicks on Enter the new item is selected.

[UlianaMunich]

these lines repeated quite often, could you optimize it and remove console.log?

[UlianaMunich]

LGTM! Great job!