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

USWDS - Bug: Tooltip needs "escape" key functionality #5901

Closed
2 tasks done
amycole501 opened this issue Nov 29, 2023 · 0 comments · Fixed by #5909
Closed
2 tasks done

USWDS - Bug: Tooltip needs "escape" key functionality #5901

amycole501 opened this issue Nov 29, 2023 · 0 comments · Fixed by #5909
Assignees
Labels
A11Y Audit Findings A11y Audit Issues related to the accessibility audit Added during Sprint Affects: Accessibility 🟡 Relates to the accessibility of our components Type: Bug A problem in the code
Milestone

Comments

@amycole501
Copy link

amycole501 commented Nov 29, 2023

Describe the bug

Dismissible (tooltip doesn't meet this criteria)
A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
Hoverable (tooltip doesn't meet this criteria)
If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
Persistent (tooltip DOES meet this criteria)
The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

According to W3C, the tooltip component interaction should be dismissible by hitting the "escape" key.
https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
https://www.w3.org/WAI/WCAG22/Techniques/client-side-script/SCR39.html

Steps to reproduce the bug

  1. Go to https://designsystem.digital.gov/components/tooltip/
  2. keyboard into one of the tooltip button examples
  3. hit "escape"
    Note how the tooltip remains visible

Additionally, the tooltip does not meet the criteria for "hoverable"

  1. Go to https://designsystem.digital.gov/components/tooltip/
  2. Hover over the tooltip with a mouse
  3. Try to access the tooltip with the mouse. Note that it disappears. According to WCAG it shouldn't.

If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;

Expected Behavior

When you click on the example button and hit 'esc' the tooltip should disappear.

Screenshots

No response

System setup

PC, Chrome, keyboard

Additional context

No response

Code of Conduct

@amycole501 amycole501 added Type: Bug A problem in the code Affects: Accessibility 🟡 Relates to the accessibility of our components labels Nov 29, 2023
@github-actions github-actions bot added the Status: Triage We're triaging this issue and grooming if necessary label Nov 29, 2023
@mahoneycm mahoneycm added the A11y Audit Issues related to the accessibility audit label Jan 8, 2024
@amyleadem amyleadem transferred this issue from uswds/uswds-site Apr 29, 2024
@amyleadem amyleadem added this to the uswds 3.9.0 milestone Apr 29, 2024
@amyleadem amyleadem changed the title USWDS-Site - Bug: Tooltip needs "escape" key functionality USWDS - Bug: Tooltip needs "escape" key functionality Apr 29, 2024
@amyleadem amyleadem removed the Status: Triage We're triaging this issue and grooming if necessary label Apr 29, 2024
@amyleadem amyleadem modified the milestones: uswds 3.9.0, uswds 3.8.1 May 1, 2024
@amyleadem amyleadem modified the milestones: uswds 3.8.1, uswds 3.9.0 May 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A11Y Audit Findings A11y Audit Issues related to the accessibility audit Added during Sprint Affects: Accessibility 🟡 Relates to the accessibility of our components Type: Bug A problem in the code
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants