🎨 Palette: Add contextual ARIA labels to generic list buttons

[aicoder2009]

💡 What: Added explicit aria-label attributes to generic action buttons (e.g., "[edit]", "[delete]", "[share]", "[copy]") in the SortableCitation component. Furthermore, the [copy] and [copy in-text] buttons now feature dynamic aria-labels that correctly update to "Copied citation" when their visual state changes to "[copied!]".

🎯 Why: In repeated lists like a list of citations, generic buttons that just say "[edit]" or "[delete]" lack context for screen reader users, making it unclear what they are editing or deleting. Additionally, dynamic buttons that visually indicate a success state without updating their underlying accessibility label provide an inconsistent experience.

📸 Before/After:

• Before: A screen reader would announce: "edit, button", "copy, button".
• After: A screen reader now announces: "Edit citation, button", "Copy citation, button". When the copy button is clicked, it dynamically updates to "Copied citation, button".

♿ Accessibility: Improves adherence to WCAG Success Criterion 4.1.2 Name, Role, Value by providing unambiguous, contextual names for interactive controls within repeated list items, ensuring screen reader users have the full context for their actions.

---

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

Summary by CodeRabbit

• New Features
  • Improved accessibility for citation-related action buttons by adding clearer labels that include item-specific context.
  • Button labels now better reflect changing states, such as “Copy” changing to “Copied.”
  • Enhanced accessibility for controls related to editing, sharing, deleting, notes, quotes, and tags.

[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 30, 2026 11:40am

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds aria-label attributes to 12 action buttons in sortable-citation.tsx (copy, edit, share, delete, notes, quotes, and tag controls), providing citation-specific context and reflecting dynamic button states. Documents the corresponding ARIA labeling pattern in .jules/palette.md.

Changes

Contextual ARIA labels for citation buttons

Layer / File(s)	Summary
aria-label additions to sortable-citation buttons src/components/wiki/sortable-citation.tsx	Adds aria-label to all action buttons: copy (with copied/copy state), copy-in-text, edit, share, delete, notes edit, add notes, remove/add/edit quote, add tag, cancel tag, reuse tag, and add tag buttons.
Palette documentation .jules/palette.md	Adds a palette entry defining the pattern for context-specific and state-reactive aria-labels on generic list buttons.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐇 Hop hop, the buttons now speak their name,
"Copy citation for Smith" — no two the same!
The screen reader hops along with glee,
Each label whispers what the button will be.
Accessibility blooms like clover in spring! 🌿

🚥 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 accessibility-focused addition of contextual ARIA labels to generic list 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-citation-17536907517488478448

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed due to a network error.

---

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]

🧹 Nitpick comments (1)

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

458-467: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Add aria-label to the [clear] notes button.

This generic [clear] button is the remaining action button in the component without a contextual aria-label. Screen-reader users will only hear "clear" without context that it clears notes for this specific citation.

                <button
                  onClick={() => {
                    const label = citation.fields?.title || citation.formattedText?.slice(0, 60) || "this citation";
                    // eslint-disable-next-line no-alert
                    if (confirm(`Clear notes for "${label}"?`)) onSaveNotes(citation.id, "");
                  }}
                  className="text-wiki-link text-xs hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+                 aria-label="Clear notes"
                >
                  [clear]
                </button>

As per path instructions, all clickable things that aren't buttons use the link pattern with contextual ARIA labels.

🤖 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 458 - 467, The
[clear] action button in sortable-citation.tsx is missing a contextual
accessible name, so screen readers only announce a generic clear action. Update
the button in the citation notes clear handler to include an aria-label that
clearly states it clears notes for the specific citation, using the same label
text already derived from citation.fields?.title or citation.formattedText so
the context matches the confirm prompt.

Source: Path instructions

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

Nitpick comments:
In `@src/components/wiki/sortable-citation.tsx`:
- Around line 458-467: The [clear] action button in sortable-citation.tsx is
missing a contextual accessible name, so screen readers only announce a generic
clear action. Update the button in the citation notes clear handler to include
an aria-label that clearly states it clears notes for the specific citation,
using the same label text already derived from citation.fields?.title or
citation.formattedText so the context matches the confirm prompt.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: cbae8d8b-167f-4cdc-96a3-643e85b2f533

📥 Commits

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

📒 Files selected for processing (2)

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