olemd/vinterliste
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

fix(a11y): give focused anchors a visible underline

Browse source 
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).
This commit is contained in:
Ole-Morten Duesund 2026-05-25 14:26:13 +02:00
commit 6313f36ebf
1 changed files with 8 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/styles.css
View file

@ -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;