Color Theme Picker Keyboard Trap

[aphelionz]

#Steps to reproduce (assumes ChromeVox or similar)

1. [Tab] or [Shift+Tab] to the color theme picker at the top left of the page
2. Press [Enter] to open the dropdown
3. Press [Tab] five times

Actual Result
The dropdown would close and navigation would continue to the search box

Expected Result
The focus "loops" inside of the dropdown element, trapping the keyboard.

Suggested Fixes
Review accessible select boxes and dropdowns and ensure navigation is possible and focus is not trapped. See here for a few good examples: https://pattern-library.dequelabs.com/components/selects

Additionally, if this dropdown is a dogfood element from EUI itself, the core UI component should be fixed as well.

Category: #615: Elastic UI Chrome Accessibility
Relevant WCAG Criteria: 2.1.2 No Keyboard Trap

[timroes]

The focus is trapped on purpose here, since we treat that as kind of a modal, since it would also vanish when clicking outside. You should be able to press Escape to close the context menu and focus should automatically jump to the trigger element back. We also focus the element itself when opening it, so the user will directly get the focus shift to that modal element. Also you can use arrow keys inside the context menu to navigate not just Tab.

Could you please revalidate, if that usability is okay. I think it should be aligned well with the WCAG recommendations about modals.

[aphelionz]

@timroes

I've thought more about this - the behavior is fine, but it is indicative of the same "context" problem we talk about on the calls. When a sighted user clicks the button. they see a visual context switch that signals to them that they can press escape and leave the modal. A screen reader user gets no such signal. So, I would amend the above to make my suggested fix to insert the screen reader text to "Press escape to exit menu"

This behavior applies to Elastic UI Buttons Accessibility #688 as well, for the dropdown button component as a whole.

[snide]

This was fixed with #844