From 6313f36ebfbd8aec0967145bae077ea662aa76e3 Mon Sep 17 00:00:00 2001 From: Ole-Morten Duesund Date: Mon, 25 May 2026 14:26:13 +0200 Subject: [PATCH] fix(a11y): give focused anchors a visible underline MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Activity title permalinks and the "Vinterliste" nav logo are styled with color: inherit; text-decoration: none — perfect for a clean visual, but they relied on the generic *:focus-visible outline to signal focus. The outline alone is easy to miss against the activity card border, and a low-vision keyboard user has no underline cue to fall back on. Added an a:focus-visible rule with a slightly larger outline-offset and an underline. Standard anchors (the OSM links, the public-list attribution links) already had their accent colour AND now get the underline on focus too — all wins, no regressions. Surfaced by /audit a11y (keyboard & focus lens). --- frontend/src/styles.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 7952769..eba111e 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -70,6 +70,14 @@ input:focus-visible, button:focus-visible, select:focus-visible, textarea:focus- outline: 2px solid var(--accent); outline-offset: 1px; } +/* Anchors that inherit their colour from the heading or nav (no default link + colour, no default underline) need an extra focus cue beyond the outline, + so keyboard users can be sure they're on an interactive element. */ +a:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + text-decoration: underline; +} button { cursor: pointer;