Skip to content

fix: close tooltips with Escape - #119

Open
Arthurk12 wants to merge 3 commits into
bigbluebutton:developfrom
Arthurk12:fix/tooltip-escape
Open

Arthurk12 wants to merge 3 commits into
bigbluebutton:developfrom
Arthurk12:fix/tooltip-escape

Conversation

@Arthurk12

Copy link
Copy Markdown
Member

What does this PR do?

Tooltips on BBButton, BBBAccordion and BBBAvatar now close when Escape is pressed, without moving the pointer or focus.

  • Pressing Escape while a tooltip is shown hides it; it shows again on the next hover or focus.
  • Covers the tooltipLabel tooltip of BBButton and BBBAccordion and the name tooltip of BBBAvatar.
  • The Escape key press still reaches the app, so a modal that closes on Escape closes together with the tooltip.

Motivation

A tooltip can cover nearby content, and the only way to close it is to move the pointer or focus away, which falls short of WCAG 1.4.13 (Content on Hover or Focus).

More

A BBButton tooltip shown on hover or keyboard focus can only be closed
by moving the pointer away or moving focus elsewhere. It can cover
nearby content, and WCAG 1.4.13 (Content on Hover or Focus) requires
such content to be dismissible without moving the pointer or focus.

Add a shared Tippy plugin, `hideOnEsc`, that hides the tooltip when
Escape is pressed, and pass it to the button's Tippy. The `keydown`
listener is added to the document only while the tooltip is shown and
removed when it hides or is destroyed. The tooltip shows again on the
next hover or focus. The plugin lives in `src/utils/tooltip.ts` so
every component with a Tippy tooltip can use it.

The Escape event is not stopped, as in the MUI Tooltip: stopping it
would also hide it from the consumer's own handlers while a tooltip
is shown.
The header tooltip of BBBAccordion can only be closed by moving the
pointer away or moving focus elsewhere, which falls short of WCAG
1.4.13 (Content on Hover or Focus).

Pass the shared `hideOnEsc` plugin to its Tippy, as BBButton does, so
Escape hides the tooltip.
The name tooltip of BBBAvatar can only be closed by moving the pointer
away, which falls short of WCAG 1.4.13 (Content on Hover or Focus).

Pass the shared `hideOnEsc` plugin to its Tippy, as BBButton does, so
Escape hides the tooltip.
@Arthurk12
Arthurk12 changed the base branch from main to develop November 10, 2026 19:40

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant