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

Mouseover tool tips not accessible to keyboard-only or other AT users – they should be #12141

Closed
alisan16 opened this issue Sep 17, 2019 · 0 comments · Fixed by #12777
Closed

Mouseover tool tips not accessible to keyboard-only or other AT users – they should be #12141

alisan16 opened this issue Sep 17, 2019 · 0 comments · Fixed by #12777
Labels
Product: caseflow-queue Team: Tango 💃 Type: Accessibility Related to Accessibility support (Section 508)
Milestone
Tango Sprint Endi...

Comments

@alisan16
Copy link
Contributor

https://www.sarasoueidan.com/blog/accessible-tooltips/

Information regarding a hearing is displayed with Mouse Overs. This information cannot be viewed with a keyboard or read by assistive technology programs. (New: 08/21/2019)
@lomaxap lomaxap assigned aplybeah and unassigned aplybeah Oct 30, 2019
@pshahVA pshahVA added this to the Tango Sprint Ending 11/29/19 milestone Nov 20, 2019
@aplybeah aplybeah mentioned this issue Nov 21, 2019
Merged
@alisan16 alisan16 added the Type: Accessibility Related to Accessibility support (Section 508) label Dec 4, 2019
This was referenced Jan 13, 2020
Closed
Closed
va-bot pushed a commit that referenced this issue Jan 21, 2020
@aplybeah
Tooltip Accessibility Fix (#12777)
95acda7 
Resolves #12141 
I tried my best to follow the functionality of [this design pattern](https://cdpn.io/Moiety/debug/LaPvWy); specifically the pattern labelled **Tooltip with Additional Information** . I achieved this by adding `tabIndex=0` to the main tooltip component, and adding a few attributes from the [`react-tooltip` library that we are using](https://react-tooltip.netlify.com/).

**_Attributes:_**
* `tabIndex=0`: adds the tooltip container to the tab order, making it keyboard accessible
* `data-event`/ `data-event-off`: These attributes activate/deactivate the tooltip based on widow event handlers.
* `aria-describedby`: [W3C standard](https://w3c.github.io/aria-practices/#tooltip) states that the element referencing the tooltip content must use this attribute. This attribute was designed to be more descriptive than `aria-labelledby`

Currently the screen reader will announce: "<Element Name/Label> , tooltip, <tooltip content>. You are currently on a tooltip"

_Nit_
If there is an element that has a tooltip that is already in the tab order (e.g. button and anchor tags) information gets read out twice.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Product: caseflow-queue Team: Tango 💃 Type: Accessibility Related to Accessibility support (Section 508)
Projects
None yet
Milestone
Tango Sprint Ending 11/29/19
Development

Successfully merging a pull request may close this issue.

Tooltip Accessibility Fix department-of-veterans-affairs/caseflow
5 participants
@alisan16 @lomaxap @aplybeah @hschallhorn @pshahVA