From 7b5d291644029a27a5bdd284eb51d6061a2664b3 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Sun, 17 May 2026 23:59:53 +0000
Subject: [PATCH] fix(canvas): WCAG 1.1.1/1.3.1/2.4.7 on ChatTab, FileTree,
 secrets-section

- ChatTab: add aria-label + focus-visible ring to Send button (WCAG 2.4.7, 4.1.2)
- FileTree: add aria-hidden=true to decorative chevron + folder emoji (WCAG 1.1.1)
- secrets-section: add aria-label to key-name + value inputs (WCAG 1.3.1)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/tabs/ChatTab.tsx                | 3 ++-
 canvas/src/components/tabs/FilesTab/FileTree.tsx      | 4 ++--
 canvas/src/components/tabs/config/secrets-section.tsx | 2 ++
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/canvas/src/components/tabs/ChatTab.tsx b/canvas/src/components/tabs/ChatTab.tsx
index d6a9b85ca..274a84961 100644
--- a/canvas/src/components/tabs/ChatTab.tsx
+++ b/canvas/src/components/tabs/ChatTab.tsx
@@ -676,7 +676,8 @@ function MyChatPanel({ workspaceId, data }: Props) {
           <button
             onClick={handleSend}
             disabled={(!input.trim() && pendingFiles.length === 0) || !agentReachable || sending || uploading}
-            className="px-4 py-2 bg-accent-strong hover:bg-accent text-xs font-medium rounded-lg text-white disabled:opacity-30 transition-colors shrink-0"
+            aria-label={uploading ? "Uploading attachments, please wait" : "Send message"}
+            className="px-4 py-2 bg-accent-strong hover:bg-accent text-xs font-medium rounded-lg text-white disabled:opacity-30 transition-colors shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
           >
             {uploading ? "Uploading…" : "Send"}
           </button>
diff --git a/canvas/src/components/tabs/FilesTab/FileTree.tsx b/canvas/src/components/tabs/FilesTab/FileTree.tsx
index 0e32bc455..7469b9d32 100644
--- a/canvas/src/components/tabs/FilesTab/FileTree.tsx
+++ b/canvas/src/components/tabs/FilesTab/FileTree.tsx
@@ -209,8 +209,8 @@ function TreeItem({
           onContextMenu={(e) => openContextMenu(e, node)}
           {...dragProps}
         >
-          <span className="text-[9px] text-ink-mid w-3">{isLoading ? "…" : expanded ? "▼" : "▶"}</span>
-          <span className="text-[10px]">📁</span>
+          <span aria-hidden="true" className="text-[9px] text-ink-mid w-3">{isLoading ? "…" : expanded ? "▼" : "▶"}</span>
+          <span aria-hidden="true" className="text-[10px]">📁</span>
           <span className="text-[10px] text-ink-mid flex-1">{node.name}</span>
           <button
             aria-label={`Delete ${node.name}`}
diff --git a/canvas/src/components/tabs/config/secrets-section.tsx b/canvas/src/components/tabs/config/secrets-section.tsx
index 1a5313bd6..ee45319ea 100644
--- a/canvas/src/components/tabs/config/secrets-section.tsx
+++ b/canvas/src/components/tabs/config/secrets-section.tsx
@@ -351,8 +351,10 @@ export function SecretsSection({ workspaceId, requiredEnv }: { workspaceId: stri
           {showAdd ? (
             <div className="bg-surface-card/50 rounded p-2 space-y-1.5 border border-line/50">
               <input value={newKey} onChange={(e) => setNewKey(e.target.value.toUpperCase())} placeholder="KEY_NAME"
+                aria-label="Secret key name"
                 className="w-full bg-surface-sunken border border-line rounded px-2 py-1 text-[10px] font-mono text-ink focus:outline-none focus:border-accent" />
               <input value={newValue} onChange={(e) => setNewValue(e.target.value)} placeholder="Value" type="password"
+                aria-label="Secret value (write-only)"
                 className="w-full bg-surface-sunken border border-line rounded px-2 py-1 text-[10px] text-ink focus:outline-none focus:border-accent" />
               <div className="flex gap-2">
                 <button type="button" onClick={() => { if (newKey && newValue) handleSave(newKey, newValue); }} disabled={!newKey || !newValue}
-- 
2.52.0