🎨 Palette: Add context-aware ARIA labels to sortable citation action buttons

[aicoder2009]

What:
Added descriptive aria-label attributes to the generic, repetitive action buttons ([copy], [edit], [delete], [share], [+ add notes], etc.) within the SortableCitation component.

Why:
When rendering a list of citations, screen reader users previously heard the same generic action (e.g., "edit") repeated for every item in the list, making it ambiguous which specific item the action applied to, or what the action fully entailed.

Before/After:
Before:
<button>[edit]</button> (Announces: "edit, button")

After:
<button aria-label="Edit citation">[edit]</button> (Announces: "Edit citation, button")

Accessibility:
This specifically improves the WCAG 2.1 guideline 4.1.2 (Name, Role, Value) by ensuring that text links and icon buttons provide sufficient contextual information to assistive technologies, avoiding ambiguity in repeated list structures. The [copy] and [copy-in-text] labels also dynamically update to confirm success to screen readers.

---

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

Summary by CodeRabbit

• Accessibility
  • Improved screen reader clarity by adding descriptive labels to citation and note/quote action buttons.
  • Context-aware labels now help distinguish repeated actions such as edit, copy, share, delete, add, and clear.
• Documentation
  • Added a new accessibility guideline note reminding contributors to use descriptive labels for repeated actions in lists.

[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 25, 2026 11:33am

[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: a059b853-3015-4736-a6b0-a79f74855c6e

📥 Commits

Reviewing files that changed from the base of the PR and between b69285b and 9b60a43.

📒 Files selected for processing (2)

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

---

📝 Walkthrough

Walkthrough

This change adds guidance for context-aware aria-label text on repeated list actions and updates citation, notes, and quote controls to use descriptive labels for their buttons.

Changes

Accessible repeating action labels

Layer / File(s)	Summary
Guidance and citation toolbar labels .jules/palette.md, src/components/wiki/sortable-citation.tsx	A new accessibility note is added, and the citation toolbar buttons receive descriptive labels for copy, in-text copy, edit, share, and delete actions.
Notes and quote labels src/components/wiki/sortable-citation.tsx	Notes controls and quote controls now include descriptive aria-label text for edit, clear, add, and quote-add actions.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

A bunny hops through labels neat,
So every button has its seat.
“Edit” and “Copy” now speak their name,
No screen-reader echoes sound the same.
🐇✨ Clear cues make lists sweet!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
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 (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main accessibility change to sortable citation action buttons.
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-aria-labels-citation-11197480258152816486

---

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