fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design-System: Fokus vereinheitlichen, Formularfeld-Ring WCAG-fest machen

Browse Source 
Letzter Teil. base.css hatte längst eine globale :focus-visible-Regel, trotzdem
existierten 15 Fokus-Regeln — die meisten davon Ballast.

Fünf Overrides wiederholten die Basisregel praktisch wortgleich (.back-to-top,
.ad-banner__dot, .faq__q, .table-scroll, .btn) und sind ersatzlos entfallen; sie
unterschieden sich höchstens um 1px Offset. Die Basisregel selbst läuft jetzt
über --focus-ring/--focus-offset, .position-card__head wechselt von Akzentrot
auf Weiß. Übrig bleiben zehn Regeln, davon deklarieren nur noch vier überhaupt
eine outline — jede mit Grund (inset-Offset bei .tab und .position-card__head,
geschichteter Ring beim Formularfeld). Die anderen sechs sind reine Zusatz-
effekte (transform, Farbe, Fläche) und lassen den Basis-Ring durch.

Der eigentliche Fund steckte im Formularfeld: es setzte outline: none und
ersetzte den Ring durch einen roten Rahmen mit 30%-Glow. Akzentrot erreicht auf
der Feldfläche aber nur 2,8:1 und verfehlt damit WCAG 1.4.11 (>=3:1) für
Fokus-Indikatoren — Tastaturnutzer hatten dort also den schwächsten Fokus der
ganzen Seite. Roter Rahmen und Glow bleiben als Marken-Signal, der weiße
Standard-Ring kommt zurück; outline-offset entspricht der Glow-Breite, beide
Ringe liegen bündig nebeneinander statt übereinander.

CLAUDE.md dokumentiert die neuen Regeln: Token-Disziplin mit Tabelle (Spacing,
Typo, Icons, Sperrung, Fokus, Trefferfläche) samt der bewussten em-Ausnahme,
das Button- und Tab-System inklusive der (0,2,0)-Falle durch die
CSS-Ladereihenfolge, und die Fokus-Regel. Dazu ein Punkt in der Checkliste.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU
This commit is contained in:
Felix Schneider
2026-07-27 10:33:53 +02:00
parent eacf9449e0
commit 82cf21085d
5 changed files with 54 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
public/assets/css/components.css
View File

@@ -1106,7 +1106,7 @@
}
.position-card__head:focus-visible {
outline: 2px solid var(--clr-accent);
outline: var(--focus-ring);
outline-offset: -2px;
}
@@ -1342,11 +1342,16 @@
border-color: var(--clr-field-border-hover);
}
/* Markenroter Fokus-Ring (Akzent nur als Rahmen/Glow, nie als Text). */
/* Roter Rahmen + Glow als Marken-Signal, dazu der weiße Standard-Ring.
Der rote Rahmen allein reichte nicht: Akzentrot kommt auf der Feldfläche nur
auf 2,8:1 und verfehlt damit WCAG 1.4.11 (>=3:1) für Fokus-Indikatoren.
outline-offset entspricht der Glow-Breite, beide Ringe liegen also bündig
nebeneinander statt übereinander. */
.form__field input:focus-visible,
.form__field select:focus-visible,
.form__field textarea:focus-visible {
outline: none;
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
border-color: var(--clr-accent);
box-shadow: 0 0 0 3px rgb(var(--clr-accent-rgb) / 0.3);
}
@@ -1818,11 +1823,6 @@
background: rgb(255 255 255 / 0.35);
}
.ad-banner__dot:focus-visible {
outline: 2px solid var(--clr-text);
outline-offset: 3px;
}
.ad-banner__progress {
background: var(--clr-accent);
transform: scaleX(0);
@@ -2524,11 +2524,6 @@
color: var(--clr-text-muted);
}
.faq__q:focus-visible {
outline: 2px solid var(--clr-text);
outline-offset: 2px;
}
.faq__chevron {
flex: none;
font-size: var(--icon-s);
@@ -3695,7 +3690,6 @@
font-size: var(--fs-600);
}
/* Band „Nächste Spiele" — abgesetzte Fläche (.section--sunken) mit roter Oberkante,
damit der Bereich nicht als Hero-Überhang gelesen wird. */
.next-matches {
@@ -3942,11 +3936,6 @@ a.match-row__link:hover {
}
}
.table-scroll:focus-visible {
outline: 2px solid var(--clr-text);
outline-offset: 2px;
}
.league-table {
width: 100%;
min-width: 520px;