fix(a11y): reveal Copyable's CopyButton on focus-within (WCAG 2.1.1)

[bilal-karim]

Summary

The Copyable primitive hides its CopyButton behind invisible group-hover:visible. Tailwind's invisible compiles to visibility: hidden, which removes the element from the focus order — Tab skips it entirely. Mouse users can hover to reveal and click; keyboard users in default mode have no way to invoke copy at all.

This PR adds group-focus-within:visible alongside the existing group-hover:visible so the button becomes visible (and focus-eligible) whenever focus moves anywhere inside the wrapping group.

   <CopyButton
     {copyIconTitle}
     {copySuccessIconTitle}
-    class={visible ? 'visible' : 'invisible group-hover:visible'}
+    class={visible
+      ? 'visible'
+      : 'invisible group-hover:visible group-focus-within:visible'}
     on:click={handleOnClick}
     copied={$copied}
   />

Applied to both branches (clickAllToCopy and default mode).

Keyboard contract after fix

Step	Today	After
Tab into a Copyable cell (e.g., workflow ID with <Link> inside)	Focus lands on the link	✓ Same
Tab again	Focus jumps past invisible copy button to next element	✓ Focus lands on the CopyButton (now revealed via :focus-within)
Enter / Space on the focused CopyButton	(button wasn't reachable)	✓ Clipboard receives content, icon swaps to checkmark
Tab again	(focus is past the cell)	✓ Focus moves on; CopyButton returns to invisible
Mouse hover	Button reveals	✓ Unchanged

Audit context

• WCAG 2.2 SC 2.1.1 Keyboard (Level A) — High remediation priority.
• Affects every default-mode Copyable consumer — detail-list value cells (workflow ID, run ID), event-summary rows, etc.

Browser support

:focus-within is supported in all evergreen browsers.

Test plan

• On a workflow detail page, Tab into a workflow-ID / run-ID cell. Confirm next Tab reaches the copy button.
• Press Enter on the focused copy button — clipboard receives the value, icon swaps to checkmark.
• Press Space — same behavior.
• Tab past the copy button — copy button returns to invisible.
• Mouse hover still reveals the copy button (regression check).
• Screen reader smoke (VoiceOver/NVDA): copy button announces with its accessible name from copyIconTitle.
• axe-core: zero new violations.
• Regression: clickAllToCopy mode still works for both keyboard (Enter on outer button) and mouse.

🤖 Generated with Claude Code

A11y-Audit-Ref: 2.1.1-copyable-focus-within

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	May 25, 2026 8:32pm