Skip to content

fix: CopyLinkButton success animation and ARIA live announcement - #835

Merged
Kingsman-99 merged 1 commit into
Stellar-split:mainfrom
therealbibson:fix/663-copylinkbutton-success-feedback
Sep 28, 2026
Merged

Kingsman-99 merged 1 commit into
Stellar-split:mainfrom
therealbibson:fix/663-copylinkbutton-success-feedback

Conversation

@therealbibson

Copy link
Copy Markdown
Contributor

Overview

Gives CopyLinkButton real copy feedback: on a successful clipboard write the icon swaps to a checkmark and the button turns green for 2 seconds (the reset window already provided by useCopyToClipboard), and an aria-live="polite" region announces "Link copied" to assistive technology. Previously the only signal was a text label change, which was invisible to screen readers.

Related Issue

Closes #663

Changes

  • [MODIFY] src/components/CopyLinkButton.tsx

    • Adds a link icon in the idle state and swaps it for a checkmark icon while the copy succeeds.
    • Applies a Tailwind transition-colors duration-300 and toggles bg-green-600 for the 2s success window (falls back to bg-gray-700/hover:bg-gray-600 when idle).
    • Adds a visually hidden aria-live="polite" region that renders "Link copied" when the copy succeeds.
    • Keeps the existing accessible label behaviour (Copied while in the success state) and adds type="button".
  • [ADD] src/__tests__/CopyLinkButton.test.tsx

    • Covers the idle state, the success state (icon swap, green class, live-region text) and the presence of the polite live region.

Verification Results

Verified via GitHub Contents/Git API (no local clone).
Acceptance criteria mapping:
✅ Icon changes to a checkmark for 2 s then resets (useCopyToClipboard reset timer)
✅ Background transitions to green for 2 s via a Tailwind transition class
✅ aria-live="polite" region announces "Link copied" on success
✅ Existing tests continue to pass (change is isolated to CopyLinkButton + new test)
Acceptance Criteria Status
Icon changes to a checkmark for 2 seconds then resets ✅ Conditional checkmark/link SVG driven by the hook's existing 2s copied state
Background transitions to green for 2 seconds via a Tailwind transition class ✅ transition-colors duration-300 + bg-green-600 while copied
aria-live="polite" region announces "Link copied" ✅ sr-only live region renders "Link copied" on success
Existing tests continue to pass ✅ Only CopyLinkButton.tsx changed; new focused tests added

@vercel

vercel Bot commented Sep 27, 2026

Copy link
Copy Markdown

@therealbibson is attempting to deploy a commit to the kingsman-99's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Sep 27, 2026

Copy link
Copy Markdown

@therealbibson Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@Kingsman-99
Kingsman-99 merged commit 5adb2ad into Stellar-split:main Sep 28, 2026
0 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

CopyLinkButton: Add success animation and ARIA live region feedback

2 participants