From c7f2f9dd973bd2d0183f1693695ddcefe77b5d77 Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Mon, 18 May 2026 01:07:06 +0000
Subject: [PATCH] fix(canvas/settings): WCAG 1.1.1 + 4.1.3 fixes for settings
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TokensTab + OrgTokensTab: add role=alert + aria-live=assertive to
  error state divs (WCAG 4.1.3)
- SecretRow: wrap ✏ and 🗑 emoji in aria-hidden span (WCAG 1.1.1)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 canvas/src/components/settings/OrgTokensTab.tsx | 2 +-
 canvas/src/components/settings/SecretRow.tsx    | 4 ++--
 canvas/src/components/settings/TokensTab.tsx    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/canvas/src/components/settings/OrgTokensTab.tsx b/canvas/src/components/settings/OrgTokensTab.tsx
index 34af4c04a..044e2497f 100644
--- a/canvas/src/components/settings/OrgTokensTab.tsx
+++ b/canvas/src/components/settings/OrgTokensTab.tsx
@@ -175,7 +175,7 @@ export function OrgTokensTab() {
       )}
 
       {error && (
-        <div className="px-3 py-2 bg-red-950/40 border border-red-800/50 rounded-lg text-[10px] text-bad">
+        <div role="alert" aria-live="assertive" className="px-3 py-2 bg-red-950/40 border border-red-800/50 rounded-lg text-[10px] text-bad">
           {error}
         </div>
       )}
diff --git a/canvas/src/components/settings/SecretRow.tsx b/canvas/src/components/settings/SecretRow.tsx
index 92bb633ea..3319f3e0a 100644
--- a/canvas/src/components/settings/SecretRow.tsx
+++ b/canvas/src/components/settings/SecretRow.tsx
@@ -156,7 +156,7 @@ export function SecretRow({ secret, workspaceId }: SecretRowProps) {
             className="secret-row__action-btn"
             title="Edit"
           >
-            ✏
+            <span aria-hidden="true">✏</span>
           </button>
           <button
             type="button"
@@ -165,7 +165,7 @@ export function SecretRow({ secret, workspaceId }: SecretRowProps) {
             className="secret-row__action-btn secret-row__action-btn--delete"
             title="Delete"
           >
-            🗑
+            <span aria-hidden="true">🗑</span>
           </button>
         </div>
       </div>
diff --git a/canvas/src/components/settings/TokensTab.tsx b/canvas/src/components/settings/TokensTab.tsx
index 092e4df56..d4a210e9e 100644
--- a/canvas/src/components/settings/TokensTab.tsx
+++ b/canvas/src/components/settings/TokensTab.tsx
@@ -122,7 +122,7 @@ export function TokensTab({ workspaceId }: TokensTabProps) {
       )}
 
       {error && (
-        <div className="px-3 py-2 bg-red-950/40 border border-red-800/50 rounded-lg text-[10px] text-bad">
+        <div role="alert" aria-live="assertive" className="px-3 py-2 bg-red-950/40 border border-red-800/50 rounded-lg text-[10px] text-bad">
           {error}
         </div>
       )}
-- 
2.52.0