From a8e9b6177f58f7c981b4d520380867c60b555732 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Mon, 18 May 2026 01:00:57 +0000
Subject: [PATCH] fix(canvas): add role=alert + aria-live=assertive to error
 states (WCAG 4.1.3)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Screen readers were not announcing error messages in several canvas components.
Each error div now uses role=alert so assistive technology announces the
error immediately and assertively — without the user having to manually
navigate to find the error.

Fixed: ConfigTab, ScheduleTab, MissingKeysModal (per-entry + global),
WorkspaceUsage.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/MissingKeysModal.tsx | 4 ++--
 canvas/src/components/WorkspaceUsage.tsx   | 2 +-
 canvas/src/components/tabs/ConfigTab.tsx   | 2 +-
 canvas/src/components/tabs/ScheduleTab.tsx | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/canvas/src/components/MissingKeysModal.tsx b/canvas/src/components/MissingKeysModal.tsx
index 54eceff3e..8329b8153 100644
--- a/canvas/src/components/MissingKeysModal.tsx
+++ b/canvas/src/components/MissingKeysModal.tsx
@@ -459,7 +459,7 @@ function ProviderPickerModal({
                 )}
 
                 {entry.error && (
-                  <div className="mt-1.5 text-[10px] text-bad">{entry.error}</div>
+                  <div role="alert" aria-live="assertive" className="mt-1.5 text-[10px] text-bad">{entry.error}</div>
                 )}
               </div>
             ))}
@@ -718,7 +718,7 @@ function AllKeysModal({
           ))}
 
           {globalError && (
-            <div className="px-3 py-2 bg-red-950/40 border border-red-800/50 rounded-lg text-[11px] text-bad">
+            <div role="alert" aria-live="assertive" className="px-3 py-2 bg-red-950/40 border border-red-800/50 rounded-lg text-[11px] text-bad">
               {globalError}
             </div>
           )}
diff --git a/canvas/src/components/WorkspaceUsage.tsx b/canvas/src/components/WorkspaceUsage.tsx
index 810323846..ab78e01e9 100644
--- a/canvas/src/components/WorkspaceUsage.tsx
+++ b/canvas/src/components/WorkspaceUsage.tsx
@@ -71,7 +71,7 @@ export function WorkspaceUsage({ workspaceId }: WorkspaceUsageProps) {
             <SkeletonRow />
           </>
         ) : error ? (
-          <p className="text-xs text-bad" data-testid="usage-error">
+          <p role="alert" aria-live="assertive" className="text-xs text-bad" data-testid="usage-error">
             {error}
           </p>
         ) : metrics ? (
diff --git a/canvas/src/components/tabs/ConfigTab.tsx b/canvas/src/components/tabs/ConfigTab.tsx
index 645edc25e..1d0696dd3 100644
--- a/canvas/src/components/tabs/ConfigTab.tsx
+++ b/canvas/src/components/tabs/ConfigTab.tsx
@@ -995,7 +995,7 @@ export function ConfigTab({ workspaceId }: Props) {
       )}
 
       {error && (
-        <div className="mx-3 mb-2 px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">{error}</div>
+        <div role="alert" aria-live="assertive" className="mx-3 mb-2 px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-bad">{error}</div>
       )}
       {!error && RUNTIMES_WITH_OWN_CONFIG.has(config.runtime || "") && (
         <div className="mx-3 mb-2 px-3 py-1.5 bg-surface-sunken/50 border border-line rounded text-xs text-ink-mid">
diff --git a/canvas/src/components/tabs/ScheduleTab.tsx b/canvas/src/components/tabs/ScheduleTab.tsx
index b25fbf1d6..084f5f495 100644
--- a/canvas/src/components/tabs/ScheduleTab.tsx
+++ b/canvas/src/components/tabs/ScheduleTab.tsx
@@ -275,7 +275,7 @@ export function ScheduleTab({ workspaceId }: Props) {
               Enabled
             </label>
           </div>
-          {error && <div className="text-[10px] text-bad">{error}</div>}
+          {error && <div role="alert" aria-live="assertive" className="text-[10px] text-bad">{error}</div>}
           <div className="flex gap-2">
             <button
               type="button"
-- 
2.52.0