diff --git a/website/app.js b/website/app.js index a13bdc7..0ff0252 100644 --- a/website/app.js +++ b/website/app.js @@ -465,6 +465,18 @@ document.addEventListener('DOMContentLoaded', () => { }); }); + // The hero demo is a decorative, self-playing illustration; the real, + // accessible walkthrough is the #how-it-works section. Hide the fake + // extension UI from the accessibility tree and drop its controls from the + // tab order so screen readers are not confused and it does not trip + // contrast/label audits. Mouse interaction is unaffected. + const heroDemoScene = document.getElementById('hero-demo'); + if (heroDemoScene) { + heroDemoScene.setAttribute('aria-hidden', 'true'); + heroDemoScene.querySelectorAll('a[href], button, input, select, textarea, [tabindex]') + .forEach(el => el.setAttribute('tabindex', '-1')); + } + // --- Hero Live Demo (two synced video tabs + extension popup) --- // Desktop only: on mobile the scene falls back to the classic static popup. const initHeroDemo = () => { diff --git a/website/style.css b/website/style.css index 3948652..f883057 100644 --- a/website/style.css +++ b/website/style.css @@ -1060,6 +1060,31 @@ html.theme-light .koala-speech-bubble::after { .mock-btn-pause:hover { background: #dc2626; } .mock-btn-force { background: var(--accent); grid-column: span 2; } +/* Contrast-safe palette for the decorative hero demo. Lighthouse/axe audits + sighted text contrast even inside aria-hidden, so every walkthrough state + must meet WCAG AA. Accent shown as text gets a lighter indigo; buttons that + put white text on a colour get a darker shade (these beat inline styles). */ +.hero-demo-scene { + --accent: #a5b4fc; +} +.hero-demo-scene .mock-tab.active, +.hero-demo-scene .mock-btn-force, +.hero-demo-scene #demo-force-sync, +.hero-demo-scene .demo-create-room-btn { + background: #4338ca !important; + color: #fff; +} +.hero-demo-scene .mock-btn-play { + background: #15803d !important; +} +.hero-demo-scene .mock-btn-pause, +.hero-demo-scene #demo-room-joined > button.mock-btn { + background: #b91c1c !important; +} +.hero-demo-scene .mock-version-link { + opacity: 0.85; +} + .mock-status-display { display: flex; align-items: center; diff --git a/website/template.html b/website/template.html index a0af959..6954954 100644 --- a/website/template.html +++ b/website/template.html @@ -319,7 +319,7 @@ -
+
- -
-
- - Episode Lobby -
-
- Stranger Things - S4E2 -
-
- {{MOCK_16}} -
- -
- @@ -1414,7 +1397,7 @@ {{FOOTER_LEGAL}} {{FOOTER_PRIVACY}} Guides & comparisonsVergleiche & Anleitungen - + {{FOOTER_SUPPORT}}