From 403fe63db86cee128c2003f735d6a9f9973daeba Mon Sep 17 00:00:00 2001
From: Molecule AI Frontend Engineer <frontend-engineer@agents.moleculesai.app>
Date: Sat, 18 Apr 2026 01:13:56 +0000
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20MemoryTab=20=E2=80=94=20role=3Dale?=
 =?UTF-8?q?rt,=20labelled=20inputs,=20aria-expanded=20(#902)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add role="alert" to the global error banner and the inline add-form
  error message so screen readers announce errors immediately on render
- Add aria-label to all three add-form inputs (key / value / TTL) so
  every form control has an accessible name (was flagged as unlabelled)
- Add aria-expanded={expanded === entry.key} to each entry toggle button
  so AT announces collapsed/expanded state on activation

Closes #902

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 canvas/src/components/tabs/MemoryTab.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/canvas/src/components/tabs/MemoryTab.tsx b/canvas/src/components/tabs/MemoryTab.tsx
index fa70faa5..721e0d8a 100644
--- a/canvas/src/components/tabs/MemoryTab.tsx
+++ b/canvas/src/components/tabs/MemoryTab.tsx
@@ -120,7 +120,7 @@ export function MemoryTab({ workspaceId }: Props) {
   return (
     <div className="p-4 space-y-4">
       {error && !showAdd && (
-        <div className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-red-400">
+        <div role="alert" className="px-3 py-1.5 bg-red-900/30 border border-red-800 rounded text-xs text-red-400">
           {error}
         </div>
       )}
@@ -233,6 +233,7 @@ export function MemoryTab({ workspaceId }: Props) {
               value={newKey}
               onChange={(e) => setNewKey(e.target.value)}
               placeholder="Key"
+              aria-label="Memory key"
               className="w-full bg-zinc-900 border border-zinc-600 rounded px-2 py-1 text-xs text-zinc-100 focus:outline-none focus:border-blue-500"
             />
             <textarea
@@ -240,15 +241,17 @@ export function MemoryTab({ workspaceId }: Props) {
               onChange={(e) => setNewValue(e.target.value)}
               placeholder='Value (JSON or plain text)'
               rows={3}
+              aria-label="Memory value (JSON or plain text)"
               className="w-full bg-zinc-900 border border-zinc-600 rounded px-2 py-1 text-xs font-mono text-zinc-100 focus:outline-none focus:border-blue-500 resize-none"
             />
             <input
               value={newTTL}
               onChange={(e) => setNewTTL(e.target.value)}
               placeholder="TTL in seconds (optional)"
+              aria-label="TTL in seconds (optional)"
               className="w-full bg-zinc-900 border border-zinc-600 rounded px-2 py-1 text-xs text-zinc-100 focus:outline-none focus:border-blue-500"
             />
-            {error && <div className="text-xs text-red-400">{error}</div>}
+            {error && <div role="alert" className="text-xs text-red-400">{error}</div>}
             <div className="flex gap-2">
               <button
                 onClick={handleAdd}
@@ -279,6 +282,7 @@ export function MemoryTab({ workspaceId }: Props) {
                   <button
                     onClick={() => setExpanded(expanded === entry.key ? null : entry.key)}
                     className="w-full flex items-center justify-between px-3 py-2 text-left"
+                    aria-expanded={expanded === entry.key}
                   >
                     <span className="text-xs font-mono text-blue-400">{entry.key}</span>
                     <div className="flex items-center gap-2">