From bc317693e34e9071978ae2b09ef7547356587b86 Mon Sep 17 00:00:00 2001
From: "Patrick Seidler (via Claude Code)" <p.seidler89@googlemail.com>
Date: Sun, 26 Jul 2026 12:46:31 +0000
Subject: [PATCH] fix(a11y): sechs Bestands-Verstoesse beheben, Ausnahmen
 ersatzlos entfernen (#60)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der a11y-CI-Job aus PR #71 hat auf den Kernseiten sechs belegte Verstoesse
gefunden und sie als benannte Ausnahmen eingefroren. Dieser PR behebt sie und
nimmt die Ausnahmen aus BEIDEN Configs wieder heraus.

1) duplicate-id-aria (critical, 2x) + form-field-multiple-labels (moderate, 2x)
   auf /: RegionEinstieg steht auf der Startseite zweimal (Hero + CTA-
   Wiederholung) und vergab die IDs statisch — jede ID existierte doppelt.
   Real spuerbar an der Label-Zuordnung: <label for="plz"> zeigt immer auf das
   ERSTE Feld, ein Klick auf das Label des unteren Formulars sprang nach oben,
   Screenreader lasen die falsche Beschreibung vor. Jetzt useId() statt fester
   Suffixe (skaliert auf beliebig viele Instanzen); htmlFor, aria-describedby
   und die Fehler-/Hinweisknoten ziehen mit.

2) 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, eingeloggte Sicht unveraendert unter ihrer Sektions-h2); die
   anonyme Sicht rendert h2. Nur die Ebene aendert sich, die Klassen und damit
   die Optik bleiben identisch.

3) link-in-text-block (serious, 1x) auf /anliegen: Der Link im Fliesstext war
   nur farblich vom Text unterschieden, `hover:underline` greift erst beim
   Hover. Statt punktuell: eine Basis-Regel in globals.css unterstreicht jeden
   <a> in einem <p> dauerhaft (ausser .pz-btn). So schleppt auch der naechste
   neu geschriebene Fliesstext-Link den Verstoss nicht wieder ein.

Ausnahmen entfernt: duplicate-id-aria, form-field-multiple-labels,
heading-order und link-in-text-block samt Kommentarbloecken aus .pa11yci.js und
.pa11yci.streng.js. Die color-contrast-Ausnahme auf / bleibt — sie ist keine
Altlast, sondern die dokumentierte Grenze bei Verlaufshintergruenden.

Verifiziert: beide pa11y-Laeufe gruen ohne die Ausnahmen (4/4 URLs, 0 errors),
Label-Zuordnung am gerenderten DOM geprueft (IDs eindeutig, label.control zeigt
je auf das Feld im eigenen Formular, Label-Klick fokussiert das richtige Feld,
Hinweisknoten haengt am ausloesenden Formular).

Co-Authored-By: Claude <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BervJUSWK8ymMbcuBuu9d9
---
 app/.pa11yci.js                         | 15 +--------
 app/.pa11yci.streng.js                  | 44 +++++--------------------
 app/src/app/[tenant]/RegionEinstieg.tsx | 32 ++++++++++++++----
 app/src/app/[tenant]/umfragen/page.tsx  | 22 ++++++++++---
 app/src/app/globals.css                 | 15 +++++++++
 5 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/app/.pa11yci.js b/app/.pa11yci.js
