fix(canvas): add WCAG 2.4.7 focus-visible to AgentCommsPanel tabs,

retry button, AttachmentChip download button, mobile tab buttons,
and the Remove button in AttachmentViews.

- AgentCommsPanel.tsx: tab buttons (roving tabindex) and loadError
  retry button now have focus-visible:ring-2
- AttachmentViews.tsx: download button (AttachmentChip) gains
  aria-label + focus-visible; Remove button gains focus-visible
- mobile/components.tsx: mobile tab buttons get className for
  CSS focus-visible (inline styles can't use :focus-visible)
- globals.css: .mobile-tab-btn:focus-visible outline using CSS var

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux 2026-05-16 14:42:40 +00:00
parent fd2f3c469c
commit afa4d53201

View File

@ -62,6 +62,7 @@ export function AttachmentChip({
return (
<button
onClick={() => onDownload(attachment)}
title={`Download ${attachment.name}`}
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}`}
>