From 575f44475f8c0039ac7702e940888a4475d45e34 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Sun, 17 May 2026 23:42:03 +0000
Subject: [PATCH] fix(canvas/FilesTab): WCAG 1.1.1/2.4.7/4.1.3 on FileEditor

- Add aria-hidden=true to decorative emoji (empty state + file type icon)
- Add aria-label to textarea so screen readers announce it as "File content editor"
- Add role=status + aria-live=polite to save success message (WCAG 4.1.3)
- Add focus-visible ring to Download and Save buttons (WCAG 2.4.7)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/tabs/FilesTab/FileEditor.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/canvas/src/components/tabs/FilesTab/FileEditor.tsx b/canvas/src/components/tabs/FilesTab/FileEditor.tsx
index db5301c5d..c628085cc 100644
--- a/canvas/src/components/tabs/FilesTab/FileEditor.tsx
+++ b/canvas/src/components/tabs/FilesTab/FileEditor.tsx
@@ -35,7 +35,7 @@ export function FileEditor({
     return (
       <div className="flex-1 flex items-center justify-center">
         <div className="text-center">
-          <div className="text-2xl opacity-20 mb-2">📄</div>
+          <div aria-hidden="true" className="text-2xl opacity-20 mb-2">📄</div>
           <p className="text-[10px] text-ink-mid">Select a file to edit</p>
         </div>
       </div>
@@ -47,16 +47,16 @@ export function FileEditor({
       {/* File header */}
       <div className="flex items-center justify-between px-3 py-1.5 border-b border-line/40 bg-surface-sunken/20">
         <div className="flex items-center gap-1.5 min-w-0">
-          <span className="text-[10px] opacity-50">{getIcon(selectedFile, false)}</span>
+          <span aria-hidden="true" className="text-[10px] opacity-50">{getIcon(selectedFile, false)}</span>
           <span className="text-[10px] font-mono text-ink-mid truncate">{selectedFile}</span>
           {isDirty && <span className="text-[9px] text-warm">modified</span>}
         </div>
         <div className="flex items-center gap-2">
-          {success && <span className="text-[9px] text-good">{success}</span>}
+          {success && <span role="status" aria-live="polite" className="text-[9px] text-good">{success}</span>}
           <button
             onClick={onDownload}
             aria-label="Download file"
-            className="text-[10px] text-ink-mid hover:text-ink-mid"
+            className="text-[10px] text-ink-mid hover:text-ink-mid focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
           >
             ↓
           </button>
@@ -64,7 +64,7 @@ export function FileEditor({
             <button
               onClick={onSave}
               disabled={!isDirty || saving}
-              className="text-[10px] text-accent hover:text-accent disabled:opacity-30"
+              className="text-[10px] text-accent hover:text-accent disabled:opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
             >
               {saving ? "Saving..." : "Save"}
             </button>
@@ -103,6 +103,7 @@ export function FileEditor({
             }
           }}
           spellCheck={false}
+          aria-label="File content editor"
           className="flex-1 w-full bg-surface p-3 text-[11px] font-mono text-ink leading-relaxed resize-none focus:outline-none"
           style={{ tabSize: 2 }}
         />
-- 
2.52.0