a11y(theme-picker): Cards als role=button mit tabindex, Enter/Space-Handler und gepflegtem aria-pressed

src/js/settings.js

@@ -199,15 +199,25 @@ function bindSettingsEvents() {
   });
 
   // Theme-Picker (Cards im Theme-Modal)
-  document.querySelectorAll('.theme-card').forEach(card => {
-    card.addEventListener('click', async () => {
-      const name = card.dataset.value;
-      if (!name || name === settings.theme) return;
-      settings.theme  = name;
-      settings.bgUrl  = '';
-      document.getElementById('bgUrlInput').value = '';
-      switchTheme(name);
-      await saveSettings();
+  const themeCards = document.querySelectorAll('.theme-card');
+  function selectThemeCard(card) {
+    const name = card.dataset.value;
+    if (!name || name === settings.theme) return Promise.resolve();
+    settings.theme  = name;
+    settings.bgUrl  = '';
+    document.getElementById('bgUrlInput').value = '';
+    // aria-pressed synchron halten — applyTheme/switchTheme pflegt nur die .active-Klasse, nicht ARIA
+    themeCards.forEach(c => c.setAttribute('aria-pressed', c === card ? 'true' : 'false'));
+    switchTheme(name); // WICHTIG: switchTheme aus Phase 4 (View-Transition-Wrapper), NICHT applyTheme direkt — sonst geht der Theme-Fade verloren
+    return saveSettings();
+  }
+  themeCards.forEach(card => {
+    card.addEventListener('click', () => selectThemeCard(card));
+    card.addEventListener('keydown', e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        selectThemeCard(card);
+      }
     });
   });