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.

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

[Lens](Accessibility) convert select a function buttons to radio group for better screen reader support #84664

Closed
mbondyra opened this issue Dec 1, 2020 · 5 comments · Fixed by #87825
Assignees
Labels
accessibility best practice enhancement New value added to drive a business result Feature:Lens Project:Accessibility Team:Visualizations Visualization editors, elastic-charts and infrastructure

Comments

@mbondyra
Copy link
Contributor

mbondyra commented Dec 1, 2020

Select a function buttons act like a radio group. They should be a radio group.

This is a leftover issue from #83872

@mbondyra mbondyra added Project:Accessibility enhancement New value added to drive a business result Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Lens accessibility best practice labels Dec 1, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-accessibility (Project:Accessibility)

@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@wylieconlon
Copy link
Contributor

Because the "choose a function" options are using an EuiListGroup I think we have three options, but I'm not sure which one is best:

  • Look for a way to set aria properties to indicate a radio group without modifying EUI
  • Modify EUI to support radio-style buttons
  • Change the implementation to not use EuiListGroup to implement it as a radio group

My preference is to contribute to EUI if it's a common enough use case.

@myasonik
Copy link
Contributor

myasonik commented Jan 4, 2021

@elastic/eui-design Do y'all have a preference and/or any guidance?

@myasonik
Copy link
Contributor

myasonik commented Jan 5, 2021

Talked to @cchaos about this and she convinced me that this works just as well as a toggle button as a radio input and a toggle button is loads easier to implement so let's go with that!

All that needs to happen to make it a toggle button is add aria-pressed={true/false} to each EuiListGroupItem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility best practice enhancement New value added to drive a business result Feature:Lens Project:Accessibility Team:Visualizations Visualization editors, elastic-charts and infrastructure
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants