a11y(1.4.13): migrate saved-query nav tooltips to Tooltip primitive#3607
Open
rosanusi wants to merge 2 commits into
Open
a11y(1.4.13): migrate saved-query nav tooltips to Tooltip primitive#3607rosanusi wants to merge 2 commits into
rosanusi wants to merge 2 commits into
Conversation
Replaces the hand-rolled JS-positioned tooltip in saved-query-views.svelte and standalone-activities/saved-views.svelte with the Holocene Tooltip primitive (PR #3429). Each file previously maintained ~40 lines of custom state and DOM positioning logic (showTooltip, tooltipText, tooltipX/Y, positionTooltipFrom, onQueryBtnEnter/Move/Leave, use:portal floating <div>) that failed three SC 1.4.13 sub-criteria: - Dismissible: no Escape handler - Hoverable: pointer crossing the wrapper boundary fired onmouseleave before reaching the fixed <div>, dismissing the tooltip - ARIA: plain <div role="tooltip"> with no aria-describedby on the trigger The Tooltip primitive supplies all three: - Escape-to-dismiss via svelte:window keydown (dismissed flag auto-resets) - Hover bridge: 120 ms HOVER_HIDE_DELAY_MS lets the pointer transit onto the Portal-rendered popover; mouseenter on the popover cancels the hide timer - aria-describedby on the wrapper <div>; role="tooltip" + id on the popover hide={$savedQueryNavOpen} preserves the existing gate: tooltip is suppressed while the nav rail is expanded (full name already visible). usePortal delegates positioning to the Portal/Floating-UI integration, replacing the manual getBoundingClientRect arithmetic and also closing the 1.4.4 fixed-pixel-width gap on that surface. Net: ~80 lines removed across two files; no new lines of tooltip logic added. A11y-Audit-Ref: 1.4.13-saved-query-hand-rolled-tooltip Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
a11y
Contributor
|
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
![temporal-cicd[bot]](https://avatars.githubusercontent.com/in/357945?s=60&v=4){kind=small}
| class={merge( | ||
| 'h-4 w-4 flex-shrink-0 transition-colors duration-200', | ||
| $savedQueryNavOpen ? 'lg:hidden' : '', | ||
| 'flex w-full justify-start', |
Contributor
There was a problem hiding this comment.
⚠️ 'view.count' is possibly 'undefined'.
| disabled={view.disabled} | ||
| size="sm" | ||
| > | ||
| <Icon |
Contributor
There was a problem hiding this comment.
⚠️ 'view.count' is possibly 'undefined'.
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
Replaces the hand-rolled JS-positioned tooltips in the saved-query nav rail (
saved-query-views.svelte) and standalone-activities saved-views rail (saved-views.svelte) with the HoloceneTooltipprimitive (PR #3429).Each file maintained ~40 lines of custom positioning state and DOM logic that failed three SC 1.4.13 sub-criteria:
svelte:windowkeydown handler;dismissedflag auto-resets on leaveonmouseleavebefore reaching theposition: fixeddivHOVER_HIDE_DELAY_MS+mouseenteron the popover cancels the hide timerfocusin/focusoutin primitiverole="tooltip"(4.1.2)<div role="tooltip">with noaria-describedbyon triggeraria-describedbyon wrapper,role="tooltip"+idon popoverNet change: ~80 lines removed across two files; 18 lines added (Tooltip wrapper + import).
What changed
src/lib/pages/saved-query-views.svelte: removedshowTooltip,tooltipText,tooltipX/Y,positionTooltipFrom,onQueryBtnEnter/Move/Leave, inlineportalfunction, and floating<div use:portal>. Replaced wrapper<div>inqueryButtonsnippet with<Tooltip text={…} right usePortal hide={$savedQueryNavOpen}>.src/lib/components/standalone-activities/saved-views.svelte: same migration;text={view.name}(no task-failures special-casing needed here).hide={$savedQueryNavOpen}preserves the existing gate: tooltip suppressed when the nav rail is expanded (full name already visible in the button label).usePortaldelegates positioning to the Portal/Floating-UI integration, replacing the manualgetBoundingClientRectarithmetic and also closing the 1.4.4 fixed-pixel-width/zoom gap on the same surface.Dependencies
right,usePortal, hover-bridge, Escape, andaria-describedbyto be available.Test plan
Keyboard:
dismissedauto-resets).Pointer:
Screen reader:
aria-describedby.Regression:
$savedQueryNavOpen = true(expanded rail): no tooltip appears.tabindex="-1"wrapper still skipped; inner<Button>is the focus stop.References
audit-output/issues/1.4.13-saved-query-hand-rolled-tooltip.mdA11y-Audit-Ref: 1.4.13-saved-query-hand-rolled-tooltip
🤖 Generated with Claude Code