fix(a11y): add focusin/focusout to saved-query nav hover tooltip (WCAG 2.1.1)#3453
Open
bilal-karim wants to merge 1 commit into
Open
fix(a11y): add focusin/focusout to saved-query nav hover tooltip (WCAG 2.1.1)#3453bilal-karim wants to merge 1 commit into
bilal-karim wants to merge 1 commit into
Conversation
…G 2.1.1) The saved-query nav rail (saved-query-views.svelte) and its standalone-activities sibling (saved-views.svelte) render query buttons inside wrappers with mouse-only handlers (onmouseenter/onmousemove/onmouseleave). When the rail is collapsed, query-button labels are truncated; mouse users see the full label in the floating tooltip but keyboard users tabbing through the rail see only the icons. Add onfocusin/onfocusout alongside the existing mouse handlers so the same onQueryBtnEnter/onQueryBtnLeave callbacks fire on keyboard focus. focusin/focusout bubble from descendants -- the wrapper has tabindex=-1 so focus on the inner <Button> bubbles to the wrapper where the handlers are attached. Widens handler signatures to MouseEvent | FocusEvent. Pattern matches the established mouse+focus pairing in three Holocene table-body-cell consumers (workflows, activities, workers). Existing $savedQueryNavOpen guard preserved -- expanded nav state shows no tooltip on focus (matching today's mouse behavior). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Member
Author
Pre-existing errors |
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
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
The saved-query nav rail and its standalone-activities sibling render query buttons with mouse-only tooltip handlers. When the rail is collapsed, query-button labels are truncated — mouse users see the full label in the floating tooltip but keyboard users tabbing through the rail see only icons.
This PR adds
onfocusin/onfocusoutalongside the existing mouse handlers so the sameonQueryBtnEnter/onQueryBtnLeavecallbacks fire on keyboard focus. Handler signatures widen fromMouseEventtoMouseEvent | FocusEvent.<div class="w-full" role="menuitem" tabindex="-1" onmouseenter={(e) => onQueryBtnEnter(e, view.name)} onmousemove={onQueryBtnMove} onmouseleave={onQueryBtnLeave} + onfocusin={(e) => onQueryBtnEnter(e, view.name)} + onfocusout={onQueryBtnLeave} >How it works
focusin/focusoutbubble from descendants (unlikefocus/blur)tabindex="-1"(not itself a focus stop); focus on the inner<Button>bubbles to the wrapper where the handlers are attachede.currentTargetresolves to the wrapper for both mouse and focus events, sopositionTooltipFrom(el)computes the same bounding rect either wayif ($savedQueryNavOpen) return;guard short-circuits when the nav is expanded, so no tooltip is shown on focus when the inline label is sufficient (matches today's mouse-side behavior)Audit context
workflows,activities,workers) that already paironmouseoverwithonfocusinfor hover-OR-focus UI reveal.Test plan
<Button>is a focus stop; the wrapper staystabindex="-1".saved-views.svelte(standalone activities surface).<Button>accessible name continues to announce normally.Out of scope
Tooltipprimitive from PR fix(a11y): make Tooltip keyboard-accessible, dismissible, and hoverable #3429)aria-describedbylinkage between trigger and tooltip (separate 4.1.2 concern)🤖 Generated with Claude Code