Skip to content

feat(stat-card): add copy-to-clipboard affordance on Dashboard stat values (Closes #770) - #870

Open
waterWang wants to merge 2 commits into
Predictify-org:mainfrom
waterWang:feat/dashboard-copy-clipboard-770
Open

feat(stat-card): add copy-to-clipboard affordance on Dashboard stat values (Closes #770)#870
waterWang wants to merge 2 commits into
Predictify-org:mainfrom
waterWang:feat/dashboard-copy-clipboard-770

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Adds a hover-reveal copy-to-clipboard button on each stat value in the Dashboard's StatCard component (success state). When clicked, the stat value is copied to the clipboard and a success toast is shown.

Changes

  • components/cards/stat-card.tsx:

    • Added a Copy icon button that appears on hover (opacity-0 → opacity-100 on group-hover)
    • Button is visible on focus-visible for keyboard users (focus-visible:opacity-100)
    • Uses the existing useToast hook for success/error feedback
    • Transitions the icon from CopyCheck (green) for 2 seconds after a successful copy
    • Includes a sr-only live region for screen-reader announcements
    • Cleans up timeouts on unmount
  • components/cards/__tests__/stat-card.copy.test.tsx (new):

    • 5 focused tests for the copy-to-clipboard behavior
    • Tests: renders copy button, not shown in empty/loading/error, copied state, keyboard accessibility, clipboard unavailable

Accessibility

  • The copy button is a native <button> element, keyboard-reachable and focusable
  • Uses aria-label for descriptive copy action text
  • Uses aria-pressed to convey the transient copied state
  • Has a sr-only aria-live=polite region for screen-reader announcements
  • Hover-reveal pattern with focus-visible:opacity-100 ensures keyboard users can see the button

Closes #770

@vercel

vercel Bot commented Aug 8, 2026

Copy link
Copy Markdown

@waterWang is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

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.

Add copy-to-clipboard affordance on Dashboard [b#036]

1 participant