🎨 Palette: Add contextual ARIA labels to inline bracket buttons#196
🎨 Palette: Add contextual ARIA labels to inline bracket buttons#196aicoder2009 wants to merge 1 commit into
Conversation
Added contextual `aria-label` attributes to repeated, generic inline bracket-style action buttons (e.g., `[edit]`, `[delete]`, `[remove]`, `[cancel]`) within lists to improve screen reader accessibility. Also updated the Palette journal with this UX learning. Co-authored-by: aicoder2009 <127642633+aicoder2009@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
👋 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 New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
📝 WalkthroughWalkthroughAdds ChangesAccessibility aria-label additions
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/components/wiki/sortable-citation.tsx (2)
523-523: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueQuote removal label uses index only — consider adding citation title for consistency.
The remove quote button uses
Remove quote ${i + 1}, which provides some context via index. However, every other contextual label in this component also includes the citation title (e.g.,Edit quotes for ${citation.fields?.title || 'citation'}). For consistency with the established pattern and fuller context when navigating by button, consider:- aria-label={`Remove quote ${i + 1}`} + aria-label={`Remove quote ${i + 1} from ${citation.fields?.title || 'citation'}`}🤖 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` at line 523, The remove-quote button label in sortable-citation should be updated for consistency with the other contextual labels in this component. In the remove button’s aria-label, include the citation title from citation.fields?.title with the existing quote index so it matches the pattern used by labels like “Edit quotes for ...” and gives better context when navigating by button.
648-648: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueStatic "Add tag" label lacks citation context compared to other dynamic labels.
This
[add]button sits inside the inline tag-editing UI for a specific citation. While "Add tag" is descriptive, it omits the citation title that every other action in this component includes. For consistency with the pattern established throughoutSortableCitation(and per the palette guidance to incorporate "the relevant entity's name or title"), consider:- aria-label="Add tag" + aria-label={`Add tag to ${citation.fields?.title || 'citation'}`}🤖 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` at line 648, The aria-label on the add-tag control in SortableCitation is static and missing the citation context used by the rest of the component. Update the inline tag-editing button’s label so it includes the current citation’s title/name, matching the dynamic naming pattern already used by other actions in SortableCitation and making the label specific to the entity being edited.
🤖 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`:
- Line 523: The remove-quote button label in sortable-citation should be updated
for consistency with the other contextual labels in this component. In the
remove button’s aria-label, include the citation title from
citation.fields?.title with the existing quote index so it matches the pattern
used by labels like “Edit quotes for ...” and gives better context when
navigating by button.
- Line 648: The aria-label on the add-tag control in SortableCitation is static
and missing the citation context used by the rest of the component. Update the
inline tag-editing button’s label so it includes the current citation’s
title/name, matching the dynamic naming pattern already used by other actions in
SortableCitation and making the label specific to the entity being edited.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 163fe8ba-356e-4032-9c55-22728f5b1c24
📒 Files selected for processing (3)
.jules/palette.mdsrc/components/wiki/share-dialog.tsxsrc/components/wiki/sortable-citation.tsx
1 participant
💡 What
Added context-aware
aria-labelattributes to the generic, bracket-style inline action buttons (like[edit],[share],[delete],[remove],[cancel],[+ add...]) in theSortableCitationandShareDialogcomponents.🎯 Why
These components use Wikipedia-style bracketed text links for actions. When these are repeated in a list of items (e.g., a long list of citations), screen readers only read the generic text like "edit" or "delete." This leaves users without visual context unable to determine which item is being edited or deleted. By adding dynamic ARIA labels (e.g.,
Edit citation Introduction to Algorithms), screen reader users now have full context.📸 Before/After
No visual changes. This is an invisible accessibility improvement.
♿ Accessibility
aria-label={\Edit citation ${citation.title}`}` to generic action buttons within citation lists.aria-label="Cancel sharing") to generic[cancel]buttons in modals.PR created automatically by Jules for task 8311857828005278687 started by @aicoder2009
Summary by CodeRabbit
New Features
Bug Fixes