Skip to content

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

@amycole501

Description

@amycole501

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

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions