From 5963eec36c980290cab4de331aba1409e88cf917 Mon Sep 17 00:00:00 2001 From: canditocheeto <264169610+canditocheeto@users.noreply.github.com> Date: Fri, 29 May 2026 12:29:57 -0400 Subject: [PATCH] =?UTF-8?q?a11y(1.4.11):=20focus=20rings=20=E2=80=94=20lig?= =?UTF-8?q?hten=20dark-mode=20--color-border-focus-info=20to=20indigo.400?= =?UTF-8?q?=20so=20ring-primary/70=20meets=203:1=20against=20surface-prima?= =?UTF-8?q?ry?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The ring-primary/70 pattern (focus-visible:ring-2 focus-visible:ring-primary/70) is used on 34 sites across 25 files in src/lib/holocene/ and src/lib/components/ — Button, Link, Tab, Input, Textarea, Combobox, Checkbox, RadioInput, FileInput, ToggleSwitch, Pill, navigation primitives, and more. ring-primary maps to --color-border-focus-info, which was indigo.600 (#444CE7) in both light and dark modes. At 70% alpha composited over the dark-mode surface (--color-surface-primary = #141414), the ring renders as approximately #273074. Contrast ratio against the surrounding canvas: ~1.92:1 — below the SC 1.4.11 Non-text Contrast floor of 3:1. Light mode passes at 3.58:1; the failure is dark-mode only. This shifts the dark-mode value of --color-border-focus-info to indigo.400 (#8098F9), which at 70% over the dark surface composites to ~#5A6BAF, giving ~3.78:1 against the surrounding canvas. Light mode is byte-identical (still indigo.600). The change is scoped to one CSS variable assignment because the token flows exclusively through Tailwind's ring-primary utility (verified: only two references in src/ — the variable definition itself and the ringColor.primary mapping in plugin.ts). The fix is intentionally token-level rather than class-level (Option A in the fix doc) for blast radius and design-judgment reasons: Option A would touch 34 consumer sites and change light-mode rendering too. The asymmetric light/dark token pattern is consistent with neighboring tokens like --color-border-danger (red.500 light / red.400 dark). Cross-walks 2.4.7 Focus Visible (Level AA). Cascades to cloud-ui-main via the @temporalio/ui tarball on next repack. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/lib/theme/variables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/theme/variables.ts b/src/lib/theme/variables.ts index 6ce250da0a..c05ea9265c 100644 --- a/src/lib/theme/variables.ts +++ b/src/lib/theme/variables.ts @@ -212,7 +212,7 @@ export const variables = { }, '--color-border-focus-info': { light: 'indigo.600', - dark: 'indigo.600', + dark: 'indigo.400', }, '--color-border-focus-danger': { light: 'red.600',