From dbdf4e7f2be0023048ccba786818ee31f653691a Mon Sep 17 00:00:00 2001 From: Molecule AI Core-UIUX Date: Sun, 10 May 2026 16:55:56 +0000 Subject: [PATCH] fix(canvas): add focus-visible rings across 5 more components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit WCAG 2.4.7 — Focus Visible (Two-level Keyboard Navigation). ExternalConnectModal: tab buttons, close button, two Copy buttons. ProvisioningTimeout: dismiss, Retry, Cancel, View Logs, Keep, Remove. MemoryInspectorPanel: clear search, Refresh, memory row expand, Forget. ProviderModelSelector: "back to model list" text button. settings-panel.css: .test-connection__btn focus-visible ring. Co-Authored-By: Claude Opus 4.7 --- canvas/src/components/ExternalConnectModal.tsx | 8 ++++---- canvas/src/components/MemoryInspectorPanel.tsx | 8 ++++---- canvas/src/components/ProviderModelSelector.tsx | 2 +- canvas/src/components/ProvisioningTimeout.tsx | 12 ++++++------ canvas/src/styles/settings-panel.css | 5 +++++ 5 files changed, 20 insertions(+), 15 deletions(-) diff --git a/canvas/src/components/ExternalConnectModal.tsx b/canvas/src/components/ExternalConnectModal.tsx index 3caaafbe..cd02f6fa 100644 --- a/canvas/src/components/ExternalConnectModal.tsx +++ b/canvas/src/components/ExternalConnectModal.tsx @@ -198,7 +198,7 @@ export function ExternalConnectModal({ info, onClose }: Props) { role="tab" aria-selected={tab === t} onClick={() => setTab(t)} - className={`px-3 py-2 text-sm border-b-2 -mb-px transition-colors ${ + className={`px-3 py-2 text-sm border-b-2 -mb-px transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface ${ tab === t ? "border-accent text-ink" : "border-transparent text-ink-mid hover:text-ink-mid" @@ -309,7 +309,7 @@ export function ExternalConnectModal({ info, onClose }: Props) { @@ -339,7 +339,7 @@ function SnippetBlock({ @@ -376,7 +376,7 @@ function Field({ type="button" onClick={onCopy} disabled={!value} - className="text-xs px-2 py-1 rounded bg-surface-card hover:bg-surface-card text-ink disabled:opacity-40" + className="text-xs px-2 py-1 rounded bg-surface-card hover:bg-surface-card text-ink disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1" > {copied ? "Copied!" : "Copy"} diff --git a/canvas/src/components/MemoryInspectorPanel.tsx b/canvas/src/components/MemoryInspectorPanel.tsx index 6358f802..6655ad37 100644 --- a/canvas/src/components/MemoryInspectorPanel.tsx +++ b/canvas/src/components/MemoryInspectorPanel.tsx @@ -360,7 +360,7 @@ export function MemoryInspectorPanel({ workspaceId }: Props) { setDebouncedQuery(''); }} aria-label="Clear search" - className="absolute right-2 text-ink-mid hover:text-ink transition-colors text-sm leading-none" + className="absolute right-2 text-ink-mid hover:text-ink transition-colors text-sm leading-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1" > × @@ -381,7 +381,7 @@ export function MemoryInspectorPanel({ workspaceId }: Props) { type="button" onClick={loadEntries} disabled={pluginUnavailable} - className="px-2 py-1 text-[11px] bg-surface-card hover:bg-surface-card text-ink-mid rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed" + className="px-2 py-1 text-[11px] bg-surface-card hover:bg-surface-card text-ink-mid rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1" aria-label="Refresh memories" > ↻ Refresh @@ -515,7 +515,7 @@ function MemoryEntryRow({ entry, onDelete }: MemoryEntryRowProps) { {/* Header row */} diff --git a/canvas/src/components/ProviderModelSelector.tsx b/canvas/src/components/ProviderModelSelector.tsx index 4de96f7f..6620aa55 100644 --- a/canvas/src/components/ProviderModelSelector.tsx +++ b/canvas/src/components/ProviderModelSelector.tsx @@ -437,7 +437,7 @@ export function ProviderModelSelector({ handleModelChange(selected.models[0]?.id ?? ""); } }} - className="text-[9px] text-accent hover:text-accent mt-0.5" + className="text-[9px] text-accent hover:text-accent mt-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1" > ← back to model list diff --git a/canvas/src/components/ProvisioningTimeout.tsx b/canvas/src/components/ProvisioningTimeout.tsx index 2602d9cb..de959922 100644 --- a/canvas/src/components/ProvisioningTimeout.tsx +++ b/canvas/src/components/ProvisioningTimeout.tsx @@ -321,7 +321,7 @@ export function ProvisioningTimeout({ onClick={() => handleDismiss(entry.workspaceId)} aria-label="Dismiss provisioning timeout warning" title="Dismiss — keep this workspace running without the warning" - className="shrink-0 text-warm/60 hover:text-amber-200 transition-colors -mr-1" + className="shrink-0 text-warm/60 hover:text-amber-200 transition-colors -mr-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 focus-visible:ring-offset-1 focus-visible:ring-offset-amber-950" >