EUI has a good number of components composed of an input and a popover, either extending or simulating a form control.
- EuiInputPopover
- EuiComboBox
- EuiSuperSelect
- EuiColorPicker
- EuiDatePicker
- EuiSuggest
- EuiFilterGroup
- Others?
See the latest discussion below, but each of these has a slightly different interaction paradigm in regards to focus, popover open/close, and a11y more generally. I'd like to decide on an interaction spec and align each to the outcome.
Notable:
- Does the popover open on focus?
- Does the input indicate that a popover attachable (e.g., down arrow icon)? Is that indicator interactive (e.g., EuiComboBox has a button)?
- What keys do what? esc is clear, but tab and arrow down are less-so.
- Do the popovers trap focus? This will likely depend on the component and that variance is ok.
- Tabbing into the input should automatically open the popover
This is unchanged from the current behavior and different from the what happens in EuiColorPicker. I think the idea is that a user would be able to tab through the form without opening (and tabbing through) the popover if desired.
I think this brings up a good candidate for discussion. Without a screen reader, there's nothing telling keyboard users to press down to open the popover. We should probably discuss and nail down this type of behavior for all inputs with dropdowns.
The usual solution to this is:
- focus on control opens whatever it needs (in this case, focus on input opens the DatePicker)
- tab moves focus into the popover
- esc closes the popover and puts focus on the input with the popover closed
- tab moves focus to the next tabbable element on the page
Next time a user lands on the control (e.g., input), it starts over at the top where the popover opens. This does have the downside of after pressing esc the only way to open the popover is to tab out and back into the control but that's not often a dealbreaker.
We can explore other strategies (e.g., using a modifier to open the popover, adding a button to open the popover, etc) but starting with the usual solution might be a good immediate fix even while we discuss others.
Originally posted by @myasonik in #4243 (comment)
EUI has a good number of components composed of an input and a popover, either extending or simulating a form control.
See the latest discussion below, but each of these has a slightly different interaction paradigm in regards to focus, popover open/close, and a11y more generally. I'd like to decide on an interaction spec and align each to the outcome.
Notable:
The usual solution to this is:
Next time a user lands on the control (e.g., input), it starts over at the top where the popover opens. This does have the downside of after pressing esc the only way to open the popover is to tab out and back into the control but that's not often a dealbreaker.
We can explore other strategies (e.g., using a modifier to open the popover, adding a button to open the popover, etc) but starting with the usual solution might be a good immediate fix even while we discuss others.
Originally posted by @myasonik in #4243 (comment)