fix(a11y): broken support/signin links + WCAG AA contrast in light mode

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.
2026-05-17 21:04:10 -07:00
parent 6a0a461c26
commit 8c965f76d2
4 changed files with 14 additions and 6 deletions
@@ -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 <a href={URLS.whmcs}>{URLS.whmcs}</a>, 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://<your-server-hostname>: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.
@@ -1,5 +1,5 @@
 import { URLS } from './urls.mdx';

 <div class="anhh-accent-callout">
-  **Still stuck?** Open a [support ticket]({URLS.whmcsTicket}) and our team will help.
+  **Still stuck?** Open a <a href={URLS.whmcsTicket}>support ticket</a> and our team will help.
 </div>
@@ -195,7 +195,7 @@ const visibleProducts: Product[] = Array.from(byProduct.entries())
  </head>
  <body>
    <header>
-      <a href="/" class="brand" aria-label="AnHonestHost">
+      <a href="/" class="brand" aria-label="AnHonestHost Knowledge Base">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 32" fill="none" height="28" role="img">
          <path d="M12 4L3 16L12 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M24 4L33 16L24 28" stroke="#00d4aa" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -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);