JonKazama-Hellion/Hellion-NewTab
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 11 Wiki Activity

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

Browse Source
This commit is contained in:
Jon Kazama
2026-06-13 21:00:21 +02:00
parent 085cca2812
commit 02c36dba09
2 changed files with 30 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
newtab.html
+11 -11
View File
@@ -297,57 +297,57 @@
<button class="btn-close" id="btnCloseTheme" data-i18n-title="dialog.close">✕</button>
</div>
<div class="theme-grid">
<div class="theme-card active" data-value="nebula">
<div class="theme-card active" data-value="nebula" role="button" tabindex="0" aria-pressed="true" data-i18n-aria-label="theme.card.nebula">
<img class="theme-card-img" src="assets/themes/bg-nebula.webp" alt="Nebula" />
<span class="theme-card-label">Nebula</span>
<span class="theme-card-check">✓</span>
</div>
<div class="theme-card" data-value="crescent">
<div class="theme-card" data-value="crescent" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="theme.card.crescent">
<img class="theme-card-img" src="assets/themes/bg-crescent.webp" alt="Crescent" />
<span class="theme-card-label">Crescent</span>
<span class="theme-card-check">✓</span>
</div>
<div class="theme-card" data-value="event-horizon">
<div class="theme-card" data-value="event-horizon" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="theme.card.event_horizon">
<img class="theme-card-img" src="assets/themes/bg-event-horizon.webp" alt="Event Horizon" />
<span class="theme-card-label">Event Horizon</span>
<span class="theme-card-check">✓</span>
</div>
<div class="theme-card" data-value="merchantman">
<div class="theme-card" data-value="merchantman" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="theme.card.merchantman">
<img class="theme-card-img" src="assets/themes/bg-merchantman.webp" alt="Merchantman" />
<span class="theme-card-label">Merchantman</span>
<span class="theme-card-check">✓</span>
</div>
<div class="theme-card" data-value="julia-jin">
<div class="theme-card" data-value="julia-jin" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="theme.card.julia_jin">
<img class="theme-card-img" src="assets/themes/bg-julia-jin.webp" alt="Julia &amp; Jin" />
<span class="theme-card-label">Julia &amp; Jin</span>
<span class="theme-card-check">✓</span>
</div>
<div class="theme-card" data-value="sc-sunset">
<div class="theme-card" data-value="sc-sunset" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="theme.card.sc_sunset">
<img class="theme-card-img" src="assets/themes/bg-sc-sunset.webp" alt="SC Sunset" />
<span class="theme-card-label">SC Sunset</span>
<span class="theme-card-check">✓</span>
</div>
<div class="theme-card" data-value="hellion-hud">
<div class="theme-card" data-value="hellion-hud" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="theme.card.hellion_hud">
<img class="theme-card-img" src="assets/themes/bg-hellion-hud.webp" alt="Hellion HUD" />
<span class="theme-card-label">HUD</span>
<span class="theme-card-check">✓</span>
</div>
<div class="theme-card" data-value="hellion-energy">
<div class="theme-card" data-value="hellion-energy" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="theme.card.hellion_energy">
<img class="theme-card-img" src="assets/themes/bg-hellion-energy.webp" alt="Hellion Energy" />
<span class="theme-card-label">Energy</span>
<span class="theme-card-check">✓</span>
</div>
<div class="theme-card" data-value="satisfactory">
<div class="theme-card" data-value="satisfactory" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="theme.card.satisfactory">
<img class="theme-card-img" src="assets/themes/bg-satisfactory.webp" alt="Satisfactory" />
<span class="theme-card-label">Satisfactory</span>
<span class="theme-card-check">✓</span>
</div>
<div class="theme-card" data-value="avorion">
<div class="theme-card" data-value="avorion" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="theme.card.avorion">
<img class="theme-card-img" src="assets/themes/bg-avorion.webp" alt="Avorion" />
<span class="theme-card-label">Avorion</span>
<span class="theme-card-check">✓</span>
</div>
<div class="theme-card" data-value="hellion-stealth">
<div class="theme-card" data-value="hellion-stealth" role="button" tabindex="0" aria-pressed="false" data-i18n-aria-label="theme.card.hellion_stealth">
<img class="theme-card-img" src="assets/themes/bg-scPolaris.webp" alt="Hellion Stealth" />
<span class="theme-card-label">Stealth</span>
<span class="theme-card-check">✓</span>
src/js/settings.js
+15 -5
View File
@@ -199,15 +199,25 @@ function bindSettingsEvents() {
});
// Theme-Picker (Cards im Theme-Modal)
document.querySelectorAll('.theme-card').forEach(card => {
card.addEventListener('click', async () => {
const themeCards = document.querySelectorAll('.theme-card');
function selectThemeCard(card) {
const name = card.dataset.value;
if (!name || name === settings.theme) return;
if (!name || name === settings.theme) return Promise.resolve();
settings.theme = name;
settings.bgUrl = '';
document.getElementById('bgUrlInput').value = '';
switchTheme(name);
await saveSettings();
// 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);
}
});
});