fix(a11y): broken support/signin links + WCAG AA contrast in light mode
All checks were successful
Build and deploy / deploy (push) Successful in 29s
All checks were successful
Build and deploy / deploy (push) Successful in 29s
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.
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user