From 57946e105a59d1f6b407cae305dc25a8beadb68b Mon Sep 17 00:00:00 2001
From: Molecule AI Core-FE <core-fe@agents.moleculesai.app>
Date: Sun, 17 May 2026 02:49:51 +0000
Subject: [PATCH 1/2] fix(canvas): WCAG 2.4.7 focus-visible on AttachmentViews
 download + remove buttons

- AttachmentChip: add aria-label + keep title on download button, focus-visible ring
- PendingAttachment: add focus-visible ring on remove button

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

diff --git a/canvas/src/components/tabs/chat/AttachmentViews.tsx b/canvas/src/components/tabs/chat/AttachmentViews.tsx
index 0d01a425d..7a2a47ea2 100644
--- a/canvas/src/components/tabs/chat/AttachmentViews.tsx
+++ b/canvas/src/components/tabs/chat/AttachmentViews.tsx
@@ -33,7 +33,7 @@ export function PendingAttachmentPill({
       <button
         onClick={onRemove}
         aria-label={`Remove ${file.name}`}
-        className="ml-0.5 text-ink-mid hover:text-ink transition-colors shrink-0"
+        className="ml-0.5 text-ink-mid hover:text-ink transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
       >
         <svg width="10" height="10" viewBox="0 0 16 16" fill="none" aria-hidden="true">
           <path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
@@ -63,7 +63,8 @@ export function AttachmentChip({
     <button
       onClick={() => onDownload(attachment)}
       title={`Download ${attachment.name}`}
-      className={`flex items-center gap-1.5 rounded-md border px-2 py-1 text-[10px] transition-colors max-w-full ${toneClasses}`}
+      aria-label={`Download ${attachment.name}`}
+      className={`flex items-center gap-1.5 rounded-md border px-2 py-1 text-[10px] transition-colors max-w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 ${toneClasses}`}
     >
       <FileGlyph className="shrink-0 opacity-70" />
       <span className="truncate">{attachment.name}</span>
-- 
2.52.0


From 98e385254484110787a9748c321df5b8c8021420 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-FE <core-fe@agents.moleculesai.app>
Date: Sun, 17 May 2026 03:13:19 +0000
Subject: [PATCH 2/2] fix(canvas/mobile): WCAG 2.4.7 focus-visible rings on
 MobileCanvas buttons

- Add focus-visible outline ring to 3 inline-styled buttons:
  - Reset zoom button (aria-label="Reset zoom")
  - Agent node button (aria-label={Open ${name}})
  - Spawn FAB (aria-label="Spawn new agent")
- Focus ring uses var(--accent, #3b82f6) to match existing design tokens.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/mobile/MobileCanvas.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/canvas/src/components/mobile/MobileCanvas.tsx b/canvas/src/components/mobile/MobileCanvas.tsx
index acdaa1689..5f8e1216d 100644
--- a/canvas/src/components/mobile/MobileCanvas.tsx
+++ b/canvas/src/components/mobile/MobileCanvas.tsx
@@ -171,6 +171,20 @@ export function MobileCanvas({
       onTouchMove={onTouchMove}
       onTouchEnd={onTouchEnd}
     >
+      <style>{`
+        .mobile-canvas__reset-btn:focus-visible {
+          outline: 2px solid var(--accent, #3b82f6);
+          outline-offset: 2px;
+        }
+        .mobile-canvas__node-btn:focus-visible {
+          outline: 2px solid var(--accent, #3b82f6);
+          outline-offset: 2px;
+        }
+        .mobile-canvas__spawn-btn:focus-visible {
+          outline: 2px solid var(--accent, #3b82f6);
+          outline-offset: 2px;
+        }
+      `}</style>
       {/* Dotted grid background — fills the viewport, doesn't transform */}
       <div
         style={{
@@ -205,6 +219,7 @@ export function MobileCanvas({
           type="button"
           onClick={resetView}
           aria-label="Reset zoom"
+          className="mobile-canvas__reset-btn"
           style={{
             position: "absolute",
             right: 14,
@@ -271,6 +286,8 @@ export function MobileCanvas({
           <button
             key={l.agent.id}
             type="button"
+            aria-label={`Open ${l.agent.name}`}
+            className="mobile-canvas__node-btn"
             onClick={() => onOpen(l.agent.id)}
             style={{
               position: "absolute",
@@ -376,6 +393,7 @@ export function MobileCanvas({
         type="button"
         onClick={onSpawn}
         aria-label="Spawn new agent"
+        className="mobile-canvas__spawn-btn"
         style={{
           position: "absolute",
           right: 24,
-- 
2.52.0