From 54e2031e87921a67002eb8b4ef1126b1df9d2926 Mon Sep 17 00:00:00 2001
From: Evyatar Bluzer <bluzername@users.noreply.github.com>
Date: Sat, 1 Aug 2026 04:15:18 +0700
Subject: [PATCH] fix(ui): accessibility and cleanup for IssueWorkspaceCard
 copy button (#1832)

## Thinking Path

> - Paperclip is the open source app people use to manage AI agents for
work
> - The board UI shows the workspace attached to an issue in
`ui/src/components/IssueWorkspaceCard.tsx`
> - That card renders values such as the branch name and the workspace
path through a small `CopyableInline` component, each with an icon-only
copy button
> - The button has a `title` attribute only. Screen readers do not
announce `title` reliably. A screen reader user hears no useful name for
the button, because the button contains an icon and no text
> - The button also starts a 1.5 second `setTimeout` to reset its
"copied" state. Nothing clears that timer. If the card unmounts first,
the callback sets state on an unmounted component
> - This pull request adds a dynamic `aria-label` to the button and
clears the timer in a `useEffect` cleanup
> - The benefit is a copy control that assistive technology can
announce, and no stray timer after the card unmounts

## Linked Issues or Issue Description

No existing GitHub issue covers this. The problem is described below
with the fields from
[`bug_report.yml`](.github/ISSUE_TEMPLATE/bug_report.yml).

**What happened?**
Open an issue that has a workspace attached. Tab to the copy button next
to the branch or the workspace path in the workspace card. The screen
reader announces an unlabeled button, because the button holds only a
lucide `Copy` icon and a `title` attribute. Separately, copy a value and
navigate away within 1.5 seconds. The pending `setTimeout` then calls
`setCopied(false)` on an unmounted component.

**Expected behavior**
The copy button has an accessible name that says what it copies, and the
name changes to confirm the copy. The reset timer is cleared when the
component unmounts.

**Steps to reproduce**
1. Run the app locally with `pnpm dev`.
2. Open an issue that has a workspace attached, so `IssueWorkspaceCard`
renders.
3. Turn on a screen reader (VoiceOver, NVDA).
4. Tab to the copy button next to the workspace path or the branch name.
The button has no useful accessible name.
5. Click the copy button, then navigate away from the issue in under 1.5
seconds. The reset timer is still pending.

**Paperclip version or commit**
Reproducible on `master` at this pull request's base commit.

**Deployment mode**
Local dev (pnpm dev).

Related pull request, not a duplicate: #3531 makes copy-to-clipboard
buttons work in non-secure contexts. That pull request changes the
clipboard write path. This one changes the button label and the timer
cleanup, so the two do not overlap.

## What Changed

- Added an `aria-label` to the `CopyableInline` copy button in
`ui/src/components/IssueWorkspaceCard.tsx`. The label reads `Copy
<label>` (for example "Copy branch"), falls back to `Copy value` when
the component gets no `label` prop, and changes to `Copied to clipboard`
after a copy.
- Added a `useEffect` cleanup that calls
`clearTimeout(timerRef.current)` on unmount, so the 1.5 second reset
timer cannot fire after the component unmounts.

## Verification

- CI is green on this pull request.
- Static check: `pnpm -r typecheck`.
- Test suite: `pnpm test`.
- Manual, screen reader: open an issue with a workspace, tab to the copy
button next to the path or the branch, and confirm the announcement is
"Copy path" or "Copy branch". Activate the button and confirm the
announcement changes to "Copied to clipboard".
- Manual, timer: click the copy button and navigate away from the issue
immediately. Confirm the console shows no unmounted-component state
update.

## Risks

Low risk. The change adds one ARIA attribute and one unmount cleanup in
a single presentational component. No behavior changes for mouse users,
no API or schema change. `clearTimeout(undefined)` is a no-op, so the
cleanup is safe when the user never copied.

## Model Used

- Anthropic Claude Opus, model ID `claude-opus-4-6`, 200K context
window, extended thinking enabled, with tool use for file edits.
- Recorded by a maintainer while bringing this description up to the
current template. The original description predates the Model Used
requirement, so the author did not state a model. Author: please correct
this line if the model was different.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have not referenced internal/instance-local Paperclip issues or
links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip`
URLs)
- [x] My branch name describes the change (e.g. `docs/...`, `fix/...`)
and contains no internal Paperclip ticket id or instance-derived details
- [ ] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green
- [ ] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge

Notes on the checklist: no test or documentation change applies to a
two-line ARIA and cleanup fix in one component. The Greptile box stays
unchecked until the current review round closes.
---
 ui/src/components/IssueWorkspaceCard.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/src/components/IssueWorkspaceCard.tsx b/ui/src/components/IssueWorkspaceCard.tsx
index ad75baf88a..419acbe101 100644
--- a/ui/src/components/IssueWorkspaceCard.tsx
+++ b/ui/src/components/IssueWorkspaceCard.tsx
@@ -61,6 +61,9 @@ function BreakablePath({ text }: { text: string }) {
 function CopyableInline({ value, label, mono }: { value: string; label?: string; mono?: boolean }) {
   const [copied, setCopied] = useState(false);
   const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+
   const handleCopy = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(value);
@@ -81,6 +84,7 @@ function CopyableInline({ value, label, mono }: { value: string; label?: string;
         className="shrink-0 p-0.5 rounded hover:bg-accent/50 transition-colors text-muted-foreground hover:text-foreground opacity-0 group-hover/copy:opacity-100 focus:opacity-100"
         onClick={handleCopy}
         title={copied ? "Copied!" : "Copy"}
+        aria-label={copied ? "Copied to clipboard" : `Copy ${label ?? "value"}`}
       >
         {copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
       </button>