From a322dd00566949a92f944009ca125756b50448e2 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Wed, 22 Apr 2026 20:07:49 +0000
Subject: [PATCH] =?UTF-8?q?fix(canvas/a11y):=20unaudited=20components=20?=
 =?UTF-8?q?=E2=80=94=20backdrop/semantic=20a11y=20gaps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- ConsoleModal.tsx: backdrop div aria-hidden; error div role=alert (WCAG 4.1.2)
- ProvisioningTimeout.tsx: warning SVG aria-hidden; cancel-dialog backdrop aria-hidden (WCAG 4.1.2)
- TermsGate.tsx: backdrop aria-hidden; dialog role=dialog+aria-modal+aria-labelledby; error role=alert
- TopBar.tsx: replace non-semantic role=banner div with <header>; logo emoji aria-hidden
- FilesToolbar.tsx: aria-label on select dropdown; aria-label on all icon buttons (New, Upload, Export, Clear, Refresh, file input)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 canvas/src/components/ConsoleModal.tsx            |  3 ++-
 canvas/src/components/ProvisioningTimeout.tsx     |  6 +++---
 canvas/src/components/TermsGate.tsx               | 15 ++++++++++-----
 canvas/src/components/canvas/TopBar.tsx           |  6 +++---
 .../src/components/tabs/FilesTab/FilesToolbar.tsx | 12 +++++++-----
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/canvas/src/components/ConsoleModal.tsx b/canvas/src/components/ConsoleModal.tsx
index 8535bec4..5152abc9 100644
--- a/canvas/src/components/ConsoleModal.tsx
+++ b/canvas/src/components/ConsoleModal.tsx
@@ -90,7 +90,7 @@ export function ConsoleModal({ workspaceId, workspaceName, open, onClose }: Prop
 
   return createPortal(
     <div className="fixed inset-0 z-[9999] flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
+      <div aria-hidden="true" className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
       <div
         role="dialog"
         aria-modal="true"
@@ -126,6 +126,7 @@ export function ConsoleModal({ workspaceId, workspaceName, open, onClose }: Prop
           )}
           {!loading && error && (
             <div
+              role="alert"
               className="text-[12px] text-amber-300 bg-amber-950/30 border border-amber-900/40 rounded px-3 py-2"
               data-testid="console-error"
             >
diff --git a/canvas/src/components/ProvisioningTimeout.tsx b/canvas/src/components/ProvisioningTimeout.tsx
index fc4b4502..91cff327 100644
--- a/canvas/src/components/ProvisioningTimeout.tsx
+++ b/canvas/src/components/ProvisioningTimeout.tsx
@@ -196,8 +196,8 @@ export function ProvisioningTimeout({
           >
             <div className="flex items-start gap-3">
               {/* Warning icon */}
-              <div className="w-8 h-8 rounded-lg bg-amber-600/20 border border-amber-500/30 flex items-center justify-center shrink-0 mt-0.5">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <div aria-hidden="true" className="w-8 h-8 rounded-lg bg-amber-600/20 border border-amber-500/30 flex items-center justify-center shrink-0 mt-0.5">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                   <path
                     d="M8 2L14 13H2L8 2Z"
                     stroke="#fbbf24"
@@ -252,7 +252,7 @@ export function ProvisioningTimeout({
       {/* Cancel confirmation dialog */}
       {confirmingCancel && (
         <div className="fixed inset-0 z-50 flex items-center justify-center">
-          <div className="absolute inset-0 bg-black/60" onClick={() => setConfirmingCancel(null)} />
+          <div aria-hidden="true" className="absolute inset-0 bg-black/60" onClick={() => setConfirmingCancel(null)} />
           <div className="relative bg-zinc-900 border border-zinc-700 rounded-xl shadow-2xl p-5 max-w-[340px] w-full mx-4">
             <h3 className="text-sm font-semibold text-zinc-100 mb-2">
               Cancel deployment?
diff --git a/canvas/src/components/TermsGate.tsx b/canvas/src/components/TermsGate.tsx
index 18a80518..9938aba6 100644
--- a/canvas/src/components/TermsGate.tsx
+++ b/canvas/src/components/TermsGate.tsx
@@ -77,9 +77,14 @@ export function TermsGate({ children }: { children: React.ReactNode }) {
     <>
       {children}
       {status === "pending" && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/80 backdrop-blur-sm">
-          <div className="mx-4 max-w-lg rounded-lg border border-zinc-700 bg-zinc-900 p-6 shadow-xl">
-            <h2 className="text-lg font-semibold text-white">Terms &amp; conditions</h2>
+        <div aria-hidden="true" className="fixed inset-0 z-50 flex items-center justify-center bg-zinc-950/80 backdrop-blur-sm">
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="terms-dialog-title"
+            className="mx-4 max-w-lg rounded-lg border border-zinc-700 bg-zinc-900 p-6 shadow-xl"
+          >
+            <h2 id="terms-dialog-title" className="text-lg font-semibold text-white">Terms &amp; conditions</h2>
             <p className="mt-3 text-sm text-zinc-300">
               Before you create an organization, please review our{" "}
               <a href="/legal/terms" className="text-sky-400 underline" target="_blank" rel="noreferrer">
@@ -94,7 +99,7 @@ export function TermsGate({ children }: { children: React.ReactNode }) {
             <p className="mt-3 text-xs text-zinc-500">
               By agreeing you acknowledge that workspace data is stored in AWS us-east-2 (Ohio, United States).
             </p>
-            {error && <p className="mt-3 text-sm text-red-400">{error}</p>}
+            {error && <p role="alert" className="mt-3 text-sm text-red-400">{error}</p>}
             <div className="mt-5 flex justify-end gap-2">
               <button
                 onClick={accept}
@@ -108,7 +113,7 @@ export function TermsGate({ children }: { children: React.ReactNode }) {
         </div>
       )}
       {status === "error" && (
-        <div className="fixed bottom-4 left-4 right-4 mx-auto max-w-md rounded border border-red-800 bg-red-950 p-3 text-sm text-red-200">
+        <div role="alert" className="fixed bottom-4 left-4 right-4 mx-auto max-w-md rounded border border-red-800 bg-red-950 p-3 text-sm text-red-200">
           Couldn&apos;t check terms status: {error ?? "unknown error"}
         </div>
       )}
diff --git a/canvas/src/components/canvas/TopBar.tsx b/canvas/src/components/canvas/TopBar.tsx
index 5efb1a9d..c30262a9 100644
--- a/canvas/src/components/canvas/TopBar.tsx
+++ b/canvas/src/components/canvas/TopBar.tsx
@@ -17,9 +17,9 @@ interface TopBarProps {
  */
 export function TopBar({ canvasName = 'Canvas' }: TopBarProps) {
   return (
-    <div className="top-bar" role="banner">
+    <header className="top-bar">
       <div className="top-bar__left">
-        <span className="top-bar__logo">☁</span>
+        <span className="top-bar__logo" aria-hidden="true">☁</span>
         <span className="top-bar__name">{canvasName}</span>
       </div>
       <div className="top-bar__right">
@@ -28,6 +28,6 @@ export function TopBar({ canvasName = 'Canvas' }: TopBarProps) {
         <SettingsButton ref={settingsGearRef} />
         {/* Bell and Avatar would go here */}
       </div>
-    </div>
+    </header>
   );
 }
diff --git a/canvas/src/components/tabs/FilesTab/FilesToolbar.tsx b/canvas/src/components/tabs/FilesTab/FilesToolbar.tsx
index 5661c873..6502e365 100644
--- a/canvas/src/components/tabs/FilesTab/FilesToolbar.tsx
+++ b/canvas/src/components/tabs/FilesTab/FilesToolbar.tsx
@@ -31,6 +31,7 @@ export function FilesToolbar({
         <select
           value={root}
           onChange={(e) => setRoot(e.target.value)}
+          aria-label="File root directory"
           className="text-[10px] bg-zinc-800 text-zinc-300 border border-zinc-700 rounded px-1.5 py-0.5 outline-none"
         >
           <option value="/configs">/configs</option>
@@ -43,32 +44,33 @@ export function FilesToolbar({
       <div className="flex gap-1.5">
         {root === "/configs" && (
           <>
-            <button onClick={onNewFile} className="text-[10px] text-blue-400 hover:text-blue-300" title="Create new file">
+            <button onClick={onNewFile} aria-label="Create new file" className="text-[10px] text-blue-400 hover:text-blue-300" title="Create new file">
               + New
             </button>
             <input
               ref={uploadRef}
               type="file"
+              aria-label="Upload folder files"
               // @ts-expect-error webkitdirectory
               webkitdirectory=""
               multiple
               className="hidden"
               onChange={(e) => e.target.files && onUpload(e.target.files)}
             />
-            <button onClick={() => uploadRef.current?.click()} className="text-[10px] text-blue-400 hover:text-blue-300" title="Upload folder">
+            <button onClick={() => uploadRef.current?.click()} aria-label="Upload folder" className="text-[10px] text-blue-400 hover:text-blue-300" title="Upload folder">
               Upload
             </button>
           </>
         )}
-        <button onClick={onDownloadAll} className="text-[10px] text-zinc-500 hover:text-zinc-300" title="Download all files">
+        <button onClick={onDownloadAll} aria-label="Download all files" className="text-[10px] text-zinc-500 hover:text-zinc-300" title="Download all files">
           Export
         </button>
         {root === "/configs" && (
-          <button onClick={onClearAll} className="text-[10px] text-red-400/60 hover:text-red-400" title="Delete all files">
+          <button onClick={onClearAll} aria-label="Delete all files" className="text-[10px] text-red-400/60 hover:text-red-400" title="Delete all files">
             Clear
           </button>
         )}
-        <button onClick={onRefresh} className="text-[10px] text-zinc-500 hover:text-zinc-300" title="Refresh">
+        <button onClick={onRefresh} aria-label="Refresh file list" className="text-[10px] text-zinc-500 hover:text-zinc-300" title="Refresh">
           ↻
         </button>
       </div>