mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-09 10:49:37 +00:00
a11y: hero demo passes WCAG contrast (Lighthouse 4x100 desktop)
- Remove the confusing, space-hungry "Episode Lobby" card from the mockup - Give the decorative demo mockup a contrast-safe palette: accent shown as text uses a lighter indigo, and buttons with white text on a colour get darker shades, so every walkthrough state meets WCAG AA - Drop the scroll-reveal fade from the above-the-fold hero demo; the fade briefly rendered its text at partial opacity, which axe caught as failing contrast on ~1 in 3 audits - Mark the demo as decorative for assistive tech (aria-hidden + removed from tab order); mouse interaction is unchanged - Darken the footer support pill so white text meets contrast Desktop Lighthouse: 100/100/100/100 (stable across runs). Mobile: 100 a11y / best-practices / SEO; performance ~87 (throttled LCP, separate work). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
@@ -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 = () => {
|
||||
|
||||
@@ -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;
|
||||
|
||||
+2
-19
@@ -319,7 +319,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Interactive Live Demo: two synced video tabs + the extension popup -->
|
||||
<div class="hero-mockup-wrapper" data-reveal>
|
||||
<div class="hero-mockup-wrapper">
|
||||
<div class="hero-demo-scene popup-open connected" id="hero-demo">
|
||||
<button class="demo-sync-chip" id="demo-sync-chip" type="button" title="Live sync status of the two demo tabs">
|
||||
<span class="demo-chip-dot" aria-hidden="true"></span>
|
||||
@@ -562,23 +562,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Episode Auto-Sync Lobby Status Mockup -->
|
||||
<div class="mock-card" style="margin-bottom: 15px; border-left: 4px solid #fbbf24; background: var(--card); padding: 8px 10px; border-radius: 8px;">
|
||||
<div style="display:flex; align-items:center; gap: 6px; margin-bottom: 4px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14" aria-hidden="true" style="display:block; flex-shrink:0;"><path d="M5 22h14"/><path d="M5 2h14"/><path d="M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"/><path d="M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"/></svg>
|
||||
<span style="font-weight: 700; color: #fbbf24; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;">Episode Lobby</span>
|
||||
</div>
|
||||
<div style="font-size: 0.7rem; color: white; margin-bottom: 4px; font-weight: 600;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"/><line x1="7" y1="2" x2="7" y2="22"/><line x1="17" y1="2" x2="17" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="2" y1="7" x2="7" y2="7"/><line x1="2" y1="17" x2="7" y2="17"/><line x1="17" y1="17" x2="22" y2="17"/><line x1="17" y1="7" x2="22" y2="7"/></svg> <span class="demo-title-text-ep2">Stranger Things - S4E2</span>
|
||||
</div>
|
||||
<div style="font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px;">
|
||||
{{MOCK_16}}
|
||||
</div>
|
||||
<button class="mock-btn" style="background: #334155; border: none; padding: 4px 8px; border-radius: 6px; color: white; font-weight: 600; font-size: 0.65rem; cursor: pointer; width: auto; display: block;" title="Cancel lobby and play anyway">
|
||||
{{MOCK_17}}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="mock-section-label" title="Other users currently connected to this room">
|
||||
{{MOCK_04}}
|
||||
</label>
|
||||
@@ -1414,7 +1397,7 @@
|
||||
<a href="{{ASSET_PATH}}{{FOOTER_LEGAL_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_LEGAL}}</span></a>
|
||||
<a href="{{ASSET_PATH}}{{FOOTER_PRIVACY_LINK}}" style="color: var(--text-muted); text-decoration: none;"><span>{{FOOTER_PRIVACY}}</span></a>
|
||||
<a href="{{ASSET_PATH}}{{LANG_PREFIX}}alternatives"><span><span lang="en">Guides & comparisons</span><span lang="de">Vergleiche & Anleitungen</span></span></a>
|
||||
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #ff5e5b; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
|
||||
<a href="https://support.koalastuff.net" target="_blank" rel="noopener" title="{{FOOTER_SUPPORT}}" style="color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: #c9302c; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 9px; font-size: 0.72rem; font-weight: 700; line-height: 1;">
|
||||
<span aria-hidden="true">♥</span>
|
||||
<span>{{FOOTER_SUPPORT}}</span>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user