From dffc8dc208f08fb365f49cdc12dcf7987e929401 Mon Sep 17 00:00:00 2001
From: Ridwan Sanusi <ridwan.sanusi@temporal.io>
Date: Fri, 12 Jun 2026 11:43:21 -0400
Subject: [PATCH] [a11y] Replace role="log" on Toaster with per-toast
 role="status"/"alert"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove role="log" from the Toaster container; live-region semantics
  move entirely to individual Toast instances
- Add getRole() to Toast: error variant → role="alert" (assertive);
  all others → role="status" (polite)
- Add aria-atomic="true" so the full toast content re-announces on
  each insertion, even when consecutive toasts share similar markup

Screen readers can now distinguish urgency between error and
informational toasts (WCAG 2.2 SC 4.1.3 Status Messages).

A11y-Audit-Ref: 4.1.3-toaster-role-status-alert

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/holocene/toast.svelte   | 10 +++++++++-
 src/lib/holocene/toaster.svelte |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/lib/holocene/toast.svelte b/src/lib/holocene/toast.svelte
index 1bdf6d5003..1875280df5 100644
--- a/src/lib/holocene/toast.svelte
+++ b/src/lib/holocene/toast.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
   import { fly } from 'svelte/transition';
 
   import { createEventDispatcher } from 'svelte';
@@ -27,13 +28,18 @@
     warning: 'warning',
   };
 
+  function getRole(v: ToastVariant): HTMLAttributes<HTMLDivElement>['role'] {
+    if (v === 'error') return 'alert';
+    return 'status';
+  }
+
   export let id: string;
   export let variant: keyof typeof variants;
   export let closeButtonLabel: string = '';
 
   $: dismissLabel = closeButtonLabel || translate('common.close');
-
   $: icon = variantIcon[variant];
+  $: role = getRole(variant);
 
   const handleDismiss = () => {
     dispatch('dismiss', { id });
@@ -42,6 +48,8 @@
 
 <div
   {id}
+  {role}
+  aria-atomic="true"
   class={merge(
     'flex grow-0 items-center justify-between gap-4 rounded-md px-3 py-2.5 shadow',
     variants[variant],
diff --git a/src/lib/holocene/toaster.svelte b/src/lib/holocene/toaster.svelte
index e4902c3bfc..1b569958c1 100644
--- a/src/lib/holocene/toaster.svelte
+++ b/src/lib/holocene/toaster.svelte
@@ -40,7 +40,7 @@
   });
 </script>
 
-<div class={toast({ position: $position })} role="log">
+<div class={toast({ position: $position })}>
   {#each $toasts as { message, variant, id, link } (id)}
     <ToastComponent {closeButtonLabel} {variant} {id} on:dismiss={dismissToast}>
       {#if link}