fix(ui-kit): move focus ring to focus-visible on Select/Dialog/Sheet/NavigationMenu

[RealDiligent]

Summary

• SelectTrigger (select.tsx), DialogPrimitive.Close (dialog.tsx), SheetPrimitive.Close (sheet.tsx), and NavigationMenuTrigger (navigation-menu.tsx) applied their focus ring / background highlight on plain focus:, which fires on mouse-click focus too and leaves a lingering ring/highlight after every click — unlike button.tsx, input.tsx, textarea.tsx, switch.tsx, checkbox.tsx, toggle.tsx, slider.tsx, and badge.tsx, which all ring on focus-visible: (keyboard/programmatic focus only).
• Moves only the visible ring/highlight classes to focus-visible: at those four sites: focus:ring-* → focus-visible:ring-* (Select/Dialog/Sheet) and focus:bg-accent focus:text-accent-foreground → focus-visible:* (NavigationMenu). focus:outline-none is kept as-is (clearing the native outline on any focus is correct and shared by every primitive), and the intentional data-[state=open]:focus:bg-accent open-state compound is untouched. No other className (radius, padding, color tokens) changed.
• Adds focus-visible-convention.test.tsx: asserts navigationMenuTriggerStyle() and the rendered SelectTrigger now carry focus-visible: ring/highlight classes and no bare focus:ring/focus:bg-accent, while keeping focus:outline-none.

Closes #8304

Scope

• The PR title follows type(scope): short summary Conventional Commit format, for example fix(api): restore profile access checks.
• This PR is focused and does not mix unrelated backend, UI, MCP, docs, dependency, and deploy changes.
• This follows CONTRIBUTING.md and does not reintroduce GitHub Pages, VitePress, site/, or CNAME.
• I linked a currently open issue this PR resolves (e.g. Closes #123) — a linked open issue is required for every contributor PR.

Validation

• git diff --check
• npm run actionlint
• npm run typecheck
• npm run test:coverage locally; codecov/patch requires ≥99% coverage of the lines AND branches you changed (aim for 100% on your diff so CI variance does not fail near the threshold). Global coverage is a non-blocking trend with a loose 90% backstop, not the gate.
• npm run test:workers
• npm run build:mcp
• npm run test:mcp-pack
• npm run ui:openapi:check
• npm run ui:lint
• npm run ui:typecheck
• npm run ui:build
• npm audit --audit-level=moderate
• New or changed behavior has unit/integration tests for new branches, fallback paths, and sanitizer boundaries

If any required check was skipped, explain why:

• This diff touches only packages/loopover-ui-kit/** (four class renames + one new test). packages/loopover-ui-kit is not in the root vitest.config.ts coverage.include and is not Codecov-gated (its own vitest.config.ts: the acceptance signal is the suite running and passing, not a percentage), so test:coverage/codecov/patch do not apply; actionlint, test:workers, build:mcp/test:mcp-pack, ui:openapi:check, and npm audit are not exercised by a ui-kit-only class change. Locally verified in the package: npm test (4 files / 21 tests, incl. the 2 new), tsc --noEmit, and prettier --check on the touched files all pass.

Safety

• No secrets, wallet details, hotkeys, coldkeys, user PATs, private keys, raw trust scores, private rankings, or private maintainer evidence are exposed.
• Public GitHub text stays sanitized, low-noise, and does not imply compensation guarantees or optimization tactics.
• Auth, cookie, CORS, GitHub App, Cloudflare, or session changes include negative-path tests.
• API/OpenAPI/MCP behavior is updated and tested where needed.
• UI changes use live API data or real empty/error/loading states, not production mock/demo fallbacks.
• Visible UI changes include a UI Evidence section below with JPG/JPEG or PNG screenshots arranged as organized, captioned, clickable thumbnails. SVG screenshots are not used as review evidence. Review-only screenshots or recordings are not committed to the repository.
• Public docs/changelogs are updated where needed; changelogs are only edited for release-prep PRs.

UI Evidence

This fix has no at-rest visual difference and no difference under mouse interaction at all in the sense a static screenshot captures — the change is purely which focus triggers the ring. :focus-visible is a browser-heuristic pseudo-class that, by design, does not match on mouse-click focus, so:

• Before: clicking SelectTrigger / the Dialog or Sheet close button / NavigationMenuTrigger with a mouse left a persistent focus ring/highlight after the click (the bug).
• After: the same mouse click leaves no lingering ring/highlight, while keyboard (Tab) focus still shows the ring on both — matching button/input/switch and every other primitive in the kit.

Because the difference is a focus pseudo-class heuristic rather than a rendered-pixel change, the authoritative, machine-checkable evidence is the class-list regression test focus-visible-convention.test.tsx (part of this PR): it asserts navigationMenuTriggerStyle() and the rendered SelectTrigger now carry the focus-visible: ring/highlight classes and no bare focus:ring / focus:bg-accent, while keeping focus:outline-none. This is the same class-list-assertion evidence convention state-views.test.tsx / theme-toggle.test.tsx already use for ui-kit variant guarantees, and the same shape the sibling accessibility fixes #7015/#7016 were verified with.

Notes

• Class-rename-only fix, no new abstraction and no adoption of the app-level .focus-ring utility — mirrors the exact focus-visible: convention of button.tsx/input.tsx/switch.tsx, matching the "AccordionTrigger has no focus-visible indicator, unlike every other interactive control in ui-kit #7015 AccordionTrigger — unlike every other X in ui-kit" shape.

[superagent-security]

Superagent didn't find any vulnerabilities or security issues in this PR.

[loopover-orb]

Tip

✅ LoopOver review result - approve/merge recommended

_{Review updated: 2026-07-24 10:41:25 UTC}

5 files · 1 AI reviewer · no blockers · readiness 98/100 · CI green · clean

✅ Suggested Action - Approve/Merge

• safe to merge

Review summary
This is a narrow, well-targeted CSS convention fix: it moves ring/highlight classes from `focus:` to `focus-visible:` at four sites (SelectTrigger, Dialog/Sheet Close, NavigationMenuTrigger) while correctly preserving `focus:outline-none` and the intentional `data-[state=open]:focus:bg-accent` compound. The change matches the existing convention already used elsewhere in the kit (e.g. sidebar.tsx's `focus-visible:ring-2`, the prior AccordionTrigger fix in #7015), and the added test directly exercises both the cva output and the rendered DOM className, correctly asserting absence of bare `focus:ring`/`focus:bg-accent` via negative-lookbehind regexes. I didn't find any logic defects in the diff.

Nits — 4 non-blocking

• select.tsx:33 — `SelectItem` still uses `focus:bg-accent focus:text-accent-foreground` (bare, not focus-visible); it's out of scope for this issue's four named sites but is the same bug pattern and could be swept in the same PR or a fast follow.
• The new test file only covers NavigationMenuTrigger and SelectTrigger; the Dialog/Sheet Close button focus-visible classes (dialog.tsx, sheet.tsx) have no assertion in focus-visible-convention.test.tsx despite being named in the PR description.
• Consider adding render-based assertions for DialogPrimitive.Close and SheetPrimitive.Close similar to the SelectTrigger test, since those two sites are explicitly claimed as fixed in the description but aren't verified by the added test.
• If SelectItem's bare focus:bg-accent is intentionally out of scope, a one-line comment noting that would help future readers avoid re-flagging it.

Decision drivers

• ✅ Code review — No blockers (1 reviewer)
• ✅ Gate result — Passing (No configured blocker found.)

Context & advisory signals — never blocks the verdict

Signal	Result	Evidence
Linked issue	✅ Linked	#8304, #7015
Related work	✅ No active overlap found	No same-issue or scoped active PR overlap found.
Change scope	✅ 20/20	Low review scope from cached public metadata (2 linked issues).
Validation posture	✅ 25/25	PR body includes validation/test evidence.
Contributor workload	✅ 10/10	Author activity: 345 registered-repo PR(s), 134 merged, 39 issue(s).
Contributor context	✅ Confirmed Gittensor contributor	RealDiligent; Gittensor profile; 345 PR(s), 39 issue(s).
Improvement	✅ Minor	risk: clean · value: minor · LLM: minor

Linked issue satisfaction

Addressed
All four specified sites (select.tsx, dialog.tsx, sheet.tsx, navigation-menu.tsx) have their ring/highlight classes moved from focus: to focus-visible: while preserving focus:outline-none, exactly matching the issue's requirement, and a new regression test file covers both NavigationMenuTrigger and SelectTrigger.

Review context

• Author: RealDiligent
• Role context: outside_contributor
• Public audience mode: oss maintainer
• Lane context: Repository is configured for direct PR review.
• Public profile languages: Python, Ruby, JavaScript, Svelte, TypeScript, Cuda, Markdown, MDX
• Official Gittensor activity: 345 PR(s), 39 issue(s).
• PR-specific overlap: none found.

Contributor next steps

• Keep the PR focused and include validation evidence before maintainer review.

Signal definitions

• Related work = same linked issue, overlapping active PRs, or title/path similarity.
• Change scope = cached public metadata such as size labels, draft state, and review-burden hints.
• Validation posture = whether the PR provides enough public validation/test evidence for maintainer review.
• Contributor workload = public contributor activity and cleanup pressure, not a repo-wide quality failure.
• Contributor context = public GitHub/Gittensor identity context; non-Gittensor status is not a blocker.

🧪 Chat with LoopOver

Ask LoopOver a question about this PR directly in a comment — grounded only in the same cached, public-safe facts shown above, never a new claim.

• @loopover ask <question> answers contribution-quality Q&A with source citations and freshness.
• @loopover chat <question> answers in natural prose from cached decision-pack facts via local inference (maintainer/collaborator; read-only).
• A plain-language @loopover mention with a real question is routed to the closest matching read-only command automatically — no exact syntax required.

Full command reference: https://loopover.ai/docs/loopover-commands

🧪 Experimental — new and may change.

Visual preview

Route	Viewport	Before (production)	After (this PR's preview)	Diff
/	desktop	before /	after /	—
/	mobile	before / (mobile)	after / (mobile)	—

Click any thumbnail to open the full-size screenshot. Before = production · After = this PR's preview deploy.

Scroll preview

Route	Before (production)	After (this PR's preview)
/	before / (scroll)	after / (scroll)

A short scroll-through clip (desktop) — click either thumbnail to open the full animation. Evidence for scroll-linked behavior a single screenshot can't show.

_{🟩 Safe / merged · 🟦 Advisory · 🟨 Held for review · 🟥 Blocked / closed}

---

💰 Earn for open-source contributions like this. Gittensor lets GitHub contributors earn for the work they already do — register to start earning →.

Checked by LoopOver, a quiet PR intelligence layer for OSS maintainers.

• Re-run LoopOver review

[loopover-orb]

LoopOver approves — the gate is satisfied and CI is green.