Feature: Barrierefreiheit

TODO-a11y.md

@@ -1,85 +1,111 @@
-# Barrierefreiheit (a11y) TODO-Liste
-
-Diese Liste enthält Aufgaben zur Verbesserung der Barrierefreiheit der 1200-Jahre-Radolfzell App, sortiert nach Priorität.
+# Barrierefreiheit (a11y) – Konsolidierte TODO-Liste
 
 ## Hohe Priorität
 
-1. **Semantische HTML-Struktur überprüfen**
-   - Sicherstellen, dass alle Komponenten semantisch korrektes HTML verwenden (header, nav, main, section, article, footer)
-   - Besonders wichtig für: HeaderComponent, FooterComponent, BottomNavComponent
+1. Semantische Struktur (Landmarks)
+   - [x] App-Shell nutzt semantische Landmarks: <header>, <main id="main-content" role="main" tabindex="-1">, <footer> (app.component.html)
+   - [x] Komponenten prüfen und ggf. ergänzen (section/article/nav): HeaderComponent, FooterComponent (innerer Inhalt), BottomNavComponent, EventCardComponent
+
+2. Tastaturnavigation
+   - [x] Fokus-Styles vorhanden (Tailwind focus:ring auf .card, Buttons, Links)
+   - [ ] Interaktive Karten/Slider/Carousels per Tastatur bedienbar machen (EventCarouselComponent, MapComponent)
+   - [ ] Tab-Reihenfolge prüfen/optimieren, insbesondere BottomNavComponent
 
-2. **Tastaturnavigation implementieren**
-   - Sicherstellen, dass alle interaktiven Elemente mit der Tastatur bedienbar sind
-   - Fokus-Styles für alle interaktiven Elemente hinzufügen
-   - Tab-Reihenfolge logisch gestalten
-   - Besonders wichtig für: EventCardComponent, KategorieCardComponent, BottomNavComponent
+3. ARIA-Attribute
+   - [x] Erste ARIA-Labels ergänzt (KategorieCard: aria-label; Live-Regionen/role für Updates/Spinner)
+   - [x] aria-current für aktive Navigationslinks einsetzen (z. B. ariaCurrentWhenActive="page" bei Routerlinks)
+   - [ ] aria-expanded/-controls für aufklappbare Bereiche ergänzen (falls vorhanden)
 
-3. **ARIA-Attribute hinzufügen**
-   - Fehlende aria-label für Icons und Buttons ohne Text hinzufügen
-   - aria-expanded für aufklappbare Elemente implementieren
-   - aria-current für aktuelle Navigation hinzufügen
+4. Alt-Texte für Bilder
+  - [ ] Aussagekräftige alt-Texte für alle Bilder, speziell EventCard, Header-Logo, Detailseitenbilder
+  - [ ] Falls rein dekorativ: alt="" setzen
 
-4. **Alt-Texte für Bilder**
-   - Sicherstellen, dass alle Bilder aussagekräftige Alt-Texte haben
-   - Besonders wichtig für: EventCardComponent, HeaderComponent (Logo)
+5. Farbkontraste
+   - [ ] Kontraste (Text/Icons vs. Hintergrund) nach WCAG AA prüfen (4.5:1 normal, 3:1 groß)
+   - [ ] Bei Bedarf Farbwerte/Schriftstärken anpassen
 
-5. **Farbkontraste überprüfen**
-   - Alle Text/Hintergrund-Kombinationen auf ausreichenden Kontrast prüfen (WCAG AA: 4.5:1 für normalen Text, 3:1 für großen Text)
-   - Besonders wichtig für: EventCardComponent, KategorieCardComponent
+6. Live-Regionen & Provider
+   - [x] LiveAnnouncer wird injiziert, aber nirgends bereitgestellt (app.config.ts prüfen und provideLiveAnnouncer hinzufügen)
+   - [x] Update-Hinweis im Root-Template i18n-fähig machen und mit korrekter ARIA-Auszeichnung (role/status, aria-live) versehen
 
 ## Mittlere Priorität
 
