[Unified Search] Improve accessibility of flex width comboboxes #171439

cee-chen · 2023-11-16T19:04:39Z

Summary

.blur()ing focus from the combobox was done for the custom flex/width behavior, but is an accessibility issue as it strands focus for keyboard and screen reader users (see elastic/eui#7279).

I've worked around this by focusing the dropdown arrow toggle button instead of blurring focus, and modifying the CSS selectors from :focus-within to :has to only expand the combobox width on input focus. This has the added bonus of removing an unnecessary extra onFocus workaround (see elastic/eui#7170).

While here, I also noticed a bug with a disabled cursor appearing that I fixed.

Checklist

~~[ ] Unit or functional tests were updated or added to match the most common scenarios~~ None found
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

… user focus

- use `:has` rather than `:focus-within` for determining when the combobox should be embiggened, so that the dropdown arrow focus doesn't trigger the increase

- can be reverted once elastic#170716 merges

cee-chen · 2023-11-16T19:06:51Z

src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts

@@ -26,9 +26,13 @@ export const fieldAndParamCss = (euiTheme: EuiThemeComputed) => css`
  .euiFormRow {
    max-width: 800px;
  }
-  &:focus-within {
+  // Expand the combobox if the dropdown is open or the input has focus
+  &:has(input[aria-expanded='true'], input:focus) {


Quick note: I'm aware that latest production Firefox currently does not support :has (caniuse link), however it will by release 120 (slated for mid December), and it also works when the experimental flag is enabled.

IMO, this is reason enough to move forward with :has() especially as I see the flex width UX as a progressive enhancement (it's nice to have to show more text, but not a must have).

I agree with moving forward on using the has() selector. Showing more text is exactly the spirit of progressive enhancement, and leaves no one with a less-usable experience. Great call Cee!

kibana-ci · 2023-11-16T19:45:14Z

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`unifiedSearch`	213.7KB	213.8KB	+156.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

andreadelrio · 2023-11-17T22:09:08Z

Thanks for taking this on @cee-chen. I thought we were going to get rid of this workaround (expand input width on focus) with the release of panelMinWidth in EuiComboBox. @timductive can you confirm what the direction should be here?

cee-chen · 2023-11-20T05:08:35Z

Oh, I had no idea! That would be even better!! :)

mbondyra

Nice improvement! Thank you 🥇

1Copenut

👍 The focus landing on the Open combobox button is a marked improvement for UX. I was able to traverse backwards using they keyboard + screenreader, hear the selected item, and open the combobox in one move. This pattern has a small level of user discovery required, but I feel will be internalized quickly.

1Copenut · 2023-11-20T15:08:38Z

src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts

@@ -26,9 +26,13 @@ export const fieldAndParamCss = (euiTheme: EuiThemeComputed) => css`
  .euiFormRow {
    max-width: 800px;
  }
-  &:focus-within {
+  // Expand the combobox if the dropdown is open or the input has focus
+  &:has(input[aria-expanded='true'], input:focus) {


I agree with moving forward on using the has() selector. Showing more text is exactly the spirit of progressive enhancement, and leaves no one with a less-usable experience. Great call Cee!

timductive · 2023-11-20T18:01:54Z

We talked about whether to remove this or not and the answer was that the unified search can keep the flex-width solution as it has another small benefit of showing the currently selected value text

timductive · 2023-11-20T18:02:25Z

This seems reasonable to me @cee-chen!

cee-chen · 2023-11-20T18:11:45Z

another small benefit of showing the currently selected value text

To be honest, knowing now that removing this flex behavior is an option - I'm not sure I consider this benefit enough to keep it in 😅 Especially with recent EuiComboBox plain text changes (that will land in Kibana main with #170716), the selected text will always be visible to users the same way a text input is (via arrow keys):

I'd love to instead move forward with Andrea's proposal of removing the behavior totally combined with panelMinWidth. my 2c is that this is a better and less unexpected/jarring UX than the combobox widths changing dynamically.

mbondyra · 2023-11-22T13:22:25Z

@cee-chen @timductive I implemented the panelMinWidth solution for the same problem in other places in Kibana comboboxes and decided to see how it would look if we choose it instead of merging this PR. Please take a look at the video below and this PR (it's the last commit which I can easily revert if we decide to stick with the solution from this PR.

Nov-22-2023.14-20-48.mp4

cee-chen · 2023-11-22T15:49:19Z

I love it! You can also use inputProps={{ anchorPosition: 'downRight' }} for the rightmost combobox to have it grow to the left!

JasonStoltz · 2023-12-06T17:16:47Z

@timductive @andreadelrio @mbondyra @nickofthyme

Hey all. Cee is OOO for the next couple of weeks and I just wanted to close the loop on this one.

It sounds to me like this combo box will be changing to use a combination of panelMinWidth and singleSelection={{ asPlainText: true }}, rather than the flex width behavior, which effectively solves the long value issues that the flex width behavior was meant to address.

Changing to this new behavior will solve the core accessibility issue that this PR was meant to address, making this PR unnecessary.

For that reason, I'm going to close this PR. If I've misstated anything in the above, please let me know and we will re-open this PR.

cee-chen added 5 commits November 16, 2023 11:04

[misc] Fix draggable disabled cursor CSS

1b60ca8

[a11y] Focus the toggle dropdown button instead of entirely stranding…

5c306c8

… user focus

Restore behavior of reducing the combobox width on selection

596b377

- use `:has` rather than `:focus-within` for determining when the combobox should be embiggened, so that the dropdown arrow focus doesn't trigger the increase

Remove now-unnecessary extra onFocus handler

4d5d1a1

[TODO] input click workaround

0798463

- can be reverted once elastic#170716 merges

cee-chen added release_note:skip Skip the PR/issue when compiling release notes accessibility: focus Accessibility focus management ci:cloud-deploy Create or update a Cloud deployment v8.12.0 labels Nov 16, 2023

cee-chen commented Nov 16, 2023

View reviewed changes

cee-chen mentioned this pull request Nov 16, 2023

[EuiComboBox] options list fails to open when icon clicked with animated width elastic/eui#7170

Closed

cee-chen marked this pull request as ready for review November 16, 2023 23:24

cee-chen requested a review from a team as a code owner November 16, 2023 23:24

cee-chen requested review from 1Copenut and andreadelrio November 16, 2023 23:24

mbondyra approved these changes Nov 20, 2023

View reviewed changes

1Copenut approved these changes Nov 20, 2023

View reviewed changes

JasonStoltz closed this Dec 6, 2023

cee-chen deleted the combobox-a11y-ux branch June 3, 2024 16:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Unified Search] Improve accessibility of flex width comboboxes #171439

[Unified Search] Improve accessibility of flex width comboboxes #171439

cee-chen commented Nov 16, 2023 •

edited

Loading

cee-chen Nov 16, 2023 •

edited

Loading

1Copenut Nov 20, 2023

kibana-ci commented Nov 16, 2023 •

edited

Loading

andreadelrio commented Nov 17, 2023 •

edited

Loading

cee-chen commented Nov 20, 2023

mbondyra left a comment

1Copenut left a comment

1Copenut Nov 20, 2023

timductive commented Nov 20, 2023

timductive commented Nov 20, 2023

cee-chen commented Nov 20, 2023

mbondyra commented Nov 22, 2023 •

edited

Loading

cee-chen commented Nov 22, 2023

JasonStoltz commented Dec 6, 2023

[Unified Search] Improve accessibility of flex width comboboxes #171439

[Unified Search] Improve accessibility of flex width comboboxes #171439

Conversation

cee-chen commented Nov 16, 2023 • edited Loading

Summary

Checklist

cee-chen Nov 16, 2023 • edited Loading

Choose a reason for hiding this comment

1Copenut Nov 20, 2023

Choose a reason for hiding this comment

kibana-ci commented Nov 16, 2023 • edited Loading

💚 Build Succeeded

Metrics [docs]

Async chunks

History

andreadelrio commented Nov 17, 2023 • edited Loading

cee-chen commented Nov 20, 2023

mbondyra left a comment

Choose a reason for hiding this comment

1Copenut left a comment

Choose a reason for hiding this comment

1Copenut Nov 20, 2023

Choose a reason for hiding this comment

timductive commented Nov 20, 2023

timductive commented Nov 20, 2023

cee-chen commented Nov 20, 2023

mbondyra commented Nov 22, 2023 • edited Loading

cee-chen commented Nov 22, 2023

JasonStoltz commented Dec 6, 2023

cee-chen commented Nov 16, 2023 •

edited

Loading

cee-chen Nov 16, 2023 •

edited

Loading

kibana-ci commented Nov 16, 2023 •

edited

Loading

andreadelrio commented Nov 17, 2023 •

edited

Loading

mbondyra commented Nov 22, 2023 •

edited

Loading