fix(files): keep tile focus ring fully visible after preview dialog closes - #2017
Draft
roxi3906 wants to merge 3 commits into
Draft
fix(files): keep tile focus ring fully visible after preview dialog closes#2017roxi3906 wants to merge 3 commits into
roxi3906 wants to merge 3 commits into
Conversation
…loses Escape-closing the file preview dialog returns focus to the tile button in keyboard modality, so :focus-visible matches and the tile draws its focus ring. The ring was inset, and inset box-shadow paints below the opaque preview area, leaving only the ring's bottom half visible. Draw the ring outside the tile instead so preview content cannot cover it.
Opening the file preview dialog moves focus to the first focusable header element — the provenance button — and Radix opens tooltips on any focus, so the Provenance tooltip popped up unprompted. Guard the trigger's onFocus with a :focus-visible check so only real keyboard focus opens it.
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.
Problem
Two related focus artifacts in the Files tab's large preview dialog:
Root cause
Dialog/FocusScopereturns focus to the tile's<button>when the dialog closes. Because the dismissal was keyboard-driven (Escape), the button matches:focus-visibleand the tile draws its focus ring — the ring appearing is correct a11y behavior. But the ring wasring-inset, and an inset box-shadow paints below descendant content: the tile's opaque 82px preview area (bg-bg-200+ArtifactPreview) covered the ring's top half, leaving only the strip around the bottom meta area. (Mouse-driven dismissal never matches:focus-visible, which is why only Escape reproduced it.)provenanceEntry="trailing"). RadixTooltip.Triggeropens on any focus event (by design, for keyboard users), so programmatic auto-focus opens the tooltip (same family as Tooltip within popover opens automatically due to trigger receiving focus radix-ui/primitives#2248).Fix
project-files-presentation-owner.tsx: drophas-[:focus-visible]:ring-inseton theFileTilecontainer so the ring paints outside the tile's border box, where preview content cannot cover it. The 8px grid gap and 12px container padding leave room for the 2px outer ring. The list-modeFileListRowkeeps its inset ring: its children barely cover it, and adjacent rows (no gap) would overlap an outer ring.PreviewFileSurface.tsx: apply the repo's established:focus-visibleguard (reference:ConversationPanel.tsx, 7aafedc) to the provenance button'sTooltipTrigger— programmatic auto-focus never matches:focus-visible, while keyboard Tab still opens the tooltip.Verification
npx vitest run src/renderer/src/pages/workspace/ProjectFilesView.test.tsx— 89 passednpx vitest run src/renderer/src/pages/workspace/PreviewFileSurface.test.tsx— 46 passed, incl. new regression testdoes not open the Provenance tooltip on programmatic focus(verified red without the fix)npx vitest run src/renderer/src/pages/workspace/FilePreviewDialog.{escape,lifecycle}.test.tsx— passed