fix(canvas): WCAG 2.4.7 focus-visible on AttachmentViews + MobileCanvas #1395

Closed
core-fe wants to merge 2 commits from fix/canvas-attachment-focus-visible into main
2 changed files with 21 additions and 2 deletions
@@ -171,6 +171,20 @@ export function MobileCanvas({
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
>
<style>{`
.mobile-canvas__reset-btn:focus-visible {
outline: 2px solid var(--accent, #3b82f6);
outline-offset: 2px;
}
.mobile-canvas__node-btn:focus-visible {
outline: 2px solid var(--accent, #3b82f6);
outline-offset: 2px;
}
.mobile-canvas__spawn-btn:focus-visible {
outline: 2px solid var(--accent, #3b82f6);
outline-offset: 2px;
}
`}</style>
{/* Dotted grid background — fills the viewport, doesn't transform */}
<div
style={{
@@ -205,6 +219,7 @@ export function MobileCanvas({
type="button"
onClick={resetView}
aria-label="Reset zoom"
className="mobile-canvas__reset-btn"
style={{
position: "absolute",
right: 14,
@@ -271,6 +286,8 @@ export function MobileCanvas({
<button
key={l.agent.id}
type="button"
aria-label={`Open ${l.agent.name}`}
className="mobile-canvas__node-btn"
onClick={() => onOpen(l.agent.id)}
style={{
position: "absolute",
@@ -376,6 +393,7 @@ export function MobileCanvas({
type="button"
onClick={onSpawn}
aria-label="Spawn new agent"
className="mobile-canvas__spawn-btn"
style={{
position: "absolute",
right: 24,
@@ -33,7 +33,7 @@ export function PendingAttachmentPill({
<button
onClick={onRemove}
aria-label={`Remove ${file.name}`}
className="ml-0.5 text-ink-mid hover:text-ink transition-colors shrink-0"
className="ml-0.5 text-ink-mid hover:text-ink transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1"
>
<svg width="10" height="10" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
@@ -63,7 +63,8 @@ export function AttachmentChip({
<button
onClick={() => onDownload(attachment)}
title={`Download ${attachment.name}`}
className={`flex items-center gap-1.5 rounded-md border px-2 py-1 text-[10px] transition-colors max-w-full ${toneClasses}`}
aria-label={`Download ${attachment.name}`}
className={`flex items-center gap-1.5 rounded-md border px-2 py-1 text-[10px] transition-colors max-w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 ${toneClasses}`}
>
<FileGlyph className="shrink-0 opacity-70" />
<span className="truncate">{attachment.name}</span>