new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

shadcn/ui · all subjects

accessibility & semantics

5 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

AttachmentGroup keyboard scrolling and accessibility

An AttachmentGroup scrolls horizontally. When attachments are interactive (with triggers or actions), keyboard users reach off-screen items by tabbing to them. For presentational attachments, make the group itself focusable and scrollable by adding tabIndex={0}, role='group', and an aria-label.

Attachment error state accessibility

The error state uses a destructive color. Keep the failure reason in AttachmentDescription so the state is not conveyed by color alone.

AttachmentAction accessibility requirements

AttachmentAction is usually icon-only and should have an aria-label describing the action and its target. Example: <AttachmentAction aria-label='Remove sales-dashboard.pdf'><XIcon /></AttachmentAction>

AttachmentTrigger accessibility requirements

AttachmentTrigger covers the card with no text of its own, so give it an aria-label for what activating it does. When using a render prop with a link element, include the aria-label on the link. Example: <a href={url} target='_blank' rel='noreferrer' aria-label='Open workspace.png' />

AttachmentGroup stacking order and focus

The AttachmentTrigger sits behind the actions in the stacking order, so an AttachmentAction and the AttachmentTrigger never trap each other—both remain separately focusable and clickable.

Give your agent this brain