Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EuiComboBox] Rebuild with EuiSelectable #2841

Open
myasonik opened this issue Feb 10, 2020 · 4 comments
Open

[EuiComboBox] Rebuild with EuiSelectable #2841

myasonik opened this issue Feb 10, 2020 · 4 comments
Assignees
@cee-chen
Labels
accessibility
Projects
Accessibility Forms a11y Component Refactors
Milestone
FY 2025 - Q2 (Aug...

Comments

@myasonik
Copy link
Contributor

myasonik commented Feb 10, 2020 •
edited
Loading

The existing EuiComboBox has a few a11y shortcomings and differs in implementation from EuiSelectable which has been crowned as the future implementation of dropdown-like things. To consolidate implementations of similar components, fix the a11y problems, and unify the UX, EuiComboBox should be rewritten using EuiSelectable.

On top of EuiSelectable, EuiComboBox largely provides:

  1. A clear button (which needs improved contrast from what's there today)
    Picture example (should be 4.5:1)
  2. Buttons with the selected items inside the search field
  3. A dropdown view of the results instead of inline
    Which currently has a minor a11y issue associated with it (Remove EuiComboBox down arrow button from tab order #5024) Popup indicator should be excluded from focus order (Under "Keyboard Interaction" for Combobox)

I think the EUI team prefers to keep the EuiComoboBox component and to wrap EuiSelectable within it but another implementation option is to add a "renderAs" prop (or something along those lines) to EuiSelectable to adjust styling.

This replaces Kibana issues #42988 and #39357
This was referenced Feb 10, 2020
Closed
Closed
@cchaos cchaos added this to Forms in Accessibility Mar 18, 2020
@cchaos cchaos changed the title Combobox a11y improvements [EuiComboBox] a11y improvements Mar 18, 2020
@cchaos cchaos added the meta label Mar 18, 2020
@myasonik myasonik changed the title [EuiComboBox] a11y improvements Rebuild [EuiComboBox] with EuiSelectable Jul 13, 2020
@cchaos cchaos changed the title Rebuild [EuiComboBox] with EuiSelectable [EuiComboBox] Rebuild with EuiSelectable Sep 20, 2020
@cchaos cchaos added this to Needs triage/design in Forms via automation Sep 20, 2020
@cchaos cchaos moved this from Needs triage/design to Controls in Forms Sep 20, 2020
@bhavyarm bhavyarm mentioned this issue Oct 1, 2020
Merged
@myasonik myasonik mentioned this issue Oct 2, 2020
Closed
@bhavyarm bhavyarm mentioned this issue Oct 8, 2020
Merged
@myasonik myasonik added this to Needs triage in a11y Dec 14, 2020
@myasonik myasonik moved this from Needs triage to Critical in a11y Dec 15, 2020
@cchaos cchaos mentioned this issue Mar 19, 2021
Closed
@cchaos cchaos added this to EuiSelectable (to be used in many places) in Component Refactors Mar 19, 2021
@myasonik myasonik mentioned this issue Aug 12, 2021
Closed
@thompsongl thompsongl mentioned this issue Jan 18, 2022
Merged
9 tasks
@thompsongl
Copy link
Contributor

thompsongl commented Jan 18, 2022 •
edited
Loading

As part of this work, also mark EuiFilterSelectItem for deprecation (See #5387)

@thompsongl thompsongl mentioned this issue Jul 18, 2022
Closed
@JasonStoltz JasonStoltz changed the title [EuiComboBox] Rebuild with EuiSelectable [Meta][EuiComboBox] Rebuild with EuiSelectable Jan 23, 2023
@cee-chen cee-chen mentioned this issue Feb 6, 2023
Closed
@cee-chen cee-chen mentioned this issue Mar 20, 2023
Closed
@jeramysoucy jeramysoucy mentioned this issue Mar 27, 2023
Open
@cee-chen cee-chen mentioned this issue Mar 27, 2023
Closed
This was referenced Mar 27, 2023
Merged
Open
jeramysoucy added a commit to elastic/kibana that referenced this issue Mar 30, 2023
@jeramysoucy
Improves screen reader features of combo boxes in edit role screen (#…
b3d78e8 
…153808)

## Summary

Related to #27749

While the [EuiComboBox
rebuild](elastic/eui#2841) is in progress,
this PR addresses missing aria properties and fixes option announcements
for the `run as user` combo. It additionally adds an aria-label for the
Spaces Navigation EuiSelectable that I found was missing.

### Testing
- Add all sample data
- Edit a non-reserved role
- Turn on a screen reader (NVDA is recommended, but VoiceOver will do)
- Tab through the controls on the Edit role screen. When you arrive in a
combo box you may or may not hear an announcement declaring the name of
the combo box (this is expected, especially with VoiceOver).
- With focus in a combo box press the down arrow key. Verify the options
are announced as you traverse them with the down and up arrow keys.
- If there was success in option announcement, press escape key and
verify that the name of the combo box is announced. You may have to
press escape twice when using NVDA.

Note: It seems to be the consensus that this is best we can do with the
existing implementation of EuiComboBox, which is partly why it is being
rebuilt with the EuiSelectable component.
@cee-chen cee-chen removed the meta label Apr 17, 2023
@cee-chen cee-chen changed the title [Meta][EuiComboBox] Rebuild with EuiSelectable [EuiComboBox] Rebuild with EuiSelectable Apr 17, 2023
@cee-chen
Copy link
Member

cee-chen commented May 8, 2023

To add more requested context, EuiSelectable has the best built-in accessibility by far (semantic HTML, keyboard navigation, screen reader announcements) and we should dogfood that a11y instead of rewriting it for the 4+ selection components we use. In this case, EuiComboBox has several reported a11y and perf issues (in the github mentions history - see above) that would likely be resolved by this refactor.

@j-m j-m mentioned this issue Jun 22, 2023
Closed
@cee-chen cee-chen mentioned this issue Jul 19, 2023
Closed
@cee-chen cee-chen mentioned this issue Oct 17, 2023
Open
@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 5, 2023

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

@cee-chen cee-chen self-assigned this Nov 6, 2023
@cee-chen cee-chen mentioned this issue Apr 5, 2024
Open
33 tasks
This was referenced Apr 13, 2024
Merged
Closed
@JasonStoltz JasonStoltz mentioned this issue Apr 29, 2024
Open
@JasonStoltz JasonStoltz mentioned this issue May 14, 2024
Open
@JasonStoltz
Copy link
Member

JasonStoltz commented May 14, 2024 •
edited
Loading

Just a quick update. We're putting a 3 month window on completing this issue. I believe it should also solve the following issues:

#7289
#5951
elastic/kibana#27749
elastic/kibana#136527
#7712

EDIT: I think we'll be targeting 8.16 for this one.

@JasonStoltz JasonStoltz mentioned this issue May 14, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cee-chen cee-chen

Labels
accessibility
Projects
a11y
Critical
Accessibility
  
Forms
Component Refactors
  
EuiSelectable (to be used in many pla...
Forms
  
Controls
Milestone
FY 2025 - Q2 (August thru October)
Development

No branches or pull requests
5 participants
@cee-chen @cchaos @JasonStoltz @thompsongl @myasonik