Angular tooltip should be hoverable for accessibility
juanjosegutierrez opened this issue · 3 comments
Describe the bug
The angular tooltip element opens when you hover over the trigger element and closes when you leave. If you try to hover over the tooltip content, then the tooltip will close. According to WCAG 21, tooltip content needs to be hoverable too. Here is the documentation: https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html.
How to reproduce
This issue can be seen on the clarity page for the angular tooltip in one of the tooltip examples: https://clarity.design/angular-components/tooltip/
Here is a screenshot:
Steps to reproduce the behavior:
- Go to https://clarity.design/angular-components/tooltip/
- Scroll down to the tooltip demos like in the screenshot.
- Hover over one of the tooltip demo elements.
- Once the tooltip opens, attempt to hover over the tooltip content.
- See that it is not possible
Expected behavior
User should be able to hover over tooltip content.
Versions
Clarity project:
- Clarity Core
- Clarity Angular/UI
Clarity version:
- v3.x
- v4.x
- v5.x
Framework:
- Angular
- React
- Vue
- Other:
Framework version:
Angular 12
Device:
- Type: MacBook
- OS: MacOS
- Browser chrome
- Version 95
Additional notes
None.
@scrosiner Can you check if this is already a duplicate of what we have tracked internally? I believe so.
@juanjosegutierrez is based on testing through VMware?
@gnomeontherun yes this is based on VMware testing
Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.