[a11y] Fix nested interactive elements in Copyable component (WCAG 4.1.2)

[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	Jun 12, 2026 3:25pm