← back to Thesetdecorator
TSD a11y: add keyboard focus-visible ring to games page
2201e362f153bf0194f2c414985dca47f7d272b2 · 2026-06-03 07:58:14 -0700 · SteveStudio2
css/games.css had 0 focus styles (main.css has them) — keyboard users got no
visible focus on game buttons/choices/cards. Added :focus-visible neon outline
for .btn-neon/.btn-ghost/.choice/.card/.back + a/button fallback. Mouse clicks
stay clean (:focus-visible only).
yolo audit item #2 · local only, no deploy.
Files touched
Diff
commit 2201e362f153bf0194f2c414985dca47f7d272b2
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date: Wed Jun 3 07:58:14 2026 -0700
TSD a11y: add keyboard focus-visible ring to games page
css/games.css had 0 focus styles (main.css has them) — keyboard users got no
visible focus on game buttons/choices/cards. Added :focus-visible neon outline
for .btn-neon/.btn-ghost/.choice/.card/.back + a/button fallback. Mouse clicks
stay clean (:focus-visible only).
yolo audit item #2 · local only, no deploy.
---
public/css/games.css | 14 ++++++++++++++
1 file changed, 14 insertions(+)
diff --git a/public/css/games.css b/public/css/games.css
index 4f823fe..18c04e3 100644
--- a/public/css/games.css
+++ b/public/css/games.css
@@ -125,6 +125,20 @@ a { color: var(--wwhl-neon-2); }
.row.center { justify-content:center; }
small { color: var(--wwhl-text-dim); }
+/* Keyboard focus — visible focus ring for a11y (was missing entirely).
+ Mouse clicks stay clean via :focus-visible; keyboard/tab shows the neon ring. */
+.btn-neon:focus-visible,
+.btn-ghost:focus-visible,
+.choice:focus-visible,
+.card:focus-visible,
+.games-header .back:focus-visible,
+a:focus-visible,
+button:focus-visible {
+ outline: 2px solid var(--wwhl-neon-2);
+ outline-offset: 2px;
+ border-radius: 6px;
+}
+
/* Responsive */
@media (max-width:640px) {
.games-main { padding: 1rem; }
← ad4d3ff TSD a11y/SEO: one <h1> per page (demote secondary H1s to h2)
·
back to Thesetdecorator
·
backlog: mark audit items #1-3 done (h1, games focus, lazy-l 05c9188 →