add ARIA labels, pressed states, and fix keyboard visibility across card detail components

This commit is contained in:
Your Name
2026-02-19 19:54:22 +02:00
parent f79e4c7090
commit 06a2f3ff3d
6 changed files with 19 additions and 5 deletions

View File

@@ -52,6 +52,7 @@ export function AttachmentSection({
size="icon-xs"
onClick={handleAdd}
className="text-pylon-text-secondary hover:text-pylon-text"
aria-label="Add attachment"
>
<Plus className="size-3.5" />
</Button>
@@ -71,14 +72,14 @@ export function AttachmentSection({
</span>
<button
onClick={() => openPath(att.path)}
className="shrink-0 rounded p-0.5 text-pylon-text-secondary opacity-0 transition-opacity hover:bg-pylon-accent/10 hover:text-pylon-accent group-hover/att:opacity-100"
className="shrink-0 rounded p-0.5 text-pylon-text-secondary opacity-0 transition-opacity hover:bg-pylon-accent/10 hover:text-pylon-accent group-hover/att:opacity-100 focus-visible:opacity-100"
aria-label="Open attachment"
>
<ExternalLink className="size-3" />
</button>
<button
onClick={() => removeAttachment(cardId, att.id)}
className="shrink-0 rounded p-0.5 text-pylon-text-secondary opacity-0 transition-opacity hover:bg-pylon-danger/10 hover:text-pylon-danger group-hover/att:opacity-100"
className="shrink-0 rounded p-0.5 text-pylon-text-secondary opacity-0 transition-opacity hover:bg-pylon-danger/10 hover:text-pylon-danger group-hover/att:opacity-100 focus-visible:opacity-100"
aria-label="Remove attachment"
>
<X className="size-3" />