fix(a11y): sechs Bestands-Verstoesse beheben, Ausnahmen ersatzlos entfernen (#60)

[pseidler89-sudo]

Folge-PR zu #71. Der dort gebaute a11y-Job hat sechs belegte Verstöße gefunden und als benannte Ausnahmen eingefroren. Dieser PR behebt sie wirklich und nimmt die Ausnahmen aus beiden Configs ersatzlos heraus.

Die Fixes

1 + 2 · duplicate-id-aria (critical, 2x) und form-field-multiple-labels (moderate, 2x) auf /

RegionEinstieg steht auf der Startseite zweimal (Hero + CTA-Wiederholung) und vergab die IDs statisch (plz, plz-funktion, plz-fehler, plz-hinweis) — jede ID existierte doppelt.

Real spürbar war das an der Label-Zuordnung: <label for="plz"> zeigt immer auf das erste Feld im Dokument. Ein Klick auf das Label des unteren Formulars sprang nach oben, Screenreader lasen die Beschreibung des falschen Feldes vor.

Fix: useId() statt fester Suffixe — ein Suffix trägt nur so lange, wie die Zahl der Instanzen bekannt ist. htmlFor, aria-describedby sowie die Fehler- und Hinweisknoten ziehen mit. name="plz" bleibt (Formularfeld-Name, keine ID).

3 · heading-order (moderate, 1x) auf /umfragen

In der anonymen Sicht folgten die Gruppentitel (Ortsteil/Kommune/Kreis/Land) als h3 direkt auf die Seiten-h1 — Ebenensprung. GruppierteListe bekommt eine Prop ebene (Default 3, die eingeloggte Sicht bleibt unter ihrer Sektions-h2 unverändert); die anonyme Sicht rendert h2. Es ändert sich nur die Ebene — die Klassen und damit die Optik sind identisch.

4 · link-in-text-block (serious, 1x) auf /anliegen

Der Link im Fließtext unterschied sich nur farblich vom umgebenden Text; hover:underline greift erst beim Hover — wer nicht mit der Maus darüberfährt (Touch, Tastatur, Restsehen), sieht es nie.

Das Muster steckt an ~70 Stellen im Repo, deshalb nicht punktuell, sondern eine Basis-Regel in globals.css: jeder <a> in einem <p> ist dauerhaft unterstrichen (ausgenommen .pz-btn — die tragen Fläche und Rahmen als Nicht-Farb-Merkmal). So schleppt auch der nächste neu geschriebene Fließtext-Link den Verstoß nicht wieder ein. Geprüft: es gibt aktuell keinen button-artigen <a> innerhalb eines <p>, die Regel trifft also nur echten Fließtext.

Ausnahmen entfernt

Aus .pa11yci.js und .pa11yci.streng.js sind duplicate-id-aria, form-field-multiple-labels, heading-order und link-in-text-block samt ihrer Kommentarblöcke raus.

Geblieben: die color-contrast-Ausnahme auf / in .pa11yci.streng.js. Sie ist keine Altlast, sondern die dokumentierte Grenze bei Verlaufshintergründen (axe kann dort prinzipiell nicht rechnen). An der Gate-Mechanik selbst ändert sich nichts.

Verifikation

Lokal gegen npm run start:standalone mit PILOT_TENANT_SLUG=taunusstein, frische DB (migrate + seed:regions + seed):

npm run a11y → Exit 0, beide Läufe ohne die entfernten Ausnahmen:

a11y-preflight bestanden — pa11y prüft echte, gestylte Tenant-Seiten.
Running Pa11y on 4 URLs:
 > http://127.0.0.1:3000/ - 0 errors
 > http://127.0.0.1:3000/umfragen - 0 errors
 > http://127.0.0.1:3000/anliegen - 0 errors
 > http://127.0.0.1:3000/anmelden - 0 errors
✔ 4/4 URLs passed
Running Pa11y on 4 URLs:
 > http://127.0.0.1:3000/ - 0 errors
 > http://127.0.0.1:3000/umfragen - 0 errors
 > http://127.0.0.1:3000/anliegen - 0 errors
 > http://127.0.0.1:3000/anmelden - 0 errors
✔ 4/4 URLs passed

Zusätzlich am gerenderten DOM von Hand geprüft (Gate-Grün allein beweist nicht, dass die Zuordnung fachlich stimmt — eine ID kann eindeutig und trotzdem falsch verdrahtet sein):

• Startseite: 10 ID-Attribute, 0 doppelte.
• Formular 1: input#_R_24lfmbtb_-plz, label[for] identisch, label.control === input (Browser-eigene Auflösung), input.labels.length === 1.
• Formular 2: input#_R_9lfmbtb_-plz, ebenso, input.labels.length === 1.
• Label-Klick Formular 1 → Fokus in Formular 1; Label-Klick Formular 2 → Fokus in Formular 2 (genau der Schaden, den die doppelten IDs verursacht haben).
• Fehlerpfad: unbekannte PLZ ins zweite Formular → dessen aria-describedby wächst auf …-plz-funktion …-plz-hinweis, beide Knoten liegen im zweiten Block; das erste Feld bleibt unberührt, weiter keine doppelten IDs.
• /umfragen anonym: Überschriften h1 → h2 → h3 → h2 → h3 → h2 → h3, keine Ebenensprünge.
• /anliegen: beide Fließtext-Links haben im Ruhezustand text-decoration-line: underline.

npm run lint → Exit 0 · npm run typecheck → Exit 0 · npx vitest run → Exit 0, 95 Dateien / 1168 Tests grün.

🤖 Generated with Claude Code

https://claude.ai/code/session_01BervJUSWK8ymMbcuBuu9d9