fix: onboarding gamepad focus styles + sounds

- glass-button gets orange glow on focus-visible (was suppressed)
- Input fields get orange border on focus-visible
- Restore link made focusable (tabindex, role, keydown.enter)
- Gamepad nav sounds play via existing fallback handler

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian 2026-03-30 09:36:18 +01:00
parent eac6416569
commit 786a06da25
2 changed files with 15 additions and 1 deletions

View File

@ -60,7 +60,6 @@
}
/* Elements with existing styles: suppress the global glow, let their own styles handle it */
.glass-button:focus-visible,
.glass-card:focus-visible,
.sidebar-nav-item:focus-visible,
.path-action-button:focus-visible,
@ -70,6 +69,18 @@ input:focus-visible,
textarea:focus-visible,
select:focus-visible {
box-shadow: unset;
border-color: rgba(251, 146, 60, 0.4);
outline: none;
}
/* Glass button: orange glow on gamepad/keyboard focus */
.glass-button:focus-visible {
outline: none;
box-shadow:
0 0 0 1px rgba(251, 146, 60, 0.5),
0 0 16px rgba(251, 146, 60, 0.25),
0 0 32px rgba(251, 146, 60, 0.1);
border-color: rgba(251, 146, 60, 0.4);
}
/* Mobile touch targets — ensure tappable elements meet 44px minimum */

View File

@ -26,8 +26,11 @@
</button>
<a
tabindex="0"
role="button"
class="text-white/50 hover:text-white/80 underline text-sm cursor-pointer mt-4 block text-center onb-cta"
@click="showRestore = true"
@keydown.enter="showRestore = true"
>
Restore from backup
</a>