lfg2025/archy
1
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects Releases 64 Wiki Activity

fix(ui): show the controller focus ring only during actual arrow/gamepad navigation
Demo images / Build & push demo images (push) Failing after 1m42s
Details

Browse Source 
The orange "gamepad selection" lift+glow was plain CSS :focus styling on
[data-controller-container] — any tap on a tabindex card lit it up (worst
on mobile), and useControllerNav's autoFocusMain programmatically focused
the first card on mount and every route change, painting the ring with no
controller input at all.

Gate it behind html.controller-nav, toggled by actual input modality:
arrow-key navigation and gamepad connection turn it on, any pointerdown
turns it off. autoFocusMain now no-ops outside directional-nav mode (a
first arrow press focuses the first container instead of spatially
navigating from <body>), so pointer users never get surprise rings while
keyboard/gamepad users keep the exact same navigation.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
archipelago
2026-07-16 15:38:46 -04:00
co-authored by Claude Fable 5
parent e9cfc234cd
commit 92d221bbf1
2 changed files with 46 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/style.css
+7 -3
View File
@@ -270,9 +270,13 @@ input[type="radio"]:active + * {
/* Containers: console-style focus — lift + ambient orange glow.
Pure glow approach — no border-color or outline changes, avoids
Chromium compositor bugs with border-radius on translateZ(0) layers. */
[data-controller-container]:focus-visible,
[data-controller-container]:focus {
Chromium compositor bugs with border-radius on translateZ(0) layers.
Gated behind html.controller-nav (set by useControllerNav only while
the user navigates with arrows/gamepad; cleared on any pointer input).
Ungated, the plain :focus selector painted the ring on every tap of a
tabindex card — the "gamepad selection with no gamepad" bug on mobile. */
html.controller-nav [data-controller-container]:focus-visible,
html.controller-nav [data-controller-container]:focus {
outline: none;
transform: translateY(-4px) scale(1.01);
box-shadow: