molecule-ai/molecule-core
41
0
Fork 2
Code Issues 103 Pull Requests 144 Actions 164 Packages Projects Releases Wiki Activity

fix(canvas): add WCAG 2.4.7 focus-visible to 5 more interactive buttons

Browse Source 
- ChatTab.tsx: Retry (history load error), Attach file, Send message
  buttons all gain focus-visible:ring-2
- SkillsTab.tsx: "+ Install Plugin" and "Hide Registry" buttons gain
  focus-visible:ring-2

Found via accessibility audit of previously unchecked components.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux 2026-05-16 19:59:18 +00:00
parent afa4d53201
commit b510b4fd69
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
canvas/src/components/tabs/ChatTab.tsx
View File

@ -404,7 +404,7 @@ function MyChatPanel({ workspaceId, data }: Props) {
</p>
<button
onClick={history.loadInitial}
className="text-[10px] px-2 py-0.5 rounded bg-red-800 text-red-200 hover:bg-red-700 transition-colors"
className="text-[10px] px-2 py-0.5 rounded bg-red-800 text-red-200 hover:bg-red-700 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-1"
>
Retry
</button>
@ -636,7 +636,7 @@ function MyChatPanel({ workspaceId, data }: Props) {
disabled={!agentReachable || sending || uploading}
aria-label="Attach file"
title="Attach file"
className="p-2 bg-surface-card hover:bg-surface-card border border-line rounded-lg text-ink-mid hover:text-ink transition-colors shrink-0 disabled:opacity-40"
className="p-2 bg-surface-card hover:bg-surface-card border border-line rounded-lg text-ink-mid hover:text-ink transition-colors shrink-0 disabled:opacity-40 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
>
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M11 6.5 7 10.5a2 2 0 1 0 2.8 2.8l4-4a3.5 3.5 0 0 0-5-5l-4.5 4.5a5 5 0 0 0 7 7l4-4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
@ -676,7 +676,8 @@ function MyChatPanel({ workspaceId, data }: Props) {
<button
onClick={handleSend}
disabled={(!input.trim() && pendingFiles.length === 0) || !agentReachable || sending || uploading}
className="px-4 py-2 bg-accent-strong hover:bg-accent text-xs font-medium rounded-lg text-white disabled:opacity-30 transition-colors shrink-0"
aria-label={uploading ? "Uploading" : "Send message"}
className="px-4 py-2 bg-accent-strong hover:bg-accent text-xs font-medium rounded-lg text-white disabled:opacity-30 transition-colors shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
>
{uploading ? "Uploading…" : "Send"}
</button>

4
canvas/src/components/tabs/SkillsTab.tsx
View File

@ -325,7 +325,7 @@ export function SkillsTab({ workspaceId, data }: Props) {
</div>
<button
onClick={() => setShowRegistry(true)}
className="rounded-full border border-violet-700/50 bg-violet-950/30 px-3 py-0.5 text-[10px] text-violet-200 hover:bg-violet-900/40 transition-colors"
className="rounded-full border border-violet-700/50 bg-violet-950/30 px-3 py-0.5 text-[10px] text-violet-200 hover:bg-violet-900/40 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-1"
aria-expanded="false"
aria-controls="plugins-section"
>
@ -349,7 +349,7 @@ export function SkillsTab({ workspaceId, data }: Props) {
</div>
<button
onClick={() => setShowRegistry(!showRegistry)}
className="rounded-full border border-violet-700/50 bg-violet-950/30 px-3 py-1 text-[10px] text-violet-200 hover:bg-violet-900/40 transition-colors"
className="rounded-full border border-violet-700/50 bg-violet-950/30 px-3 py-1 text-[10px] text-violet-200 hover:bg-violet-900/40 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-1"
aria-expanded={showRegistry}
aria-controls="plugins-registry"
>