fix(a11y): consistent high-contrast focus rings across all Button variants (WCAG 1.4.11)

[bilal-karim]

Summary

Unifies focus-ring styling across all 5 Button variants to fix SC 1.4.11 Non-text Contrast. Previously every variant used a 70% opacity ring with no offset; the primary variant produced an effectively invisible indigo ring (~1:1) on its indigo background, and destructive produced a faint red-on-red ring (~2:1).

Final pattern (applied to all variants)

focus-visible:ring-{color} focus-visible:ring-offset-2 focus-visible:ring-offset-surface-primary

• Ring color matches the button's color family (ring-primary for primary/secondary/ghost/table-header, ring-danger for destructive). Full opacity instead of /70.
• Offset is surface-primary (white in light mode, black in dark mode) — puts a 2px gap between the button and the ring.
• Result: button → page-color gap → ring → page. The gap separates the ring from the button; the colored ring contrasts against both light and dark page surfaces (~7:1 light, ~5:1 dark).

Variant changes

Variant	Before	After
primary	ring-primary/70 (indigo on indigo, ~1:1)	ring-primary + offset (~7:1 vs page)
destructive	ring-danger/70 (red on red.300, ~2:1)	ring-danger + offset (~6:1 vs page)
secondary	ring-primary/70, no offset	ring-primary + offset for consistency
ghost	ring-primary/70, no offset	ring-primary + offset for consistency
table-header	ring-primary/70, no offset	ring-primary + offset for consistency

Note on the first iteration

Initial commit used ring-white for primary per the audit's recommended Option A. That worked in dark mode but blended with the white page in light mode (button → white gap → white ring → white page). Switched to Option B (ring-primary with offset) which works in both themes.

Audit context

• WCAG 2.2 SC 1.4.11 Non-text Contrast (Level AA) — Serious. Affects keyboard users on every focusable button across the product.
• Cross-cutting with SC 2.4.7 Focus Visible.
• Issue files: audit-output/issues/1.4.11-button-{primary,destructive}-focus-ring.md. The secondary/ghost/table-header consistency extension is beyond the audit's literal scope but follows directly from the same pattern.

Test plan

• Tab to a primary button (Start Workflow, Save, Apply Filter) in both light and dark mode. Clear visible ring with a small page-colored gap.
• Tab to a destructive button — only reachable via confirmation modals (Terminate, Cancel, Reset, Delete on workflows/activities/deployments). Red ring with gap.
• Tab to secondary, ghost, and table-header buttons. Indigo ring with gap, consistent visual language.
• DevTools contrast check: ring-vs-page and ring-vs-button both ≥ 3:1.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	May 22, 2026 1:45pm

[temporal-cicd]

Warnings

⚠️

📊 Strict Mode: 6 errors in 1 file (0.7% of 914 total) src/lib/holocene/button.svelte (6) L109:13: Type 'null' is not assignable to type '"search" | "link" | "success" | "error" | "action" | "activity" | "add-square" | "add" | "apple" | "archives" | "arrow-down" | "arrow-left" | "arrow-up" | "arrow-right" | "ascending" | ... 140 more ... | "xmark-square"'. L110:13: Type 'null' is not assignable to type '"search" | "link" | "success" | "error" | "action" | "activity" | "add-square" | "add" | "apple" | "archives" | "arrow-down" | "arrow-left" | "arrow-up" | "arrow-right" | "ascending" | ... 140 more ... | "xmark-square"'. L112:13: Type 'null' is not assignable to type 'string'. L113:13: Type 'null' is not assignable to type 'string'. L114:13: Type 'null' is not assignable to type 'string'. L102:7: Argument of type '$$Props' is not assignable to parameter of type '{ variant?: "primary" | "secondary" | "ghost" | "destructive" | "table-header" | null | undefined; size?: "xs" | "sm" | "md" | "lg" | null | undefined; disabled?: boolean | undefined; ... 9 more ...; class?: string | undefined; }'.

Generated by 🚫 dangerJS against 821ed18

[bilal-karim]

Ideally, this pattern should extend to all interactive elements.