-6. **Skip-Links implementieren**
-   - Link zum Überspringen der Navigation zum Hauptinhalt hinzufügen
-   - Besonders wichtig für Screenreader-Nutzer
+6. Skip-Link
+   - [x] Skip-Link implementiert und sichtbar bei Fokus (styles.scss .skip-link)
+   - [x] Fokus bei Navigation auf Hauptinhalt setzen (AppComponent → main.focus())
 
-7. **Formularelemente verbessern**
-   - Labels für alle Formularelemente hinzufügen
-   - Fehlermeldungen für Screenreader zugänglich machen
-   - Autocomplete-Attribute verwenden, wo sinnvoll
+7. Formulare zugänglich machen
+   - [ ] Labels jedem Input zuordnen (for/id oder aria-labelledby)
+   - [ ] Fehlerzustände über aria-live/aria-invalid/aria-describedby ansagen
+   - [ ] Autocomplete-Attribute setzen (z. B. email, name, tel)
+   - [ ] Fokus-Management bei Validierungsfehlern (zum ersten fehlerhaften Feld springen)
 
-8. **Responsive Design für Zoom**
-   - Sicherstellen, dass die Anwendung bei 200% Zoom benutzbar bleibt
-   - Text-Größen in relativen Einheiten (rem, em) definieren
+8. Navigation & Routing
+  - [x] Titelverwaltung: TitleService/TitleStrategy nutzen, Titel pro Route pflegen
+  - [x] LiveAnnouncer für Seitenwechsel (polite) integriert
+  - [x] routerLinkActive + ariaCurrentWhenActive flächendeckend einsetzen (Header/Footer/BottomNav)
+  - [x] Fokus springt nach Navigation auf eine fixe Stelle; Routing-Subscription sauber beenden und Fokusquellen respektieren
+  - [x] Router-Subscription beendet sich nicht korrekt und verursacht wiederholte Fokusfehler (unsubscribe/DestroyRef)
 
-9. **Screenreader-Tests durchführen**
-   - Mit NVDA, JAWS oder VoiceOver die Anwendung testen
-   - Besonders wichtig für: EventCarouselComponent, MapComponent
+9. Dynamische Inhalte
+  - [x] Ladeindikator mit aria-live="polite" und verstecktem Text (COMMON.LOADING)
+  - [x] Update-Benachrichtigung als role="status" (polite)
+  - [x] Weitere dynamische Statusmeldungen (Filterwechsel, Suchtrefferzahl) über LiveRegion announcen
+  - [x] Loading-Spinner: sr-only Text ergänzen, damit versteckte Texte nicht visuell erscheinen und nicht doppelt angesagt werden
 
-10. **Dynamische Inhalte zugänglich machen**
-    - Live-Regions für dynamisch aktualisierte Inhalte verwenden
-    - Statusänderungen für Screenreader ankündigen
+10. Responsive/Zoom
+   - [ ] Nutzbarkeit bei 200% Zoom testen und sicherstellen (Layout bricht nicht, keine Overlays blockieren)
 
 ## Niedrigere Priorität
 
-11. **Dokumentation der Barrierefreiheit**
-    - Barrierefreiheitserklärung erstellen
-    - Bekannte Probleme dokumentieren
+11. Barrierefreiheitserklärung
+   - [x] Seite /barrierefreiheit vorhanden inkl. Grundinhalte (ACCESSIBILITY.*)
+   - [ ] Pflichtangaben ergänzen: Konformitätsstand, Prüfdaten, Prüfverfahren, bekannte Einschränkungen, Kontaktmöglichkeiten
+   - [ ] Feedback-Kanal/Formular einbauen (Kontakt-Link oder simples Formular mit Beschreibungen)
+   - [ ] Barrieren-Meldung ermöglichen (E-Mail/Telefon/Ansprechstelle) und zuständige Stelle benennen
+   - [ ] Externe Links als solche kenntlich machen (Icon/Text + aria-label)
+
+12. Animationen/Bewegungen
+   - [ ] prefers-reduced-motion berücksichtigen (z. B. Spinner/Transitions reduzieren/deaktivieren)
+
+13. Sprachattribute
+   - [ ] lang-Attribut auf <html> dynamisch zur aktuellen Sprache setzen (I18nService/APP_INITIALIZER)
+
+14. Karte/Map
+   - [ ] Alternative Textbeschreibung der Location und Tastatur-Navigation für interaktive Karte
+   - [ ] Adresse als Standardtext zugänglich machen (bereits teils vorhanden, prüfen)
+
+15. Automatisierte A11y-Tests
+   - [ ] Lint-Regeln für Templates: angular-eslint template/accessibility aktivieren
+   - [ ] CI-Audits mit axe-core/Lighthouse
+   - [ ] Manuelle Screenreader-Tests (NVDA/JAWS/VoiceOver) dokumentieren
 
