From a4bbddf3a429ad65abf2684f5f6a8cfcea04a255 Mon Sep 17 00:00:00 2001 From: KoalaDev <6156589+Shik3i@users.noreply.github.com> Date: Wed, 15 Jul 2026 04:23:14 +0200 Subject: [PATCH] fix(website): address accessibility audit findings --- scripts/test-website-theme.mjs | 37 +++++++++++++++++++++++++++++++++ website/alternatives/index.html | 12 +++++------ website/impressum-de.html | 10 ++++----- website/imprint.html | 10 ++++----- website/join.html | 2 +- website/styles/alternatives.css | 9 +++++++- website/styles/demo.css | 8 +++++++ website/styles/legal.css | 11 +++++++++- 8 files changed, 80 insertions(+), 19 deletions(-) diff --git a/scripts/test-website-theme.mjs b/scripts/test-website-theme.mjs index 341c7db..7c64b2e 100644 --- a/scripts/test-website-theme.mjs +++ b/scripts/test-website-theme.mjs @@ -10,6 +10,12 @@ const app = fs.readFileSync(path.join(repoRoot, 'website', 'app.js'), 'utf8'); const langInit = fs.readFileSync(path.join(repoRoot, 'website', 'lang-init.js'), 'utf8'); const demoCss = fs.readFileSync(path.join(repoRoot, 'website', 'styles', 'demo.css'), 'utf8'); const landingPrimaryCss = fs.readFileSync(path.join(repoRoot, 'website', 'styles', 'landing-primary.css'), 'utf8'); +const legalCss = fs.readFileSync(path.join(repoRoot, 'website', 'styles', 'legal.css'), 'utf8'); +const joinPage = fs.readFileSync(path.join(repoRoot, 'website', 'join.html'), 'utf8'); +const imprintPage = fs.readFileSync(path.join(repoRoot, 'website', 'imprint.html'), 'utf8'); +const germanImprintPage = fs.readFileSync(path.join(repoRoot, 'website', 'impressum-de.html'), 'utf8'); +const alternativesIndex = fs.readFileSync(path.join(repoRoot, 'website', 'alternatives', 'index.html'), 'utf8'); +const alternativesCss = fs.readFileSync(path.join(repoRoot, 'website', 'styles', 'alternatives.css'), 'utf8'); const mockupStart = template.indexOf('
'); const mockupEnd = template.indexOf('
]*opacity:/.test(joinPage)) { + throw new Error('Join-page disclaimer must use the contrast-safe footer-disclaimer colors without opacity'); +} + +if (!/\.legal-inline-link\s*\{[^}]*text-decoration:\s*underline/s.test(legalCss)) { + throw new Error('Legal prose links must use a non-color underline cue'); +} +for (const [name, page] of [['imprint.html', imprintPage], ['impressum-de.html', germanImprintPage]]) { + if ((page.match(/class="legal-inline-link"/g) || []).length !== 3) { + throw new Error(`${name} must mark all three prose links as legal-inline-link`); + } + if ((page.match(/class="legal-inline-label"/g) || []).length !== 2 || /opacity:\s*0\.6/.test(page)) { + throw new Error(`${name} contact labels must use full-opacity theme text`); + } +} + +if (/]+color:\s*var\(--text\)/g) || []).length !== 6) { + throw new Error('Alternatives overview cards must use h2 headings directly below the page h1'); +} +if (!/html\.theme-light \.guide-card\s*\{[^}]*background-color:\s*var\(--card-surface\)\s*!important/s.test(alternativesCss)) { + throw new Error('Alternatives cards must define a readable light-theme surface'); +} + +const reducedMotionRule = demoCss.match(/@media \(prefers-reduced-motion: reduce\)\s*\{\s*\.step-illustration-3 \.film-mtn-scroll,\s*\.step-illustration-3 \.film-mid-scroll,\s*\.step-illustration-3 \.film-fore-scroll\s*\{([^}]*)\}/)?.[1] || ''; +if (!/animation:\s*none\s*!important/.test(reducedMotionRule)) { + throw new Error('Getting Started film layers must stop when reduced motion is requested'); +} + console.log('Extension mockup theme-sensitive text uses theme-aware colors'); console.log('Landing CSS is render-blocking, single-request, and cascade-stable'); console.log('Foreground film birds use complete, always-on wing and glide animations'); console.log('All Getting Started mockups define explicit light-theme surfaces'); console.log('Getting Started step numbers stay readable in light mode'); +console.log('Accessibility regressions stay fixed across legal, alternatives, and reduced-motion views'); diff --git a/website/alternatives/index.html b/website/alternatives/index.html index aaac15e..36327fe 100644 --- a/website/alternatives/index.html +++ b/website/alternatives/index.html @@ -232,7 +232,7 @@
-

{{ALT_TELEPARTY_TITLE}}

+

{{ALT_TELEPARTY_TITLE}}

{{ALT_TELEPARTY_META_DESC}}

@@ -243,7 +243,7 @@
-

{{ALT_W2G_TITLE}}

+

{{ALT_W2G_TITLE}}

{{ALT_W2G_META_DESC}}

@@ -254,7 +254,7 @@
-

{{ALT_SCENER_TITLE}}

+

{{ALT_SCENER_TITLE}}

{{ALT_SCENER_META_DESC}}

@@ -265,7 +265,7 @@
-

{{ALT_KOSMI_TITLE}}

+

{{ALT_KOSMI_TITLE}}

{{ALT_KOSMI_META_DESC}}

@@ -276,7 +276,7 @@
-

{{ALT_TWOSEVEN_TITLE}}

+

{{ALT_TWOSEVEN_TITLE}}

{{ALT_TWOSEVEN_META_DESC}}

@@ -287,7 +287,7 @@
-

{{ALT_SCREEN_TITLE}}

+

{{ALT_SCREEN_TITLE}}

{{ALT_SCREEN_META_DESC}}

diff --git a/website/impressum-de.html b/website/impressum-de.html index d10c6dd..ec0fb34 100644 --- a/website/impressum-de.html +++ b/website/impressum-de.html @@ -175,12 +175,12 @@ E-Mail:

- 🔒 Private Nachricht: - @koalastuff auf Mastodon + 🔒 Private Nachricht: + @koalastuff auf Mastodon

- 🐛 Fehlerberichte und Sicherheitsmeldungen: - GitHub Issues + 🐛 Fehlerberichte und Sicherheitsmeldungen: + GitHub Issues

@@ -190,7 +190,7 @@ KoalaSync ist eine kostenlose und quelloffene Browser-Erweiterung. Der Quellcode ist auf GitHub unter der MIT-Lizenz verfügbar.

- Informationen zum Datenschutz, einschließlich Hosting, Access Logs, Relay-Verhalten und Betroffenenrechten, finden Sie in der Datenschutzerklärung. + Informationen zum Datenschutz, einschließlich Hosting, Access Logs, Relay-Verhalten und Betroffenenrechten, finden Sie in der Datenschutzerklärung.

diff --git a/website/imprint.html b/website/imprint.html index e0696a1..a28997c 100644 --- a/website/imprint.html +++ b/website/imprint.html @@ -175,12 +175,12 @@ E-Mail:

- 🔒 Private message: - @koalastuff on Mastodon + 🔒 Private message: + @koalastuff on Mastodon

- 🐛 Bug reports and security concerns: - GitHub Issues + 🐛 Bug reports and security concerns: + GitHub Issues

@@ -190,7 +190,7 @@ KoalaSync is a free and open-source browser extension. The source code is available on GitHub under the MIT License.

- For privacy-related information, including hosting, access logs, relay behavior, and data subject rights, please see the Privacy Policy. + For privacy-related information, including hosting, access logs, relay behavior, and data subject rights, please see the Privacy Policy.

diff --git a/website/join.html b/website/join.html index 449662b..6e8d09c 100644 --- a/website/join.html +++ b/website/join.html @@ -184,7 +184,7 @@

© 2026 KoalaSync. Open source under the MIT License.Open Source unter der MIT-Lizenz.

No relay logs. No tracking. Website access logs are deleted after 7 days.Keine Relay-Logs. Kein Tracking. Website-Access-Logs werden nach 7 Tagen gelöscht.

-

KoalaSync is not affiliated with, endorsed by, or associated with Netflix, Disney+, Amazon, YouTube, Twitch, or any other streaming platform. All trademarks are property of their respective owners.KoalaSync ist nicht mit Netflix, Disney+, Amazon, YouTube, Twitch oder anderen Streaming-Plattformen verbunden, wird von diesen nicht unterstützt oder steht in keiner Beziehung zu diesen. Alle Markenrechte liegen bei ihren jeweiligen Inhabern.

+

KoalaSync is not affiliated with, endorsed by, or associated with Netflix, Disney+, Amazon, YouTube, Twitch, or any other streaming platform. All trademarks are property of their respective owners.KoalaSync ist nicht mit Netflix, Disney+, Amazon, YouTube, Twitch oder anderen Streaming-Plattformen verbunden, wird von diesen nicht unterstützt oder steht in keiner Beziehung zu diesen. Alle Markenrechte liegen bei ihren jeweiligen Inhabern.

Legal Notice Impressum diff --git a/website/styles/alternatives.css b/website/styles/alternatives.css index dd2e66c..d43ae9c 100644 --- a/website/styles/alternatives.css +++ b/website/styles/alternatives.css @@ -8,6 +8,14 @@ border-color: rgba(255, 255, 255, 0.22) !important; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.4); } +html.theme-light .guide-card { + background-color: var(--card-surface) !important; + border-color: var(--card-border) !important; +} +html.theme-light .guide-card:hover { + background-color: var(--card) !important; + border-color: oklch(0.52 0.12 150 / 0.35) !important; +} .guide-card .btn-primary { transition: background-color 0.2s ease, transform 0.1s ease; } @@ -20,4 +28,3 @@ gap: 1.25rem !important; } } - diff --git a/website/styles/demo.css b/website/styles/demo.css index b30f1c4..a0d12f7 100644 --- a/website/styles/demo.css +++ b/website/styles/demo.css @@ -1162,6 +1162,14 @@ html.theme-light .hero-demo-scene .demo-video::after { animation: scrollFore 3s linear infinite !important; } +@media (prefers-reduced-motion: reduce) { + .step-illustration-3 .film-mtn-scroll, + .step-illustration-3 .film-mid-scroll, + .step-illustration-3 .film-fore-scroll { + animation: none !important; + } +} + @keyframes scrollBack { 0% { transform: translateX(0); } 100% { transform: translateX(-160px); } diff --git a/website/styles/legal.css b/website/styles/legal.css index d9d856c..eda152a 100644 --- a/website/styles/legal.css +++ b/website/styles/legal.css @@ -31,6 +31,16 @@ font-size: 0.95rem; } +.legal-inline-link { + color: var(--accent); + text-decoration: underline; + text-underline-offset: 0.15em; +} + +.legal-inline-label { + color: var(--text-muted); +} + /* Reset global section padding for legal sections specifically */ .legal-card section { padding: 0 !important; @@ -173,4 +183,3 @@ gap: 0.4rem; } } -