index 9cbf34a..844fe0c 100644
--- a/app/.pa11yci.js
+++ b/app/.pa11yci.js
@@ -109,21 +109,8 @@ module.exports = {
       ignore: [],
     },
     {
-      _kommentar_ignore: [
-        "ALTLAST, eingefroren am 2026-07-26 — abzubauen, nicht auszuweiten.",
-        "Regel: link-in-text-block · Seite: /anliegen · Element:",
-        '#main-content > main > p > a → <a href="/<tenant>/konto" ...>Konto unter',
-        "„Meine Anliegen“</a>. Der Link im Fließtext ist nur farblich (--pz-brand-strong)",
-        "vom umgebenden Text unterschieden; 'hover:underline' greift erst beim Hover.",
-        "Grund für die Ausnahme: dieser PR friert den Bestand ein und ändert",
-        "bewusst KEINE UI (Issue #60). Fix gehört in einen eigenen PR (Unterstreichung",
-        "im Ruhezustand oder ausreichender Nicht-Farb-Unterschied); danach diese",
-        "Ausnahme in BEIDEN Configs ersatzlos entfernen.",
-        "Die Ausnahme gilt regel- UND seitengenau: auf allen anderen URLs blockt",
-        "link-in-text-block weiterhin hart.",
-      ],
       url: url("/anliegen"),
-      ignore: ["link-in-text-block"],
+      ignore: [],
     },
     {
       url: url("/anmelden"),
diff --git a/app/.pa11yci.streng.js b/app/.pa11yci.streng.js
index 3a3c3b7..2d26a53 100644
--- a/app/.pa11yci.streng.js
+++ b/app/.pa11yci.streng.js
@@ -32,7 +32,7 @@
  * Beide Läufe zusammen decken auf den vier geprüften Seiten alle axe-Regeln des
  * Standards WCAG2AA ab, in jeder Impact-Klasse, sowohl `violations` als auch
  * `incomplete` — mit der einen dokumentierten Ausnahme `color-contrast`/`/` aus
- * Punkt 3 und den unten eingefrorenen Altlasten. Was das Gate NICHT sieht:
+ * Punkt 3. Sonst gibt es keine Ausnahme mehr. Was das Gate NICHT sieht:
  * andere Seiten (siehe .pa11yci.js: nur vier anonyme Sichten), alles was
  * Interaktion braucht (Fokus-Reihenfolge, Tastaturbedienung, Live-Regionen nach
  * einer Aktion), und alles, was automatisierte Prüfung grundsätzlich nicht
@@ -58,44 +58,16 @@ const AUSNAHMEN = {
    *   Abbau: nur mit einem einfarbigen Hero-Hintergrund. Kein Ziel für sich —
    *          echte Kontrast-VERSTÖSSE blockt LAUF 1 auf dieser Seite weiterhin.
    *
-   * `duplicate-id-aria` — ALTLAST, eingefroren am 2026-07-26.
-   *   Regel: duplicate-id-aria · Seite: / · Elemente: id="plz" und
-   *          id="plz-funktion" existieren auf der Startseite je zweimal
-   *          (Hero-Formular und zweites Formular weiter unten).
-   *   Grund: 2 belegte Verstöße (Impact critical). Dieser PR baut das GATE und
-   *          ändert bewusst keine UI-Datei; der Fix ist ein eigener PR.
-   *   Abbau: IDs eindeutig machen (z. B. Suffix je Formular-Instanz) und diese
-   *          Ausnahme dann ERSATZLOS entfernen — der Folge-PR nimmt sie mit raus.
-   *
-   * `form-field-multiple-labels` — ALTLAST, eingefroren am 2026-07-26.
-   *   Regel: form-field-multiple-labels · Seite: / · Elemente: dieselben zwei
-   *          PLZ-Felder, die durch die doppelten IDs je zwei <label> einsammeln.
-   *   Grund: Impact moderate, Folgefehler der doppelten IDs. Gleiche Begründung
-   *          wie oben: keine UI-Änderung in diesem PR.
-   *   Abbau: verschwindet mit dem duplicate-id-aria-Fix von selbst; Ausnahme im
-   *          selben Folge-PR ersatzlos entfernen.
+   * Die vier am 2026-07-26 eingefrorenen Altlasten (`duplicate-id-aria` und
+   * `form-field-multiple-labels` auf `/`, `heading-order` auf `/umfragen`,
+   * `link-in-text-block` auf `/anliegen`) sind behoben und ihre Ausnahmen
+   * ersatzlos entfernt — die Regeln blocken jetzt auf allen Seiten hart.
    */
-  "/": ["color-contrast", "duplicate-id-aria", "form-field-multiple-labels"],
+  "/": ["color-contrast"],
 
-  /**
-   * `heading-order` — ALTLAST, eingefroren am 2026-07-26.
-   *   Regel: heading-order · Seite: /umfragen · Element: eine Überschrift
-   *          springt eine Ebene (h2 → h4) statt lückenlos zu staffeln.
-   *   Grund: 1 belegter Verstoß (Impact moderate). Erst durch `includeWarnings`
-   *          in diesem Lauf überhaupt sichtbar geworden. Keine UI-Änderung in
-   *          diesem PR.
-   *   Abbau: Überschriftenebene korrigieren, danach diese Ausnahme ersatzlos
-   *          entfernen.
-   */
-  "/umfragen": ["heading-order"],
+  "/umfragen": [],
 
-  /**
-   * `link-in-text-block` — ALTLAST, eingefroren am 2026-07-26.
-   *   Identisch zur Ausnahme in .pa11yci.js (dort steht die volle Begründung).
-   *   Muss in BEIDEN Configs stehen, weil beide Läufe die Seite prüfen, und im
-   *   selben Folge-PR aus beiden verschwinden.
-   */
-  "/anliegen": ["link-in-text-block"],
+  "/anliegen": [],
 
   "/anmelden": [],
 };
diff --git a/app/src/app/[tenant]/RegionEinstieg.tsx b/app/src/app/[tenant]/RegionEinstieg.tsx
index fbb44e1..ff698e9 100644
--- a/app/src/app/[tenant]/RegionEinstieg.tsx
+++ b/app/src/app/[tenant]/RegionEinstieg.tsx
@@ -8,7 +8,7 @@
  * Schwelle, ohne Konto. Die Wahl wird gemerkt; „Region ändern" ist später möglich.
  */
 
-import { useState, useTransition } from "react";
+import { useId, useState, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import {
   regionAusPlz,
@@ -39,6 +39,24 @@ export function RegionEinstieg({
   onErfolg?: () => void;
 }) {
   const router = useRouter();
+  /**
+   * Eindeutige IDs je Instanz (a11y-Gate, Issue #60). Die Komponente steht auf
+   * der Startseite ZWEIMAL im selben Dokument (Hero + CTA-Wiederholung) und
+   * zusätzlich auf /umfragen sowie im Konto. Mit statischen IDs (`plz`,
+   * `plz-funktion`, …) existierte jede ID doppelt: `duplicate-id-aria`
+   * (Impact critical) plus `form-field-multiple-labels` als Folgefehler.
+   * Real spürbar ist das an der Label-Zuordnung — `<label for="plz">` zeigt
+   * IMMER auf das erste Feld im Dokument; ein Klick auf das Label des unteren
+   * Formulars springt also nach oben, und Screenreader lesen die Beschreibung
+   * des falschen Feldes vor.
+   * `useId()` statt fester Suffixe, weil ein Suffix nur so lange trägt, wie die
+   * Zahl der Instanzen bekannt ist; useId skaliert auf beliebig viele.
+   */
+  const idBasis = useId();
+  const plzId = `${idBasis}-plz`;
+  const funktionId = `${idBasis}-plz-funktion`;
+  const fehlerId = `${idBasis}-plz-fehler`;
+  const hinweisId = `${idBasis}-plz-hinweis`;
   const [plz, setPlz] = useState("");
   const [fehler, setFehler] = useState<string | null>(null);
   const [hinweis, setHinweis] = useState<string | null>(null);
@@ -124,17 +142,17 @@ export function RegionEinstieg({
       }
     >
       <form onSubmit={handlePlzSubmit} noValidate>
-        <label htmlFor="plz" className="block text-sm font-medium" style={{ color: "var(--pz-ink)" }}>
+        <label htmlFor={plzId} className="block text-sm font-medium" style={{ color: "var(--pz-ink)" }}>
           Ihre Postleitzahl
         </label>
         {/* Funktions-Erklärung (P2 §Empf. 7): was die PLZ bewirkt — der Datenschutz-
             Hinweis steht weiterhin unten. */}
-        <p id="plz-funktion" className="mt-1 text-xs" style={{ color: "var(--pz-muted)" }}>
+        <p id={funktionId} className="mt-1 text-xs" style={{ color: "var(--pz-muted)" }}>
           Ihre PLZ bestimmt, welche Abstimmungen Sie sehen.
         </p>
         <div className="mt-2 flex gap-2">
           <input
-            id="plz"
+            id={plzId}
             name="plz"
             inputMode="numeric"
             autoComplete="postal-code"
@@ -144,7 +162,7 @@ export function RegionEinstieg({
             disabled={busy}
             className="w-full rounded-lg border border-[color:var(--pz-line)] bg-pz-surface px-3 py-2.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--pz-brand)]"
             style={{ color: "var(--pz-ink)" }}
-            aria-describedby={`plz-funktion${fehler ? " plz-fehler" : hinweis ? " plz-hinweis" : ""}`}
+            aria-describedby={`${funktionId}${fehler ? ` ${fehlerId}` : hinweis ? ` ${hinweisId}` : ""}`}
           />
           <button
             type="submit"
@@ -173,12 +191,12 @@ export function RegionEinstieg({
       </button>
 
       {fehler && (
-        <p id="plz-fehler" className="mt-3 text-sm" style={{ color: "#b42318" }} role="alert">
+        <p id={fehlerId} className="mt-3 text-sm" style={{ color: "#b42318" }} role="alert">
           {fehler}
         </p>
       )}
       {hinweis && (
-        <div id="plz-hinweis" className="mt-3 rounded-lg border border-dashed border-[color:var(--pz-line)] bg-pz-surface p-3">
+        <div id={hinweisId} className="mt-3 rounded-lg border border-dashed border-[color:var(--pz-line)] bg-pz-surface p-3">
           <p className="text-sm" style={{ color: "var(--pz-body)" }}>{hinweis}</p>
           <button
             type="button"
diff --git a/app/src/app/[tenant]/umfragen/page.tsx b/app/src/app/[tenant]/umfragen/page.tsx
index 3824ee9..442766e 100644
--- a/app/src/app/[tenant]/umfragen/page.tsx
+++ b/app/src/app/[tenant]/umfragen/page.tsx
@@ -155,29 +155,41 @@ function PollKarte({
   );
 }
 
-/** Liste, nach Ebene (Ortsteil/Kommune/Kreis/Land) gruppiert. */
+/**
+ * Liste, nach Ebene (Ortsteil/Kommune/Kreis/Land) gruppiert.
+ *
+ * `ebene` steuert NUR die Überschriften-Ebene der Gruppentitel, nicht ihr
+ * Aussehen (a11y-Gate `heading-order`, Issue #60): in der eingeloggten Sicht
+ * steht die Liste unter einer Sektions-h2 („Für Sie offen") → die Gruppentitel
+ * sind h3. In der anonymen Sicht folgt die Liste direkt auf die Seiten-h1 → dort
+ * wäre h3 ein Ebenensprung (h1 → h3), also h2. Die Optik ist in beiden Fällen
+ * identisch, weil die Klassen dieselben bleiben.
+ */
 function GruppierteListe({
   slug,
   items,
   cta,
   institution,
+  ebene = 3,
 }: {
   slug: string;
   items: PollMitErgebnis[];
   cta: string;
   institution: string;
+  ebene?: 2 | 3;
 }) {
   const gruppen = gruppiereNachEbene(items);
+  const GruppenTitel = ebene === 2 ? "h2" : "h3";
   return (
     <div className="space-y-7">
       {gruppen.map((g) => (
         <div key={g.typ}>
-          <h3
+          <GruppenTitel
             className="mb-2.5 text-xs font-semibold uppercase tracking-wide"
             style={{ color: "var(--pz-muted)" }}
           >
             {g.label}
-          </h3>
+          </GruppenTitel>
           <ul className="space-y-4">
             {g.polls.map((p) => (
               <li key={p.id}>
@@ -321,7 +333,9 @@ export default async function UmfragenListePage({ params }: PageProps) {
         {aktiveMitErgebnis.length === 0 ? (
           <LeerHinweis text="Gerade läuft keine Abstimmung für Ihre Region." />
         ) : (
-          <GruppierteListe slug={slugFromPath} items={aktiveMitErgebnis} cta="Anmelden zum Mitstimmen" institution={institution} />
+          /* Anonyme Sicht: die Gruppentitel folgen direkt auf die Seiten-h1,
+             also h2 statt h3 — sonst Ebenensprung (`heading-order`, Issue #60). */
+          <GruppierteListe slug={slugFromPath} items={aktiveMitErgebnis} cta="Anmelden zum Mitstimmen" institution={institution} ebene={2} />
         )}
 
         {beendeteMitErgebnis.length > 0 && (
diff --git a/app/src/app/globals.css b/app/src/app/globals.css
index 159be9b..604d693 100644
--- a/app/src/app/globals.css
+++ b/app/src/app/globals.css
@@ -70,6 +70,21 @@
   p {
     text-wrap: pretty;
   }
+  /* Fließtext-Links (WCAG 1.4.1 „Use of Color", axe-Regel `link-in-text-block`,
+     Issue #60): ein Link INNERHALB eines Textblocks darf sich nicht allein durch
+     die Farbe vom umgebenden Text unterscheiden — er braucht ein Nicht-Farb-
+     Merkmal im RUHEZUSTAND. `hover:underline` genügt dafür nicht: wer nicht mit
+     der Maus darüberfährt (Touch, Tastatur, Restsehen), sieht es nie.
+     Deshalb zentral hier statt pro Aufrufer — so schleppt auch der nächste neu
+     geschriebene Fließtext-Link den Verstoß nicht wieder ein.
+     Ausgenommen: Links, die als Button auftreten (.pz-btn) — die tragen Fläche
+     und Rahmen als Nicht-Farb-Merkmal. Utility-Klassen (z. B. `no-underline`)
+     stechen diese Regel weiterhin, weil Tailwind-Utilities in einer späteren
+     Cascade-Layer stehen. */
+  p a:not(.pz-btn) {
+    text-decoration-line: underline;
+    text-underline-offset: 0.2em;
+  }
 }
 
 /* ===========================================================================