a11y(4.1.2): fix nested interactive elements in Copyable component

[rosanusi]

Summary

• Replaces outer <button> wrapper in clickAllToCopy mode with a <div class="group">, moving the click-to-copy action into an inner <button> sibling of CopyButton
• Eliminates nested interactive elements (button inside button), which violates WCAG 2.2 SC 4.1.2 (Name, Role, Value)
• The inner button gets aria-label={\Copy ${content}`}` so screen readers announce it meaningfully
• The group class stays on the <div>, so group-hover:visible / group-focus-within:visible Tailwind utilities continue to work for the CopyButton reveal
• No consumer changes required — the fix is entirely within the primitive

Test plan

• Verify clickAllToCopy mode renders <div> wrapping two sibling buttons (no button-in-button)
• Tab to the inner copy button and confirm screen reader announces "Copy [content]"
• Hover over the component and confirm CopyButton becomes visible via group-hover:visible
• Focus the inner button and confirm CopyButton stays visible via group-focus-within:visible
• Click the inner button and confirm content is copied to clipboard

A11y-Audit-Ref: 4.1.2-copyable-nested-interactive

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Jul 13, 2026 4:27pm

[ardiewen]

Reviewed + verified in-browser (workflow header, long ID). Confirmed via the a11y tree that the button-in-button is gone and the copy button is properly named. Truncation is unchanged before/after (no regression). Pushed two follow-ups:

• aria-label guard for custom slots — aria-label={$$slots.default ? undefined : \Copy ${content}`}. The hardcoded label broke SC 2.5.3 for custom slots (e.g. cloud-ui api-key-detailsshows "ID: {id}" whilecontent` is just the id); now the slot text names the button, as before.
• Dedupe — hoisted the shared <div> wrapper and <CopyButton> out of the if/else.

Separately filed DT-4259: copy-success isn't announced reliably (no aria-live region — it relies on the CopyButton's icon <title> flipping, which is VoiceOver-only and silent for the content button). Pre-existing in the primitive, out of scope here.