Skip to content

fix(files): keep tile focus ring fully visible after preview dialog closes - #2017

Draft
roxi3906 wants to merge 3 commits into
aipoch:mainfrom
roxi3906:fix/file-tile-esc-focus-ring
Draft

fix(files): keep tile focus ring fully visible after preview dialog closes#2017
roxi3906 wants to merge 3 commits into
aipoch:mainfrom
roxi3906:fix/file-tile-esc-focus-ring

Conversation

@roxi3906

@roxi3906 roxi3906 commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

Problem

Two related focus artifacts in the Files tab's large preview dialog:

  1. Half-visible focus ring after Escape: in grid view, clicking a file tile opens the preview dialog; dismissing it with Escape leaves a broken, bottom-half-only border on the tile.
  2. Unprompted Provenance tooltip on open: the moment the dialog opens, the "Provenance" tooltip pops up even though the pointer never touched the button.

Root cause

  1. Radix Dialog/FocusScope returns focus to the tile's <button> when the dialog closes. Because the dismissal was keyboard-driven (Escape), the button matches :focus-visible and the tile draws its focus ring — the ring appearing is correct a11y behavior. But the ring was ring-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.)
  2. On open, the dialog auto-focuses the first focusable element in the header — the provenance button (provenanceEntry="trailing"). Radix Tooltip.Trigger opens 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: drop has-[:focus-visible]:ring-inset on the FileTile container 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-mode FileListRow keeps 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-visible guard (reference: ConversationPanel.tsx, 7aafedc) to the provenance button's TooltipTrigger — 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 passed
  • npx vitest run src/renderer/src/pages/workspace/PreviewFileSurface.test.tsx — 46 passed, incl. new regression test does 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
  • ESLint clean; no new typecheck errors

…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.
@github-actions github-actions Bot added the bug Something isn't working label Sep 1, 2026
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant