🎨 Palette: Add contextual aria-labels to citation buttons

[aicoder2009]

🎨 Palette: Add contextual aria-labels to citation buttons

💡 What: Added descriptive aria-label attributes to multiple action buttons (e.g., "[copy]", "[edit]", "[delete]", "[clear]") within the SortableCitation component. Also updated dynamic state buttons to conditionally switch their aria-label (e.g. "Citation copied!").

🎯 Why: To improve accessibility. Because lists of citations often contain repetitive link/button texts (like "edit", "edit", "edit"), adding context (e.g., "Edit citation: Introduction to Web Accessibility") clarifies for screen reader users exactly which item the action applies to without relying on visual structure.

♿ Accessibility: Addressed WCAG guidelines regarding non-text context by providing contextual accessible names for generic text links and preserving dynamic screen reader feedback.

---

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

Summary by CodeRabbit

• Bug Fixes
  • Enhanced accessibility with more descriptive labels on citation management buttons for screen reader users. Buttons now provide clearer feedback on copy states, edit and deletion actions, and note, quote, and tag management operations with better contextual information.

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

[vercel]

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

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

[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: dfaafede-3a18-4f82-899c-0be9ff73044f

📥 Commits

Reviewing files that changed from the base of the PR and between 2402643 and 73112cf.

📒 Files selected for processing (1)

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

---

📝 Walkthrough

Walkthrough

This PR enhances the accessibility of the SortableCitation component by adding contextual aria-label attributes to 11 buttons spread throughout the component. Labels include copy state awareness for copy buttons and contextual information using the citation title (or "Untitled" as fallback) for action buttons managing notes, quotes, and tags.

Changes

SortableCitation Accessibility Labels

Layer / File(s)	Summary
Add contextual aria-labels to component buttons src/components/wiki/sortable-citation.tsx	Copy buttons display dynamic labels reflecting "copied" state or generic "copy citation" text. Citation action buttons (edit, share, delete), notes management buttons (edit, clear, add), pulled-quote buttons (remove, add), quotes add button, and tag management buttons (add, cancel, add primary) each receive contextual labels incorporating the citation title or defaulting to "Untitled".

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A rabbit hops through buttons bright,
Labels now shine with semantic light,
Accessibility blooms, screen readers sing,
Contextual wisdom in each string! 🌟

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title is vague and misleading. It describes adding 'aria-labels' generally, but uses an emoji and the prefix '🎨 Palette:' which obscures the actual change being made.	Use a descriptive title without emojis that clearly conveys the accessibility improvement, such as: 'Add descriptive aria-labels to citation action buttons'
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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/add-contextual-aria-labels-5523942843128896863

---

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