Merge pull request 'fix(canvas): add role=alert + aria-live=assertive to error states (WCAG 4.1.3)' (#1463) from fix/canvas-errors-aria-alert into main

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>
           )}

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 ? (

canvas/src/components/tabs/ConfigTab.tsx

@@ -1121,7 +1121,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">

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"