From 02c36dba0904eca092fc436830bcaf5d5e8dad48 Mon Sep 17 00:00:00 2001 From: Jon Kazama Date: Sat, 13 Jun 2026 21:00:21 +0200 Subject: [PATCH] a11y(theme-picker): Cards als role=button mit tabindex, Enter/Space-Handler und gepflegtem aria-pressed --- newtab.html | 22 +++++++++++----------- src/js/settings.js | 28 +++++++++++++++++++--------- 2 files changed, 30 insertions(+), 20 deletions(-) diff --git a/newtab.html b/newtab.html index 0ff5ff0..aa4b04a 100644 --- a/newtab.html +++ b/newtab.html @@ -297,57 +297,57 @@
-
+
Nebula Nebula ✓
-
+
Crescent Crescent ✓
-
+
Event Horizon Event Horizon ✓
-
+
Merchantman Merchantman ✓
-
+
Julia & Jin Julia & Jin ✓
-
+
SC Sunset SC Sunset ✓
-
+
Hellion HUD HUD ✓
-
+
Hellion Energy Energy ✓
-
+
Satisfactory Satisfactory ✓
-
+
Avorion Avorion ✓
-
+
Hellion Stealth Stealth ✓ diff --git a/src/js/settings.js b/src/js/settings.js index bd8594f..edc511f 100644 --- a/src/js/settings.js +++ b/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); + } }); });