🎨 Palette: Improve accessibility of generic visual text buttons in citation list

[aicoder2009]

💡 What: Added contextual aria-labels to generic visual text buttons (e.g., [copy], [edit], [delete], [remove], [clear]) within the SortableCitation component. The [copy] and [copy in-text] buttons now also feature conditionally dynamic aria-labels that update to reflect their copied state.
🎯 Why: Generic action buttons placed inside lists are repeatedly announced identically by screen readers. Adding contextual ARIA labels ensures visually impaired users understand exactly which action is being taken on which component.
📸 Before/After: Visuals remain identical, but underlying DOM elements are now enriched with clear ARIA contexts.
♿ Accessibility: Better screen reader context for repeated list elements and dynamic visual state changes in buttons.

---

PR created automatically by Jules for task 17237128926521255955 started by @aicoder2009

Summary by CodeRabbit

• Accessibility
  • Improved screen reader support for citation controls with clearer, context-specific labels.
  • Buttons in citation lists now announce actions more accurately, including temporary states like copied, editing, adding, or removing.
  • Reduced the chance of misleading announcements for repeated icon-only controls such as copy, edit, delete, clear, and tag actions.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
opencitation	Ready	Preview, Comment	Jun 29, 2026 11:24am

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 671532ab-8dcb-4410-aca9-c22c8001a076

📥 Commits

Reviewing files that changed from the base of the PR and between b69285b and 450168e.

⛔ Files ignored due to path filters (2)

• dev_server.log is excluded by !**/*.log
• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

• .jules/palette.md
• src/components/wiki/sortable-citation.tsx

---

📝 Walkthrough

Walkthrough

Adds aria-label attributes to all icon-only/repeated action buttons in the SortableCitation component (copy, edit, share, delete, notes edit/clear/add, quote remove/edit/add, tag add/cancel/add), with copy buttons conditionally switching labels on completion. Documents the pattern in .jules/palette.md.

Changes

Accessibility aria-labels for SortableCitation

Layer / File(s)	Summary
aria-label additions to all button controls src/components/wiki/sortable-citation.tsx, .jules/palette.md	Adds contextual aria-label strings to copy (with conditional "copied!" state), edit, share, delete, notes, quote, and tag buttons; palette documents the repeated-button labeling pattern.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐇 A label for every button, clear as a bell,
"Copy!", "Edit!", "Delete!" — now the screen readers can tell.
No more mystery icons lost in the code,
Each aria whispers the action bestowed.
The rabbit hops proud down accessibility road! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: improving accessibility for citation list buttons with contextual labels.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-a11y-citation-buttons-17237128926521255955

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: lockfile failed supply-chain policy check. Run pnpm install locally to update the lockfile.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}