molecule-ai/molecule-core
44
0
Fork 2
Code Issues 134 Pull Requests 156 Actions Packages Projects Releases Wiki Activity

fix(canvas/mobile): WCAG 2.4.7 comprehensive focus-visible audit — all interactive buttons
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 5s
Details
CI / Detect changes (pull_request) Successful in 9s
Details
CI / Shellcheck (E2E scripts) (pull_request) Successful in 14s
Details
E2E API Smoke Test / detect-changes (pull_request) Successful in 7s
Details
E2E Chat / detect-changes (pull_request) Successful in 6s
Details
E2E Staging Canvas (Playwright) / detect-changes (pull_request) Successful in 6s
Details
Handlers Postgres Integration / detect-changes (pull_request) Successful in 4s
Details
Harness Replays / detect-changes (pull_request) Successful in 5s
Details
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 5s
Details
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 4s
Details
qa-review / approved (pull_request) Failing after 4s
Details
gate-check-v3 / gate-check (pull_request) Successful in 4s
Details
sop-checklist / na-declarations (pull_request) N/A: (none)
Details
sop-checklist / all-items-acked (pull_request) Successful in 4s
Details
security-review / approved (pull_request) Failing after 4s
Details
sop-tier-check / tier-check (pull_request) Successful in 5s
Details
CI / Platform (Go) (pull_request) Successful in 3m7s
Details
lint-required-no-paths / lint-required-no-paths (pull_request) Successful in 1m3s
Details
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 3s
Details
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 2s
Details
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 2s
Details
Harness Replays / Harness Replays (pull_request) Successful in 14s
Details
CI / all-required (pull_request) Successful in 6m42s
Details
CI / Canvas (Next.js) (pull_request) Successful in 6m30s
Details
CI / Python Lint & Test (pull_request) Successful in 6m41s
Details
CI / Canvas Deploy Reminder (pull_request) Has been skipped
Details
E2E Chat / E2E Chat (pull_request) Failing after 5m50s
Details
E2E Staging Canvas (Playwright) / Canvas tabs E2E (pull_request) Successful in 7m16s
Details

Browse Source 
MobileChat: Back, More, tab-switch, retry, remove-file, attach, send buttons
MobileSpawn: Close, template-select, tier-select, spawn buttons
components: tab bar, workspace-card, radio-filter buttons
MobileDetail: Back, More, tab-switch, chat-CTA buttons

All previously lacked focus-visible rings (WCAG 2.4.7). Added emerald-500
ring with appropriate offset for light/dark mode. Retry button also
gained aria-label. Template-select and tier-select gained descriptive
aria-labels matching the broadcast-chat-wcag branch pattern.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux
2026-05-18 04:04:12 +00:00
parent 7237baeda1
commit 118ac9dad6
4 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canvas/src/components/mobile/MobileChat.tsx
+9 -1
View File
@@ -339,6 +339,7 @@ export function MobileChat({
type="button"
onClick={onBack}
aria-label="Back"
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
width: 36,
height: 36,
@@ -385,6 +386,7 @@ export function MobileChat({
<button
type="button"
aria-label="More"
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
width: 36,
height: 36,
@@ -415,6 +417,7 @@ export function MobileChat({
key={t.id}
type="button"
onClick={() => setTab(t.id)}
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
padding: "4px 0 8px",
border: "none",
@@ -478,6 +481,8 @@ export function MobileChat({
onClick={() => {
loadInitial();
}}
aria-label="Retry loading chat history"
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
style={{
padding: "6px 14px",
borderRadius: 14,
@@ -619,6 +624,7 @@ export function MobileChat({
type="button"
onClick={() => removePendingFile(i)}
aria-label={`Remove ${f.name}`}
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
border: "none",
background: "transparent",
@@ -659,6 +665,7 @@ export function MobileChat({
onClick={() => fileInputRef.current?.click()}
disabled={!reachable || sending || uploading}
aria-label="Attach"
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
width: 32,
height: 32,
@@ -720,12 +727,13 @@ export function MobileChat({
onClick={send}
disabled={(!draft.trim() && pendingFiles.length === 0) || !reachable || sending || uploading}
aria-label="Send"
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
width: 36,
height: 36,
borderRadius: 999,
border: "none",
cursor: (draft.trim() || pendingFiles.length > 0) && !sending && !uploading ? "pointer" : "not-allowed",
cursor: (draft.trim() || pendingFiles.length === 0) && !sending && !uploading ? "pointer" : "not-allowed",
flexShrink: 0,
background:
(draft.trim() || pendingFiles.length > 0) && reachable && !sending && !uploading
canvas/src/components/mobile/MobileDetail.tsx
+4 -1
View File
@@ -83,11 +83,12 @@ export function MobileDetail({
type="button"
onClick={onBack}
aria-label="Back"
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={iconButtonStyle(p, dark)}
>
{Icons.back({ size: 18 })}
</button>
<button type="button" aria-label="More" style={iconButtonStyle(p, dark)}>
<button type="button" aria-label="More" className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900" style={iconButtonStyle(p, dark)}>
{Icons.more({ size: 18 })}
</button>
</div>
@@ -183,6 +184,7 @@ export function MobileDetail({
key={t.id}
type="button"
onClick={() => setTab(t.id)}
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
padding: "8px 14px",
borderRadius: 999,
@@ -215,6 +217,7 @@ export function MobileDetail({
type="button"
onClick={onChat}
data-testid="mobile-chat-cta"
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
width: "100%",
height: 52,
canvas/src/components/mobile/MobileSpawn.tsx
+7
View File
@@ -148,6 +148,7 @@ export function MobileSpawn({ dark, onClose }: { dark: boolean; onClose: () => v
type="button"
onClick={onClose}
aria-label="Close"
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
width: 32,
height: 32,
@@ -214,6 +215,8 @@ export function MobileSpawn({ dark, onClose }: { dark: boolean; onClose: () => v
setTplId(t.id);
setTier(tCode);
}}
aria-label={`Select template: ${t.name} (tier ${t.tier})`}
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
background: on
? dark
@@ -331,6 +334,8 @@ export function MobileSpawn({ dark, onClose }: { dark: boolean; onClose: () => v
key={t}
type="button"
onClick={() => setTier(t)}
aria-label={`Select tier ${t}: ${TIER_LABEL[t]}`}
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
flex: 1,
padding: "10px 8px",
@@ -378,6 +383,8 @@ export function MobileSpawn({ dark, onClose }: { dark: boolean; onClose: () => v
type="button"
onClick={handleSpawn}
disabled={busy || !tplId || templates.length === 0}
aria-label="Spawn agent"
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
width: "100%",
height: 52,
canvas/src/components/mobile/components.tsx
+3
View File
@@ -133,6 +133,7 @@ export function TabBar({
aria-label={t.label}
onClick={() => onChange(t.id)}
onKeyDown={(e) => handleKeyDown(e, idx)}
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
background: "none",
border: "none",
@@ -291,6 +292,7 @@ export function AgentCard({
data-testid="workspace-card"
aria-label={`${agent.name}, status: ${agent.status}, tier ${agent.tier}${agent.remote ? ", remote" : ""}`}
onClick={onClick}
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
display: "block",
width: "100%",
@@ -444,6 +446,7 @@ export function FilterChips({
type="button"
aria-checked={on}
onClick={() => onChange(o.id)}
className="focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-100 dark:focus-visible:ring-offset-zinc-900"
style={{
display: "inline-flex",
alignItems: "center",