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

[Monitoring/Accessibility] Remove title attributes from elements #18025

Closed
elasticmachine opened this issue Aug 2, 2017 · 18 comments
Closed
Labels
Project:Accessibility Team:Monitoring Stack Monitoring team Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. WCAG A

Comments

@elasticmachine
Copy link
Contributor

elasticmachine commented Aug 2, 2017

Original comment by @tsullivan:

We're using title attributes in various places in the Monitoring UI - primarily on icons. For accessibility, we should remove these and use an aria-label attribute instead.

Perhaps at the same time, we would want to add a tooltip to these areas.

cc @cjcenizal

Depends on #19052

@elasticmachine
Copy link
Contributor Author

Original comment by @cjcenizal:

Nice! We should also bear in mind that if an icon is used in the UI to supplement text, e.g. a button with both icon and text inside of it, then we can just use aria-hidden="true" to hide the icon. However, if the icon is the only way of conveying information, then aria-label (and a tooltip) is the appropriate choice.

@elasticmachine
Copy link
Contributor Author

Original comment by @tsullivan:

action item: get a list of how many title attributes are being used

@elasticmachine
Copy link
Contributor Author

Original comment by @tsullivan:

For the React components that use a title attribute, we can replace them with the Tooltip component: LINK REDACTED

But then what we need to do is make that component accessible

@elasticmachine
Copy link
Contributor Author

Original comment by @tsullivan:

But then what we need to do is make that component accessible

Tricky to do with our current tooltip library because of: pivotal-cf/pivotal-ui#426

@elasticmachine
Copy link
Contributor Author

Original comment by @cjcenizal:

@tsullivan It's very fortuitous that you mention tooltips, because this is actually a significant blocker for our effort to incorporate EUI into Kibana. I think the solution to this would be to add a new Tooltip component to EUI (and then port it to the Kibana UI framework). Would you be interested in taking this on? The pivotal tooltip source code looks pretty straightforward. I think we could copy it to EUI, reformat it to be consistent with our JS style, and make the accessibility improvements we need. @snide could help from a design side.

@elasticmachine
Copy link
Contributor Author

Original comment by @snide:

I can certainly help from the design side. If someone wants to give me a working tooltip in our docs I can style 'er up. Only request I'd have looking at that tooltip system is pass along a title AND body prop. We often need a title to give context to the content of the body (especially for long tooltips).

Anyways, happy to help.

@elasticmachine
Copy link
Contributor Author

Original comment by @cjcenizal:

Just got word that @nreese is going to take a swing at this! 🥇

@elasticmachine
Copy link
Contributor Author

Original comment by @tsullivan:

Cool! It wouldn't have been an easy commitment for me to make. But I can certainly help on the review and testing side.

@elasticmachine
Copy link
Contributor Author

Original comment by @tsullivan:

AFAIK we're still waiting on an EUI component for tooltips with accessibility baked in that we can integrate to close this issue.

@elasticmachine
Copy link
Contributor Author

Original comment by @nreese:

@tsullivan Tooltips are now a part of EUI as of 0.0.26, LINK REDACTED and they are accessible

@elasticmachine
Copy link
Contributor Author

Original comment by @tsullivan:

Tooltips are now a part of EUI as of 0.0.26, LINK REDACTED and they are accessible

Not sure how I missed this earlier, but this is awesome!

@elasticmachine elasticmachine added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. Team:Monitoring Stack Monitoring team Project:Accessibility stalled labels Apr 24, 2018
@tsullivan tsullivan removed the stalled label May 10, 2018
@tsullivan
Copy link
Member

This should be very easy to implement once more views are Reactified.

We should focus the next Reactification efforts on any view that needs a tooltip to make this go quicker

@tsullivan
Copy link
Member

Depends on #19052

@tsullivan tsullivan removed their assignment Jul 24, 2018
@AlonaNadler
Copy link

@tsullivan dependency was closed, can we close this one?

@tsullivan
Copy link
Member

@AlonaNadler I'm not sure if title attributes are still used in the Monitoring UI. If so then this should stay open.

@AlonaNadler
Copy link

@elastic/kibana-monitoring do you know if this is still relevant? if not, when did it stop being relevant 6.4?

@tsullivan
Copy link
Member

Checking again with @elastic/stack-monitoring, new components are used in the UI that make this issue n/a, right?

@chrisronline
Copy link
Contributor

There looks to be just one usage left that we need to remove

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Project:Accessibility Team:Monitoring Stack Monitoring team Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. WCAG A
Projects
None yet
Development

No branches or pull requests

5 participants