feat(a11y): visible focus ring on design cards via :focus-visible — keyboard Tab navigation gets a 3px accent outline; mouse-click hides via :has(:focus-visible) negation; falls back to :focus-within on older browsers

8a9c08fbf8f551d217cbfeaaf2b53f0e9a2dcf6d · 2026-05-14 11:06:25 -0700 · SteveStudio2

Files touched

M public/css/site.css

Diff

commit 8a9c08fbf8f551d217cbfeaaf2b53f0e9a2dcf6d
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 14 11:06:25 2026 -0700

    feat(a11y): visible focus ring on design cards via :focus-visible — keyboard Tab navigation gets a 3px accent outline; mouse-click hides via :has(:focus-visible) negation; falls back to :focus-within on older browsers
---
 public/css/site.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/public/css/site.css b/public/css/site.css
index b01d770..fb545f3 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -299,6 +299,23 @@ main { padding-top: 73px; }
   color: inherit;
   outline: none;
 }
+/* Visible focus ring when navigating by keyboard. Uses :focus-visible so a
+   mouse click on a card doesn't paint a ring — only keyboard Tab does.
+   The ring sits on the wrapper so it surrounds the whole card (image + meta)
+   and contrasts against any pattern via the white inner shadow + accent outline. */
+.design-card:focus-within {
+  outline: 3px solid var(--accent, #c9a14b);
+  outline-offset: 2px;
+  border-radius: 1px;
+  z-index: 3;
+}
+.design-card:hover:not(:focus-within) { outline: none; }
+/* Mouse-click focus shouldn't paint the ring. :has(:focus-visible) scopes it
+   to true keyboard focus only (Safari ≥15.4, Chrome 105+, FF 121+; falls
+   back to :focus-within above for older browsers). */
+@supports selector(:has(*)) {
+  .design-card:focus-within:not(:has(:focus-visible)) { outline: none; }
+}
 .design-card {
   display: block;
   text-decoration: none;

← f757e73 feat(/designs): hue swatches 14px → 20px for tap-friendly mo · back to Wallco Ai · feat(/design/:id): breadcrumb back-link inherits the filtere 9a35a77 →