From 8c965f76d2482aed0c88c9b6bb1a01038596bd94 Mon Sep 17 00:00:00 2001 From: Josh Date: Sun, 17 May 2026 21:04:10 -0700 Subject: [PATCH] fix(a11y): broken support/signin links + WCAG AA contrast in light mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Caught by Lighthouse on prod: 1. CRITICAL: support-link.mdx and signing-in.mdx used the MDX expression `{URLS.x}` inside Markdown-link parens, which MDX doesn't evaluate — the resulting href was URL-encoded '%7BURLS.whmcsTicket%7D' on every page with a Support partial. Replaced with HTML anchors so the expression evaluates. 2. Light-mode --sl-color-text-accent was the brand teal (#00d4aa) on a cream background = 1.73:1 contrast. Introduced --anhh-accent-on-light (#047857) at ~6:1 for inline accent text/links. Brand graphics keep the original teal. 3. Bumped light-mode --anhh-text-secondary and --anhh-text-muted to #334155 / #475569 so muted UI text clears AA. 4. Hub brand link aria-label now includes 'Knowledge Base' so the accessible name covers the visible text. --- src/content/partials/signing-in.mdx | 2 +- src/content/partials/support-link.mdx | 2 +- src/pages/index.astro | 2 +- src/styles/anhh-tokens.css | 14 +++++++++++--- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/content/partials/signing-in.mdx b/src/content/partials/signing-in.mdx index f55954f..1aac20e 100644 --- a/src/content/partials/signing-in.mdx +++ b/src/content/partials/signing-in.mdx @@ -2,5 +2,5 @@ import { URLS } from './urls.mdx'; You can sign in to WHP two ways: -1. **Through your client portal** (recommended). Go to [{URLS.whmcs}]({URLS.whmcs}), sign in to your account, open **Services → My Services**, click your hosting plan, then click **Login to WHP**. No extra password to remember. +1. **Through your client portal** (recommended). Go to {URLS.whmcs}, sign in to your account, open **Services → My Services**, click your hosting plan, then click **Login to WHP**. No extra password to remember. 2. **Directly with your WHP credentials.** Visit `https://:8443` and sign in with the WHP username and password you set up. Your server hostname is in your welcome email and on the service page in the client portal. diff --git a/src/content/partials/support-link.mdx b/src/content/partials/support-link.mdx index 50894a6..debe385 100644 --- a/src/content/partials/support-link.mdx +++ b/src/content/partials/support-link.mdx @@ -1,5 +1,5 @@ import { URLS } from './urls.mdx';
- **Still stuck?** Open a [support ticket]({URLS.whmcsTicket}) and our team will help. + **Still stuck?** Open a support ticket and our team will help.
diff --git a/src/pages/index.astro b/src/pages/index.astro index 7905a10..57bfaa4 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -195,7 +195,7 @@ const visibleProducts: Product[] = Array.from(byProduct.entries())
- + diff --git a/src/styles/anhh-tokens.css b/src/styles/anhh-tokens.css index 1fe433c..4602843 100644 --- a/src/styles/anhh-tokens.css +++ b/src/styles/anhh-tokens.css @@ -51,18 +51,26 @@ --anhh-bg-elevated: #ffffff; --anhh-bg-surface: #e2e8f0; --anhh-text-primary: #0f172a; - --anhh-text-secondary: #475569; - --anhh-text-muted: #94a3b8; + --anhh-text-secondary: #334155; /* bumped from #475569 for AA contrast on muted UI text */ + --anhh-text-muted: #475569; /* bumped from #94a3b8 — same reason */ --anhh-border-color: #cbd5e1; --anhh-accent-dim: rgba(0, 212, 170, 0.08); --anhh-accent-border: rgba(0, 212, 170, 0.3); + /* + * Darker accent for light mode so inline accent-coloured text and links + * (Starlight binds --sl-color-text-accent) pass WCAG AA against the bg. + * The brand teal #00d4aa is only ~1.7:1 on the cream background; #047857 + * is ~6:1, which clears AA. + */ + --anhh-accent-on-light: #047857; + --sl-color-bg: var(--anhh-bg); --sl-color-bg-nav: var(--anhh-bg-elevated); --sl-color-bg-sidebar: var(--anhh-bg-elevated); --sl-color-bg-inline-code: var(--anhh-bg-surface); --sl-color-text: var(--anhh-text-primary); - --sl-color-text-accent: var(--anhh-accent); + --sl-color-text-accent: var(--anhh-accent-on-light); --sl-color-gray-1: var(--anhh-text-primary); --sl-color-gray-2: var(--anhh-text-secondary); --sl-color-gray-3: var(--anhh-text-muted);