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

Formular-Regeln in CLAUDE.md; A11y-Fixes: Feldränder 3:1-Kontrast (neuer Token), Checkbox 24px + größeres Label, aria-live-Region nie display:none

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-06-11 21:59:34 +02:00
parent ee0d6866ea
commit b95a0bce2d
3 changed files with 49 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -331,7 +331,7 @@
width: 100%;
padding: 10px 12px;
background: var(--clr-glass-bg);
border: 1px solid var(--clr-glass-border);
border: 1px solid var(--clr-glass-border-strong);
border-radius: var(--radius-btn);
color: var(--clr-text);
transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
@@ -340,7 +340,7 @@
.form__field input:hover,
.form__field select:hover,
.form__field textarea:hover {
border-color: rgb(255 255 255 / 0.4);
border-color: rgb(255 255 255 / 0.55);
}
/* Eigener, deutlich sichtbarer Fokus-Ring statt des globalen Outlines */
@@ -416,19 +416,25 @@
}
.form__field--checkbox input {
width: 1.25rem;
height: 1.25rem;
margin-top: 0.2rem;
/* 24px — Mindest-Zielgröße (WCAG 2.5.8) */
width: 1.5rem;
height: 1.5rem;
margin-top: 0.1rem;
accent-color: var(--clr-accent);
}
.form__field--checkbox label {
font-size: var(--fs-400);
color: var(--clr-text-muted);
font-size: var(--fs-500);
}
/* Leer: unsichtbar, aber im Accessibility-Tree — display:none würde die
aria-live-Region abmelden und Screenreader verpassen die erste Meldung. */
.form__status:empty {
display: none;
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.form__success {
@@ -601,25 +607,21 @@
outline-offset: 3px;
}
/* Pause-Symbol (zwei Balken) im Abspiel-Zustand … */
.ad-banner__toggle::before {
content: "";
display: block;
width: 4px;
height: 13px;
border-left: 4px solid currentColor;
border-right: 4px solid currentColor;
.ad-banner__toggle-icon {
font-size: 1.15rem;
}
/* … Play-Dreieck, wenn pausiert. */
.ad-banner__toggle[aria-pressed="true"]::before {
width: 0;
height: 0;
margin-left: 3px;
border: 0;
border-left: 13px solid currentColor;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
/* Pause-Icon im Abspiel-Zustand, Play-Icon wenn pausiert. */
.ad-banner__toggle .ad-banner__toggle-icon--play {
display: none;
}
.ad-banner__toggle[aria-pressed="true"] .ad-banner__toggle-icon--pause {
display: none;
}
.ad-banner__toggle[aria-pressed="true"] .ad-banner__toggle-icon--play {
display: inline-block;
}
/* Indikatorleiste — die aktive Leiste füllt sich über --banner-interval. */