fix(a11y): pair Toast variant background with a severity icon (WCAG 1.4.1)

[bilal-karim]

Summary

Toast variants (success/error/info/warning) previously distinguished severity exclusively by background color. Sighted users with color-vision differences (deuteranopia, protanopia, achromatopsia) could not distinguish a success toast from an error toast on the surface itself — only bg-success versus bg-danger.

This PR adds a leading Icon keyed to the variant via a variantIcon lookup. The neutral primary variant (no severity intent) renders no icon. Icon names mirror the established alert.svelte pattern.

+  const variantIcon: Readonly<Record<ToastVariant, IconName | null>> = {
+    primary: null,
+    success: 'success',
+    error: 'error',
+    info: 'info',
+    warning: 'warning',
+  };
...
+  {#if variantIcon[variant]}
+    <Icon name={variantIcon[variant]} class="shrink-0" />
+  {/if}
   <p class="text-sm">
     <slot />
   </p>

Before / After

Before — color-only severity	After — color + icon severity

success, error, info, warning each gain a leading severity icon. The neutral primary variant renders no icon (no severity intent). Background colors and message text are unchanged.

The accessible announcement is unchanged — Toaster's role="log" still carries the message text via the slot. The new icon is purely decorative.

Audit context

• WCAG 2.2 SC 1.4.1 Use of Color (Level A) — High remediation priority.
• Toasts are the product's primary confirmation channel for write operations (cancel, terminate, reset, signal, pause, batch action, deployment edit). Misreading a failure as a success here degrades operational trust.
• Issue file: audit-output/issues/1.4.1-toast-severity-icon.md (part of the Wave 2 Holocene severity-primitive bundle — Toast is the first of four; Badge / Chip / Banner ship as separate PRs).

Affected callsites (all benefit automatically)

Every toaster.push({ variant, message }) consumer inherits the fix. No per-consumer change required. Includes activity-options-update, activity reset/cancel/terminate confirmations, all workflow client-actions (batch cancel/terminate/reset, pause/unpause, signal, update), event-history import, deployment edits, and file upload.

Test plan

• Storybook: visual diff in toaster.stories.svelte — all 5 variants render correctly; primary shows no icon.
• Screen reader smoke test (VoiceOver/NVDA): the message text continues to announce via role="log"; the decorative icon does not double-announce.
• Trigger a cancel-confirmation flow (success toast) and a terminate-failure flow (error toast); confirm the icons render and are visually distinguishable.
• Color-blind simulator (deuteranopia, protanopia, achromatopsia): the variant icon shape is perceptible against each variant background.
• axe-core: no new violations.

Out of scope

• Upgrading role="log" → role="alert" for error toasts (that's SC 4.1.3 Status Messages).
• Migrating to a title-plus-body structured layout.
• Toast deduplication, queue limits, animation tuning.

🤖 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 25, 2026 4:42pm