🎨 Palette: Add contextual ARIA labels to citation action buttons

[aicoder2009]

💡 What

Added dynamically generated contextual aria-label attributes to generic visual text buttons (e.g., [edit], [delete], [copy], [+ add notes]) within the SortableCitation component. The labels now incorporate the citation title/description (e.g., aria-label="Edit citation My Great Book").

🎯 Why

In a list of citations, repetitive action buttons lacking accessible names become a major accessibility barrier for screen reader users. Without these context-specific labels, a user navigating via screen reader would merely hear "edit, button" over and over again, completely detached from the specific list item the button targets.

📸 Before/After

• Before: Screen readers announce "edit, button" for every edit action across all citations in the list.
• After: Screen readers announce "Edit citation [Citation Title], button" for each edit action, providing unambiguous context. (This change is purely semantic/a11y level and does not alter the visual UI).

♿ Accessibility

This change is a direct enhancement for WCAG compliance and inclusive design, ensuring that non-visual users have the same contextual understanding of interactive elements as visual users do.

---

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

Summary by CodeRabbit

• Accessibility
  • Improved screen reader labels for citation actions in lists, making buttons like edit, delete, copy, share, notes, quotes, and tags easier to understand and less ambiguous.
  • Confirmation messages now reference the relevant citation more clearly.
  • Added guidance for using distinct contextual labels on repeated action buttons.

[vercel]

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

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

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

📝 Walkthrough

Walkthrough

Adds a shared citation title in SortableCitation and uses it to provide context-specific aria-label values for copy, edit, share, delete, notes, quotes, and tags controls, plus a documentation note about dynamic labels for repeated list actions.

Changes

Citation action labels

Layer / File(s)	Summary
Shared title and top actions src/components/wiki/sortable-citation.tsx, .jules/palette.md	Derives citationTitle once and reuses it for the top citation actions and notes controls, including the clear-notes confirmation text; adds a palette note about dynamic aria-label values for repeated generic buttons.
Quotes and tags actions src/components/wiki/sortable-citation.tsx	Adds citation-specific aria-label values to the quote add/edit/remove controls and the tag add/cancel controls in both editing and non-editing states.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

A bunny peeks at labels anew,
With context-rich names, each button says true.
Copy, tags, quotes—no more guesswork in sight,
My whiskers approve of the words shining bright.
Hop hop! 🐰

🚥 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 accurately summarizes the main accessibility change: adding contextual ARIA labels to 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.

✨ 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-sortable-citation-3601663965893804477

---

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/wiki/sortable-citation.tsx (1)

633-688: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Add citation context to the remove-tag button too.

This pass updates the tag add/cancel labels, but the sibling remove control in the same block still exposes only Remove tag ${tag}. In a repeated citation list that leaves duplicate accessible names across rows, so screen readers still can't tell which citation the removal applies to.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/wiki/sortable-citation.tsx` around lines 633 - 688, The
remove-tag control in sortable-citation still has an ambiguous accessible name
and needs citation-specific context like the add/cancel buttons. Update the
remove action in the citation tag block to include the citation title or ID in
its aria-label, using the same citationTitle value already available in
sortable-citation.tsx. Make sure the label clearly distinguishes which citation
the tag removal applies to when the list contains repeated rows.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@src/components/wiki/sortable-citation.tsx`:
- Around line 633-688: The remove-tag control in sortable-citation still has an
ambiguous accessible name and needs citation-specific context like the
add/cancel buttons. Update the remove action in the citation tag block to
include the citation title or ID in its aria-label, using the same citationTitle
value already available in sortable-citation.tsx. Make sure the label clearly
distinguishes which citation the tag removal applies to when the list contains
repeated rows.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 8d548b78-a2af-43e7-9776-cd58fb94eb1d

📥 Commits

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

📒 Files selected for processing (2)

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