fix(a11y): make Tooltip keyboard-accessible, dismissible, and hoverable#3429
Draft
bilal-karim wants to merge 2 commits into
Draft
fix(a11y): make Tooltip keyboard-accessible, dismissible, and hoverable#3429bilal-karim wants to merge 2 commits into
bilal-karim wants to merge 2 commits into
Conversation
The Tooltip primitive was mouse-only: no focus handlers, no Escape dismiss, and portal tooltips disappeared when moving the pointer to the popover content. This failed all three WCAG 2.2 SC 1.4.13 criteria (Content on Hover or Focus). Changes: - Show tooltip on keyboard focus via focusin/focusout on wrapper - Dismiss on Escape (resets when interaction ends) - Track pointer hover on the popover itself (diagonal hover bridge) - Unify both portal and inline variants on a single isOpen derived - Add role="tooltip" and aria-describedby linkage for screen readers No API changes — all existing consumers work identically, with the added benefit that tooltips now appear on keyboard focus. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
- Use <svelte:window on:keydown> instead of reactive document listener (mirrors maximizable.svelte) - Fix hover state lingering when mouse leaves popover to empty space by unifying wrapper + popover into a single hover zone - Extract HOVER_HIDE_DELAY_MS constant - Drop redundant isPopoverHovered state Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
bilal-karim
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Tooltipprimitive was completely inaccessible to keyboard and screen reader usersWhat was broken
The Tooltip only responded to
mouseenter/mouseleave— keyboard users never saw tooltip content, there was no Escape-to-dismiss, and portal tooltips disappeared when moving the pointer toward the popover.What this PR adds
focusin/focusouton the wrapper)role="tooltip"+ uniqueidon the popover,aria-describedbyon the wrapper so screen readers announce tooltip contentisOpenderived from hover, focus, popover-hover, and dismiss signalsNo API changes
All existing consumers work identically. The only observable difference is that tooltips now appear on keyboard focus.
Test plan
Keyboard:
Pointer:
Screen reader:
usePortalconsumers) announce correctly🤖 Generated with Claude Code