🎨 Palette: Improve accessibility of citation action buttons

[aicoder2009]

💡 What

Added semantic aria-label attributes to the generic visual text buttons ([copy], [copy in-text], [edit], [share], [delete]) in the SortableCitation component. The copy buttons specifically use dynamically conditionally updated labels that mirror their visual state changes (e.g., changing from "Copy full citation" to "Copied full citation").

🎯 Why

While these text-based buttons technically have an accessible name (the text content of the button, e.g., "[copy]"), these names lack specific context when placed inside lists with numerous identical buttons across multiple citations. Screen reader users navigating via landmarks or form controls might encounter repetitive names like "copy", "edit", and "delete" without knowing what they are operating on. More descriptive context such as "Edit citation details" and "Copy full citation" drastically improves comprehension and ease of use.

📸 Before/After

Before: Screen reader would announce: "left bracket copy right bracket button", "left bracket edit right bracket button".
After: Screen reader announces: "Copy full citation button", "Edit citation details button", "Copied full citation button" (when activated).

♿ Accessibility

• Provides unique, descriptive contexts for generic actions inside citation list components.
• Avoids reliance strictly on adjacent textual context by explicitly assigning meaning on the button itself.
• Provides accurate and real-time state feedback for copy actions (Copying vs Copied).

---

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

Summary by CodeRabbit

• Accessibility
  • Improved button labels in citation actions so screen readers can better identify options like copy, share, delete, and edit.
  • Minor markup cleanup around the citation controls for more consistent behavior.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
opencitation	Ready	Preview, Comment	Jul 5, 2026 11:19am

[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.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[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: c3eed9f3-555a-4f7d-ae59-cb5a890f931d

📥 Commits

Reviewing files that changed from the base of the PR and between b69285b and 80fc057.

📒 Files selected for processing (1)

• src/components/wiki/sortable-citation.tsx

---

📝 Walkthrough

Walkthrough

This PR adds and adjusts aria-label attributes on citation action buttons (copy full citation, copy in-text citation, share, delete, edit) within the SortableCitation component, including conditional labels reflecting copy state, and reformats surrounding button markup.

Changes

Citation button accessibility labels

Layer / File(s)	Summary
Aria-label additions for citation buttons src/components/wiki/sortable-citation.tsx	Copy full/in-text citation buttons get conditional aria-labels based on copy state; share, delete, and edit buttons gain explicit aria-labels with aligned markup formatting.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Related PRs: None found.

Suggested labels: accessibility, ui

Suggested reviewers: None found.

🐰 A rabbit hops with labels bright,
Each button now speaks its plight—
"Copy," "Share," "Delete," all clear,
Screen readers rejoice, draw near!

🚥 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 clearly matches the PR’s main change: improving accessibility for citation action buttons.
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-citation-a11y-2857833030940629427

---

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.}