🎨 Palette: Add contextual aria-labels to generic citation buttons

[aicoder2009]

💡 What

Added explicit aria-label attributes to the generic visual text buttons (like [copy], [edit], [share], [delete], [clear], [+ add notes], [+ add quote], [+ add tag], [remove], [add], and [cancel]) in src/components/wiki/sortable-citation.tsx. Also conditionally updated aria-labels for buttons that change visual state (like [copy] -> [copied!]).

🎯 Why

Text buttons with simple labels might look visually acceptable in isolation, but when they appear multiple times within lists or components like SortableCitation, screen reader users lose context (e.g., they just hear "edit, button, edit, button"). Providing contextual labels (e.g., "Edit citation") creates a significantly better experience.

📸 Before/After

This is a non-visual accessibility improvement.

♿ Accessibility

This enhancement allows screen reader users to understand exactly which citation or note they are interacting with when tabbing through the interface, providing robust, specific context that was previously missing.

---

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

Summary by CodeRabbit

• Accessibility
  • Improved screen reader labels for multiple buttons so their actions are clearer in different states.
  • Updated icon-only and reusable buttons to use more descriptive accessible names, including copy, edit, add, remove, cancel, and share actions.
  • Added guidance for keeping button labels accurate when visual states change, such as after a successful copy action.

[vercel]

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

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

[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: 4f898fc3-6b8c-46b3-a06d-34c86b0a3252

📥 Commits

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

📒 Files selected for processing (2)

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

---

📝 Walkthrough

Walkthrough

Adds aria-label attributes to numerous icon-only/generic buttons in the citation component (copy, copy-in-text, edit, share, delete, notes, quotes, and tags actions) and documents the accessibility guidance with a new dated entry in the palette file.

Changes

Accessibility labeling of citation buttons

Layer / File(s)	Summary
Guidance documentation .jules/palette.md	Adds a dated entry describing use of specific, state-aware aria-label text for generic and icon-only buttons.
Citation header action labels src/components/wiki/sortable-citation.tsx	Adds aria-label to copy, copy-in-text, edit, share, and delete buttons, with the copy label reflecting copied state.
Notes section button labels src/components/wiki/sortable-citation.tsx	Adds aria-label to edit, clear, and add-notes buttons.
Quotes section button labels src/components/wiki/sortable-citation.tsx	Adds aria-label to remove, add, and edit-quote buttons across editing and non-editing states.
Tags section button labels src/components/wiki/sortable-citation.tsx	Adds aria-label to add, cancel, and suggestion-tag buttons across editing and non-editing states.

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

🚥 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 and concisely summarizes the main accessibility change to citation 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-aria-labels-generic-buttons-17037669417749394547

---

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