search

jasonkuhrt / react-popover

A smart popover component for React
600 stars 253 forks source link

Accessibility #161

Open oyeanuj opened 6 years ago

oyeanuj commented 6 years ago

Hi @jasonkuhrt, Glad to see this project revived again! I am curious about your thoughts on adding more accessibility best practices (like labels, roles, keyboard shortcuts) to the project to make the tooltips WAI-ARIA compliant?

jasonkuhrt commented 6 years ago

Love this idea, but know little about it. How would you go about it?

oyeanuj commented 6 years ago

@jasonkuhrt I'd try and follow the recommendations from the links below that I found that I thought explained it the best:

The main recommendations seem to be:

  1. Have a role attribute.
  2. Have a aria-describedby or aria-labelledby attribute.
  3. Have an aria-has-popup set on the triggering element.
  4. Have keyboard shortcuts like esc to close the popups.
  1. http://pauljadam.com/demos/aria-role-tooltip.html
  2. http://accessibility.athena-ict.com/aria/examples/tooltip.shtml
  3. http://heydonworks.com/practical_aria_examples/#input-tooltip