-12. **Animationen und Bewegungen**
-    - Möglichkeit zum Deaktivieren von Animationen anbieten (prefers-reduced-motion)
-    - Besonders wichtig für: EventCarouselComponent
+16. Dialoge
+    - [x] Confirm-Dialog (src/app/component/confirm-dialog/confirm-dialog.component.ts): Escape und Klick außerhalb zum Schließen ermöglichen; Fokus-Handling/Trap prüfen
 
-13. **Sprachattribute**
-    - lang-Attribute für die Hauptsprache und abweichende Sprachinhalte setzen
+## Technische Umsetzung (Status)
 
-14. **Barrierefreiheit der Karte verbessern**
-    - Alternative Darstellung oder Textbeschreibung für die MapComponent anbieten
-    - Tastaturzugänglichkeit für Karteninteraktionen implementieren
+- Angular CDK a11y
+  - [x] @angular/cdk installiert
+  - [x] A11yModule global importiert (app.config.ts → importProvidersFrom)
+  - [x] LiveAnnouncer in AppComponent im Einsatz (Seitenwechsel)
+  - [ ] FocusTrap/FocusMonitor für Dialoge/Overlays einsetzen (falls vorhanden)
 
-15. **Automatisierte Tests**
-    - a11y-Tests in die CI/CD-Pipeline integrieren
-    - axe-core oder ähnliche Tools einbinden
+- I18n & Live-Region
+  - [x] ngx-translate konfiguriert, TranslateModule eingebunden
+  - [x] Texte ergänzt: COMMON.SKIP_TO_MAIN, COMMON.MAIN_CONTENT, COMMON.PAGE_UPDATED, etc.
+  - [x] LiveAnnouncer-Elemente visuell versteckt (styles.scss: .cdk-visually-hidden, .cdk-live-announcer-element)
 
-## Technische Implementierungshinweise
+## Nächste Quick Wins
 
-- Angular CDK a11y-Module für verbesserte Tastaturunterstützung verwenden
-- @angular/cdk/a11y für FocusMonitor und LiveAnnouncer nutzen
-- Erwägen Sie die Verwendung von ngAria
-- Lighthouse oder axe DevTools für regelmäßige Tests verwenden
+- [x] ariaCurrentWhenActive="page" und routerLinkActive in Header/Footer/BottomNav ergänzen
+- [ ] TitleService/TitleStrategy einführen, Route-Titel konsequent setzen/übersetzen
+ - [x] Alt-Texte auf EventCard/Detailseiten ergänzen
+- [ ] Form-Labels/Fehlermeldungen mit aria-Attributen verdrahten (Create/Edit-Formulare)
+- [ ] prefers-reduced-motion in styles.scss berücksichtigen
 
-## Ressourcen
+## Referenzen
 
-- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)
-- [Angular Accessibility Guide](https://angular.io/guide/accessibility)
-- [MDN Web Docs: Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
+- Angular Accessibility Guide: https://angular.dev/guide/accessibility
+- WCAG 2.1 Checkliste: https://www.w3.org/TR/WCAG21/
+- SurrealDB Docs (Datenquelle, nicht a11y-spezifisch): https://surrealdb.com/docs

TODOs.md

@@ -1,43 +1,32 @@
-# TODOs für das Angular 19 Projekt
-
-Basierend auf den Anforderungen in `agents.md` fehlen noch folgende Komponenten oder Implementierungen:
-
-## Internationalisierung (I18n)
-- [x] `ngx-translate` ist installiert und konfiguriert
-- [x] Übersetzungsdateien im `locale/` Verzeichnis vorhanden
-- [x] Verwendung von `TranslateService` in den Komponenten
-- [x] Build-Konfigurationen für mehrere Sprachen (de, en)
-
-## Barrierefreiheit (A11y)
-- [ ] Keine Skip-Links für Tastaturnavigation
-- [ ] Unzureichende ARIA-Attribute in den Komponenten
-- [ ] Kein explizites Fokus-Management implementiert
-- [ ] Keine Verwendung von `LiveAnnouncer` oder `cdkTrapFocus` aus Angular CDK
-
-## State Management
-- [ ] Kein klares State Management (NgRx, ComponentStore oder Signals)
-- [ ] Keine zoneless Change Detection implementiert
-
-## Codequalität & Tests
-- [ ] Keine ESLint-Regeln für i18n konfiguriert
-- [ ] Unzureichende Unit-Tests
-- [ ] Keine E2E-Tests mit Cypress
-
-## Projektstruktur
-- [ ] Keine klare Feature-basierte Architektur / Domain-Driven Design
-- [ ] Unvollständige Ordnerstruktur (z.B. fehlendes `locale/` Verzeichnis)
-
-## Performance & Optimierungen
-- [ ] Keine explizite Verwendung von `OnPush` Change Detection
-- [ ] Keine Vorbereitung für Server-Side Rendering (SSR)
-
-## SurrealDB Integration
-- [ ] Live-Query-Funktionalität nicht vollständigy implementiert
-- [ ] Authentifizierung über SurrealDB nicht implementiert
-
-## Nächste Schritte
-1. Internationalisierung implementieren (höchste Priorität)
-2. Barrierefreiheit verbessern
-3. State Management einführen
-4. Tests hinzufügen
-5. Projektstruktur optimieren
+# TODOs für das Angular‑20 Projekt
+
+Basierend auf den Vorgaben aus `AGENTS.md` sind folgende Punkte offen:
+
+## Angular 20 Konformität
+- [x] `standalone: true` aus allen Komponenten entfernen (z. B. `src/app/pages/admin-event-overview/admin-event-overview.component.ts`, `src/app/component/organizer-input/organizer-input.component.ts`)
+- [ ] Inputs/Outputs/Models komplett auf `input()/output()/model()` umstellen und `EventEmitter` ersetzen (z. B. Organizer-/Location-Input, Image-Upload)
+- [ ] Alle `*ngIf`, `*ngFor`, `*ngTemplateOutlet`, `ngClass` etc. auf native Control-Flow-Syntax und Signal-basierte Bindings migrieren (z. B. Organizer-Edit, Image-Upload, Snack-Bar)
+- [ ] Jede `@for`-Schleife mit stabilem `track`-Ausdruck (IDs) versehen
+- [ ] Zustandsverwaltung in Komponenten (Organizer-/Location-Input, Home, Kategorie, Admin*-Übersichten) auf `signal/computed/effect` + OnPush + DestroyRef umstellen
+
+## Internationalisierung
+- [ ] Von `ngx-translate` auf `provideI18n`/`I18nService` wechseln und alle Hardcoded-Strings (Route-Titel, Buttons, Confirm/Alert-Texte, aria-labels) nach `assets/i18n` auslagern
+- [ ] Systemweite Alerts/Bestätigungen durch übersetzte, a11y-konforme Dialoge ersetzen
+
+## Tailwind & Styling
+- [x] Tailwind Utility-First strikt anwenden und Custom-SCSS (z. B. `.card`, `.action-button`, `.tailwind-table` in `src/styles.scss` sowie component-spezifische `.scss`) abbauen bzw. in `@layer components` überführen
+
+## Accessibility
+- [x] Interaktive Elemente mit validen Semantik-Elementen (Buttons statt `href="javascript:void(0)"`) und übersetzten ARIA-Labels versehen
+- [x] Live-Regionen/`LiveAnnouncer` für Statusmeldungen, Fokus-Management nach Dialogen und keine nativen `confirm/alert` Dialoge mehr
+
+## SurrealDB & Datenfluss
+- [ ] `SurrealdbService` um `signal`-basierte Verbindung, `liveQuery`, Disconnect-Handling und Auth-Flüsse erweitern
+- [ ] Admin-Listen auf Live-Queries mit `DestroyRef`-Cleanup umstellen statt manueller Reloads
+
+## Routing & Struktur
+- [ ] Doppelte Route-Konfigurationen in `src/app/app.routes.ts` entfernen und Seitentitel dynamisch per i18n setzen
+
+## Tests & Qualität
+- [ ] Signal-/Control-Flow-Refactorings mit Unit-Tests absichern (besonders Form-/Listen-Komponenten)
+- [ ] Accessibility-/i18n-Linting aktivieren (wie in AGENTS gefordert) und fehlende Regeln ergänzen

docs/Barrierefreiheit-analysis.md

@@ -0,0 +1,128 @@
+# Schritt-für-Schritt-Anleitung: Barrierefreie Integration in die Jubiläums-App (Coding Camp 2025)
+
+## Projektüberblick
+
+- **Name**: Coding Camp 2025 - 1200 Jahre Radolfzell
+- **Framework**: Angular 19.2.14
+- **Datenbank**: SurrealDB
+- **URL**: [1200-jahre-radolfzell.sybit.education](https://1200-jahre-radolfzell.sybit.education)
+- **Beschreibung**: Jubiläums-App für 1200 Jahre Radolfzell
+
+## Accessibility-Audit (Februar 2025)
+
+- **Interaktive Elemente**: Alle Admin-Tabellen (Events, Locations, Organizers) verwenden Buttons statt Dummy-Links (`src/app/pages/admin-*-overview/*.html`). Alle Click-Targets besitzen verständliche Texte oder `aria-labels`.
+- **Dialoge**: Native `confirm`/`alert`-Aufrufe wurden vollständig durch das barrierefreie `ConfirmDialogComponent` (`src/app/component/confirm-dialog/confirm-dialog.component.*`) ersetzt. Dieses Component setzt `role="alertdialog"`, fokussiert automatisch die Primäraktion und lässt sich per Escape schließen.
+- **Live-Regionen**: Kritische Statusmeldungen werden über `LiveAnnouncer` ausgesprochen (z. B. `src/app/pages/admin-event-overview/admin-event-overview.component.ts`, `.../admin-location-overview/...`, `.../location-edit/...`, `.../event-create/...`). Dadurch werden Lösch- und Speichervorgänge screenreader-freundlich angekündigt.
+- **Warnhinweise**: Formularseiten zeigen statusrelevante Informationen in mit `role="status"` versehenen Bereichen an (z. B. verknüpfte Events bei Locations/Organizers).
+- **Code-Guidelines**: Ein `rg`-Audit bestätigte, dass weder `href="javascript:void(0)"` noch `confirm()/alert()` noch vorkommen. Diese Checks sind als Pre-Commit-Task dokumentiert.
+
+## Wichtige Datenbank-Entitäten
+
+- **event:** id, name, date_start, date_end, description, organizer, event_type, location, topic, media
+- **organizer:** id, name, email, phonenumber
+- **event_type:** id, name, description
+- **location:** id, name, street, city, zip_code, geo_point
+- **media:** id, file, fileName, fileType
+- **topic:** id, name, color
+- **user:** id, name, password
+
+---
+
+## Schritt 1: Projektstruktur vorbereiten
+
+1. **Komponente für Barrierefreiheitserklärung erstellen**
+   - Beispiel: `ng generate component accessibility-statement`
+2. **Route für `/barrierefreiheit` in der Angular-Routing-Konfiguration anlegen** ✔ erledigt
+3. **Footer-Link zur Barrierefreiheitsseite überall einfügen**
+
+## Schritt 2: Angular CDK a11y installieren und konfigurieren
+
+1. **Bibliothek installieren:**
+   ```bash
+   npm install @angular/cdk
+   ```
+2. **A11yModule in App importieren:**
+   ```typescript
+   import { A11yModule } from '@angular/cdk/a11y';
+   @NgModule({ imports: [A11yModule] })
+   ```
+3. **LiveAnnouncer und FocusTrap für dynamische Accessibility nutzen**
+
+## Schritt 3: Barrierefreiheitserklärung implementieren
+
+1. **Semantische HTML-Struktur nutzen** (z.B. `<main>`, `<header>`, `<nav>`, `<footer>`)
+2. **ARIA-Landmarks definieren**
+   - z.B. `role="navigation"`, `aria-label="Hauptnavigation"`, `role="main"`
+3. **Feedback-Formular für Barriere-Meldungen einbauen**
+
+## Schritt 4: Event-Liste und Event-Karten barrierefrei gestalten
+
+1. **Keyboard-Fokus für Event-Karten sicherstellen**
+2. **Alt-Texte für Event-Bilder setzen (aus media-Tabelle)**
+3. **ARIA-Labels für Event-Infos verwenden**
+
+## Schritt 5: Formulare zugänglich machen
+
+1. **Alle Inputs mit Labels verknüpfen**
+2. **Fehlermeldungen über `aria-live` ansagen lassen**
+3. **Fokus-Management bei Validierung verbessern**
+
+## Schritt 6: Navigation und Routing optimieren
+
+1. **Skip-Navigation-Link für Hauptinhalt ergänzen**
+2. **`ariaCurrentWhenActive` für aktive Links einsetzen**
+3. **Seitentitel (`TitleService`) bei Routenwechsel aktualisieren**
+
+## Schritt 7: Testing und Validierung
+
+1. **Angular ESLint a11y rules aktivieren:**
+   ```json
+   {
+     "extends": ["plugin:@angular-eslint/template/accessibility"]
+   }
+   ```
+2. **Axe-core und Lighthouse für Accessibility-Audits nutzen**
+3. **Manuelle Tastatur- und Screen Reader-Tests durchführen**
+
+---
+
+## Komponenten-spezifische Anforderungen
+
+- **event_card:**
+  - Fokussierbar mit Tastatur
+  - Ausführliche Event-Beschreibung für Screen Reader
+  - Alt-Texte aus media-Tabelle
+  - Datum im zugänglichen Format
+  - Preisangabe mit Währungsbezeichnung
+
+- **event_filter:**
+  - Tastatur-Navigation durch Filteroptionen
+  - ARIA-Labels für Filter
+  - Live-Announcement für Änderungen
+  - Klare Markierung aktiver Filter
+
+- **location_map:**
+  - Alternative Textbeschreibung der Location anbieten
+  - Tastatur-Navigation für interaktive Karte
+  - Adresse als Standardtext zugänglich machen
+
+---
+
+## Best Practices für Accessibility in Angular
+
+- Native HTML-Elemente bevorzugen (statt div/button)
+- Alle Bilder und interaktiven Elemente mit Alt- und ARIA-Texten versehen
+- Nutzern alternative Kontaktmöglichkeiten und Feedback-Form anbieten
+- Barrierefreiheitserklärung regelmäßig aktualisieren und testen
+
+---
+
+**Weiterführende Ressourcen**
+
+- [Angular Accessibility Guide](https://angular.dev/guide/accessibility)
+- [WCAG 2.1 Checkliste (deutsch)](https://bfsg-gesetz.de)
+- [SurrealDB Dokumentation](https://surrealdb.com/docs)
+
+---
+
+> Diese Anleitung unterstützt Sie dabei, die Barrierefreiheits-Anforderungen für das Jubiläums-App-Projekt mit Angular umzusetzen und gesetzeskonform zu gestalten. Ergänzend empfehlen sich Usability-Tests mit Endanwendern.