WCAG 2.1 AA: Focus-Styles, ARIA-Attribute, Tastatur-Navigation, Formvalidierung

- Default :focus-visible auf allen interaktiven Elementen (WCAG 2.4.7)
- A11y-Panel: role=group, Esc/Pfeiltasten, Fokus-Management
- Checkbox sr-only statt display:none (Screenreader-zugaenglich)
- Toggle-Switch Focus-Indikator
- aria-required, aria-expanded, aria-haspopup auf Formularen/Dropdowns
- Export-Dropdown: role=menu/menuitem/separator
- Sidebar: aria-expanded auf Sektionen, aria-hidden auf Chevrons
- Globaler Esc-Handler mit korrekter Schliess-Reihenfolge
- Formvalidierung: aria-invalid, aria-describedby, Fokus auf Fehler
- Notification-Items: role=button, tabindex=0
- Badges: aria-label/aria-hidden fuer Screenreader
- SR-Announcement bei Sidebar-Lage-Auswahl

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/static/js/components.js

@@ -26,13 +26,13 @@ const UI = {
 
         return `
             <div class="incident-item ${activeClass}" data-id="${incident.id}" onclick="App.selectIncident(${incident.id})" role="button" tabindex="0">
-                <span class="incident-dot ${dotClass}" id="dot-${incident.id}"></span>
+                <span class="incident-dot ${dotClass}" id="dot-${incident.id}" aria-hidden="true"></span>
                 <div style="flex:1;min-width:0;">
                     <div class="incident-name">${this.escape(incident.title)}</div>
                     <div class="incident-meta">${incident.article_count} Artikel &middot; ${this.escape(creator)}</div>
                 </div>
-                ${incident.visibility === 'private' ? '<span class="badge badge-private" style="font-size:9px;">PRIVAT</span>' : ''}
-                ${incident.refresh_mode === 'auto' ? '<span class="badge badge-auto" title="Auto-Refresh aktiv">&#x21bb;</span>' : ''}
+                ${incident.visibility === 'private' ? '<span class="badge badge-private" style="font-size:9px;" aria-label="Private Lage">PRIVAT</span>' : ''}
+                ${incident.refresh_mode === 'auto' ? '<span class="badge badge-auto" role="img" aria-label="Auto-Refresh aktiv">&#x21bb;</span>' : ''}
             </div>
         `;
     },
@@ -106,7 +106,7 @@ const UI = {
             </label>`;
         }).join('');
 
-        return `<button class="fc-dropdown-toggle" onclick="App.toggleFcDropdown(event)">Filter</button>
+        return `<button class="fc-dropdown-toggle" onclick="App.toggleFcDropdown(event)" aria-haspopup="true" aria-expanded="false">Filter</button>
             <div class="fc-dropdown-menu" id="fc-dropdown-menu">${items}</div>`;
     },