From 16ab60458d2fb519042816ada90ac64b1a43bd80 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Sun, 17 May 2026 09:13:45 +0000
Subject: [PATCH] fix(canvas/settings): WCAG 2.4.7 focus-visible on settings
 panel disabled buttons

- FileEditor.tsx: Save button gains focus-visible ring
- TokensTab.tsx: Create button gains focus-visible ring
- OrgTokensTab.tsx: Create button gains focus-visible ring
- settings-panel.css: DeleteConfirmDialog cancel/confirm CSS focus-visible
  (cherry-pick from #1386 fix/delete-dialog-focus)

WCAG 2.4.7: keyboard users must see visible focus indicator on all
interactive elements, including conditionally-disabled buttons.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/settings/OrgTokensTab.tsx    |  2 +-
 canvas/src/components/settings/TokensTab.tsx       |  2 +-
 canvas/src/components/tabs/FilesTab/FileEditor.tsx |  2 +-
 canvas/src/styles/settings-panel.css               | 10 ++++++++++
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/canvas/src/components/settings/OrgTokensTab.tsx b/canvas/src/components/settings/OrgTokensTab.tsx
index 34af4c04a..adade7ac3 100644
--- a/canvas/src/components/settings/OrgTokensTab.tsx
+++ b/canvas/src/components/settings/OrgTokensTab.tsx
@@ -131,7 +131,7 @@ export function OrgTokensTab() {
         <button
           onClick={handleCreate}
           disabled={creating}
-          className="px-3 py-1.5 bg-accent-strong/20 hover:bg-accent-strong/30 border border-accent/30 rounded-lg text-[11px] text-accent font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+          className="px-3 py-1.5 bg-accent-strong/20 hover:bg-accent-strong/30 border border-accent/30 rounded-lg text-[11px] text-accent font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
         >
           {creating ? (
             <>
diff --git a/canvas/src/components/settings/TokensTab.tsx b/canvas/src/components/settings/TokensTab.tsx
index 092e4df56..f86d2a0c6 100644
--- a/canvas/src/components/settings/TokensTab.tsx
+++ b/canvas/src/components/settings/TokensTab.tsx
@@ -88,7 +88,7 @@ export function TokensTab({ workspaceId }: TokensTabProps) {
         <button
           onClick={handleCreate}
           disabled={creating}
-          className="px-3 py-1.5 bg-accent-strong/20 hover:bg-accent-strong/30 border border-accent/30 rounded-lg text-[11px] text-accent font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5"
+          className="px-3 py-1.5 bg-accent-strong/20 hover:bg-accent-strong/30 border border-accent/30 rounded-lg text-[11px] text-accent font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
         >
           {creating ? <><Spinner size="sm" /> Creating...</> : '+ New Token'}
         </button>
diff --git a/canvas/src/components/tabs/FilesTab/FileEditor.tsx b/canvas/src/components/tabs/FilesTab/FileEditor.tsx
index db5301c5d..2d2c613c0 100644
--- a/canvas/src/components/tabs/FilesTab/FileEditor.tsx
+++ b/canvas/src/components/tabs/FilesTab/FileEditor.tsx
@@ -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>
diff --git a/canvas/src/styles/settings-panel.css b/canvas/src/styles/settings-panel.css
index 5d4be4514..02ac3b366 100644
--- a/canvas/src/styles/settings-panel.css
+++ b/canvas/src/styles/settings-panel.css
@@ -650,6 +650,11 @@
   cursor: pointer;
 }
 
+.delete-dialog__cancel-btn:focus-visible {
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+
 .delete-dialog__confirm-btn {
   background: var(--status-invalid);
   color: #ffffff;
@@ -659,6 +664,11 @@
   cursor: pointer;
 }
 
+.delete-dialog__confirm-btn:focus-visible {
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+
 .delete-dialog__confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 
 /* ── Unsaved changes guard ─────────────────────────── */
-- 
2.52.0