🎨 Palette: Add contextual ARIA labels to citation action buttons by aicoder2009 · Pull Request #204 · aicoder2009/opencitation

aicoder2009 · 2026-07-01T11:23:39Z

What:
Added descriptive aria-label attributes to the various text-based action buttons in the SortableCitation component. This includes buttons like "[edit]", "[delete]", "[copy]", "[+ add notes]", and "[clear]".

Why:
The application uses very terse, generic text for its inline buttons (like "[edit]" and "[delete]"). Without visual context, screen reader users hear these buttons without knowing what they apply to, especially since there are multiple "edit" or "add" buttons within a single citation view for different fields (notes, quotes, tags, etc.).

Before/After:

Before: Screen readers would announce generic labels like "button, edit" or "button, clear" repeatedly for different areas of the same citation.
After: Screen readers now announce specific contextual labels such as "button, Edit citation", "button, Edit notes", and "button, Clear notes", vastly improving navigability for users who rely on assistive technology.

Accessibility:
This PR directly addresses the accessibility pattern of ambiguous action buttons by providing explicitly scoped aria-labels for the generic visual text buttons, satisfying WCAG criteria for link and button purpose context.

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

Summary by CodeRabbit

Accessibility
- Improved button labels across citation actions to make controls clearer for screen reader users.
- Updated labels for copy, edit, share, delete, notes, quote, and tag-related actions.
- No visible behavior changes to existing features.

Adds descriptive `aria-label` attributes to the inline action buttons within the `SortableCitation` component (e.g., "[edit]", "[delete]", "[clear]") to provide specific context for screen reader users. Co-authored-by: aicoder2009 <127642633+aicoder2009@users.noreply.github.com>

google-labs-jules · 2026-07-01T11:23:40Z

👋 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 · 2026-07-01T11:23:41Z

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

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

coderabbitai · 2026-07-01T11:23:55Z

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: 1d9d918b-b4b9-4b17-a877-f34b9eba79fd

📥 Commits

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

📒 Files selected for processing (1)

src/components/wiki/sortable-citation.tsx

📝 Walkthrough

Walkthrough

This change adds aria-label attributes to interactive buttons in the SortableCitation component, covering copy, in-text copy, edit, share, delete, notes, quote, and tag actions. No state, data handling, or control flow logic is modified.

Changes

Accessibility Labels for Citation Actions

Layer / File(s)	Summary
Copy and header action labels `src/components/wiki/sortable-citation.tsx`	Adds aria-labels to the copy, in-text copy, edit, share, and delete buttons.
Notes action labels `src/components/wiki/sortable-citation.tsx`	Adds aria-labels to edit, clear, and add notes buttons.
Quote action labels `src/components/wiki/sortable-citation.tsx`	Adds aria-labels to remove, add, and edit quote buttons, including quote-index parameterized labels.
Tag action labels `src/components/wiki/sortable-citation.tsx`	Adds aria-labels to add tag, cancel tag, suggested tag, and non-editing add tag buttons.

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

Related PRs: None identified.

Suggested labels: accessibility, frontend

Suggested reviewers: None identified.

_{🐰 Thirteen little labels, hopping into place,}
_{Each button now whispers its name and its grace,}
_{No logic disturbed, just words for the ear,}
_{Screen readers rejoice—the citations are clear!}

🚥 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 matches the main change: adding contextual ARIA labels to citation action buttons for accessibility.
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-citation-5468680632158276255

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

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

Copilot

Pull request overview

This PR improves the accessibility of SortableCitation by adding contextual aria-label attributes to otherwise terse, bracket-style action buttons so screen readers can announce clearer button purposes within a citation.

Changes:

Added descriptive aria-label values to citation-level actions (copy, copy in-text, edit, share, delete).
Added contextual aria-label values to notes and quotes actions (edit/clear/add notes, remove/add/edit quotes).
Added contextual aria-label values to tag actions (add/cancel/add suggested tags).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

                <button
                  onClick={() => onShare(citation.id)}
                  className="text-wiki-link text-sm hover:underline focus-visible:outline-dotted focus-visible:outline-1 focus-visible:outline-wiki-text"
+                aria-label="Share citation"
                >


Copilot AI review requested due to automatic review settings July 1, 2026 11:23

Copilot started reviewing on behalf of aicoder2009 July 1, 2026 11:24 View session

vercel Bot deployed to Preview July 1, 2026 11:24 View deployment

Copilot AI reviewed Jul 1, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🎨 Palette: Add contextual ARIA labels to citation action buttons#204

🎨 Palette: Add contextual ARIA labels to citation action buttons#204
aicoder2009 wants to merge 1 commit into
mainfrom
palette-aria-labels-citation-5468680632158276255

aicoder2009 commented Jul 1, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

google-labs-jules Bot commented Jul 1, 2026

Uh oh!

vercel Bot commented Jul 1, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 1, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

aicoder2009 commented Jul 1, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

google-labs-jules Bot commented Jul 1, 2026

Uh oh!

vercel Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

aicoder2009 commented Jul 1, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Jul 1, 2026 •

edited

Loading

coderabbitai Bot commented Jul 1, 2026 •

edited

Loading