Merge pull request 'fix(canvas): WCAG AA contrast round 3 + focus-visible rings + aria fixes' (#936) from design/wcag-a11y-round3-2026-05-14 into main

canvas/src/components/ConversationTraceModal.tsx

@@ -187,7 +187,7 @@ export function ConversationTraceModal({ open, workspaceId: _workspaceId, onClos
                                 isError
                                   ? "bg-red-950/50 text-bad"
                                   : isSend
-                                  ? "bg-cyan-950/50 text-cyan-400"
+                                  ? "bg-cyan-950 text-cyan-300"
                                   : isReceive
                                   ? "bg-blue-950/50 text-accent"
                                   : "bg-surface-card text-ink-mid"

canvas/src/components/ErrorBoundary.tsx

@@ -76,7 +76,7 @@ export class ErrorBoundary extends React.Component<
             <p className="text-sm text-ink-mid mb-1">
               An unexpected error occurred while rendering the application.
             </p>
-            <p className="text-xs text-bad/80 mb-6 font-mono break-all">
+            <p className="text-xs text-bad mb-6 font-mono break-all">
               {this.state.error?.message ?? "Unknown error"}
             </p>
             <div className="flex items-center justify-center gap-3">

canvas/src/components/ExternalConnectModal.tsx

@@ -360,7 +360,7 @@ function SnippetBlock({
         <button
           type="button"
           onClick={onCopy}
-          className="text-xs px-2 py-1 rounded bg-accent-strong/80 hover:bg-accent text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
+          className="text-xs px-2 py-1 rounded bg-accent text-white hover:bg-accent-strong transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
         >
           {copied ? "Copied!" : "Copy"}
         </button>

canvas/src/components/MissingKeysModal.tsx

@@ -451,7 +451,7 @@ function ProviderPickerModal({
                     <button
                       onClick={() => handleSaveKey(index)}
                       disabled={!entry.value.trim() || entry.saving}
-                      className="px-3 py-1.5 bg-accent-strong hover:bg-accent text-[11px] rounded text-white disabled:opacity-30 transition-colors shrink-0"
+                      className="px-3 py-1.5 bg-accent-strong hover:bg-accent text-[11px] rounded text-white disabled:opacity-30 transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
                     >
                       {entry.saving ? "..." : "Save"}
                     </button>
@@ -492,7 +492,7 @@ function ProviderPickerModal({
                 !selectorValue.providerId ||
                 (showModelInput && model.trim() === "")
               }
-              className="px-3.5 py-1.5 text-[12px] bg-accent-strong hover:bg-accent text-white rounded-lg transition-colors disabled:opacity-40"
+              className="px-3.5 py-1.5 text-[12px] bg-accent-strong hover:bg-accent text-white rounded-lg transition-colors disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
             >
               {allSaved ? "Deploy" : entries.length > 1 ? "Add Keys" : "Add Key"}
             </button>

canvas/src/components/ProviderModelSelector.tsx

@@ -420,7 +420,7 @@ export function ProviderModelSelector({
               spellCheck={false}
               autoComplete="off"
               data-testid="model-input"
-              className="w-full bg-surface-sunken border border-line rounded px-2 py-1.5 text-[11px] text-ink font-mono focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/20 transition-colors disabled:opacity-50"
+              className="w-full bg-surface-sunken border border-line rounded px-2 py-1.5 text-[11px] text-ink font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:border-accent transition-colors disabled:opacity-50"
             />
             <p className="text-[9px] text-ink-mid mt-1 leading-relaxed">
               {selected?.wildcard

canvas/src/components/ThemeToggle.tsx

@@ -61,8 +61,12 @@ export function ThemeToggle({ className = "" }: { className?: string }) {
         return;
       }
       setTheme(OPTIONS[next].value);
-      // Move focus to the new button so arrow-key navigation is continuous
-      const btns = (e.currentTarget.closest("[role=radiogroup]") as HTMLElement)?.querySelectorAll<HTMLButtonElement>("[role=radio]");
+      // Move focus to the new button so arrow-key navigation is continuous.
+      // Use direct-child query to scope strictly to this radiogroup's buttons
+      // and avoid accidentally focusing unrelated [role=radio] elements
+      // elsewhere in the DOM (e.g. React Flow canvas nodes).
+      const radiogroup = e.currentTarget.closest("[role=radiogroup]") as HTMLElement | null;
+      const btns = radiogroup?.querySelectorAll<HTMLButtonElement>("> [role=radio]");
       btns?.[next]?.focus();
     },
     []

canvas/src/components/tabs/FilesTab.tsx

@@ -226,7 +226,7 @@ function PlatformOwnedFilesTab({ workspaceId }: { workspaceId: string }) {
         <div role="alertdialog" aria-labelledby="files-delete-all-msg" className="mx-3 mt-2 px-3 py-2 bg-red-950/30 border border-red-800/40 rounded space-y-1.5">
           <p id="files-delete-all-msg" className="text-xs text-bad">Delete all {files.filter((f) => !f.dir).length} files? This cannot be undone.</p>
           <div className="flex gap-2">
-            <button type="button" onClick={() => { handleDeleteAll(); setShowDeleteAll(false); }} className="px-2 py-0.5 bg-red-600 hover:bg-red-700 text-[10px] rounded text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-surface">Delete All</button>
+            <button type="button" onClick={() => { handleDeleteAll(); setShowDeleteAll(false); }} className="px-2 py-0.5 bg-red-700 hover:bg-red-600 text-[10px] rounded text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-surface">Delete All</button>
             <button type="button" onClick={() => setShowDeleteAll(false)} className="px-2 py-0.5 bg-surface-card hover:bg-surface-elevated hover:text-ink text-[10px] rounded text-ink-mid transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-1 focus-visible:ring-offset-surface">Cancel</button>
           </div>
         </div>
@@ -240,7 +240,7 @@ function PlatformOwnedFilesTab({ workspaceId }: { workspaceId: string }) {
         <div role="alertdialog" aria-labelledby="files-delete-one-msg" className="mx-3 mt-2 px-3 py-2 bg-amber-950/30 border border-amber-800/40 rounded space-y-1.5">
           <p id="files-delete-one-msg" className="text-xs text-warm">Delete <span className="font-mono">{confirmDelete}</span>{files.find((f) => f.path === confirmDelete && f.dir) ? " and all its contents" : ""}?</p>
           <div className="flex gap-2">
-            <button type="button" onClick={confirmDeleteFile} className="px-2 py-0.5 bg-red-600 hover:bg-red-700 text-[10px] rounded text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-surface">Delete</button>
+            <button type="button" onClick={confirmDeleteFile} className="px-2 py-0.5 bg-red-700 hover:bg-red-600 text-[10px] rounded text-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/60 focus-visible:ring-offset-1 focus-visible:ring-offset-surface">Delete</button>
             <button type="button" onClick={() => setConfirmDelete(null)} className="px-2 py-0.5 bg-surface-card hover:bg-surface-elevated hover:text-ink text-[10px] rounded text-ink-mid transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 focus-visible:ring-offset-1 focus-visible:ring-offset-surface">Cancel</button>
           </div>
         </div>

canvas/src/components/tabs/FilesTab/FilesToolbar.tsx

@@ -32,7 +32,7 @@ export function FilesToolbar({
           value={root}
           onChange={(e) => setRoot(e.target.value)}
           aria-label="File root directory"
-          className="text-[10px] bg-surface-card text-ink-mid border border-line rounded px-1.5 py-0.5 outline-none"
+          className="text-[10px] bg-surface-card text-ink-mid border border-line rounded px-1.5 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
         >
           <option value="/configs">/configs</option>
           <option value="/home">/home</option>

canvas/src/components/tabs/ScheduleTab.tsx

@@ -332,6 +332,13 @@ export function ScheduleTab({ workspaceId }: Props) {
                   <div className="flex items-center gap-1.5">
                     <button
                       onClick={() => handleToggle(sched)}
+                      aria-label={
+                        sched.last_status === "error"
+                          ? "Last run failed — click to disable"
+                          : sched.last_status === "ok"
+                          ? "Last run OK — click to disable"
+                          : "Never run — click to enable"
+                      }
                       className={`w-2 h-2 rounded-full flex-shrink-0 ${
                         sched.last_status === "error"
                           ? "bg-red-400"