🎨 Palette: [UX improvement] Add context to generic text buttons#191
🎨 Palette: [UX improvement] Add context to generic text buttons#191aicoder2009 wants to merge 1 commit into
Conversation
Added specific aria-labels based on citation titles to generic text buttons (e.g., [edit], [delete], [share]) in the SortableCitation component to provide essential context for screen reader users. Updated the palette journal with this learning. Co-authored-by: aicoder2009 <127642633+aicoder2009@users.noreply.github.com>
|
👋 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. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR adds an accessibility guideline for contextual action labels and updates citation-related buttons to use item-specific ChangesContextual citation action labels
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~4 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 (1)
src/components/wiki/sortable-citation.tsx (1)
355-694: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd contextual
aria-labelto remaining generic text buttons for consistency.The new guideline and this PR correctly label
[edit],[delete],[share],[clear], and[remove]buttons. Several other generic text buttons in the same repeated list context were missed and should also receive item-specific labels for a complete accessible experience:
[copy]/[copy in-text](lines 355–382)[+ add notes](lines 471–480)[+ add quote]/+ add quote(lines 530–537, 591–599)[+ add tag],[add],[cancel](lines 644–694)Consider following the same
`Action ${citation.fields?.title || "this citation"}`pattern so screen reader users hear consistent context across all actions.🤖 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 355 - 694, The remaining generic text buttons in sortable-citation should also get item-specific aria-labels for consistency and accessibility. Update the copy/add/cancel controls in the same citation actions block, notes/quotes sections, and tags editor so their labels include the citation context using the existing citation.fields?.title or “this citation” pattern, matching the already-labeled edit/delete/share/clear/remove buttons. Focus on the button elements for copy, copy in-text, add notes, add quote, add tag, add, and cancel.
🤖 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 355-694: The remaining generic text buttons in sortable-citation
should also get item-specific aria-labels for consistency and accessibility.
Update the copy/add/cancel controls in the same citation actions block,
notes/quotes sections, and tags editor so their labels include the citation
context using the existing citation.fields?.title or “this citation” pattern,
matching the already-labeled edit/delete/share/clear/remove buttons. Focus on
the button elements for copy, copy in-text, add notes, add quote, add tag, add,
and cancel.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: e0521320-27dc-4128-81cc-d91334cae9dd
📒 Files selected for processing (2)
.jules/palette.mdsrc/components/wiki/sortable-citation.tsx
1 participant
💡 What
Added dynamic, contextual
aria-labelattributes to generic visual text buttons like[edit],[delete],[share],[clear], and[remove]within theSortableCitationcomponent.🎯 Why
When components are repeated in a list (like citations), screen readers read generic text like "edit, button" without surrounding visual context. Users using assistive technologies don't know what they are editing or deleting.
📸 Before/After
Before: Screen reader announces: "edit, button", "delete, button", "remove, button".
After: Screen reader announces: "Edit Introduction to Physics, button", "Delete Introduction to Physics, button", "Remove quote 1, button".
♿ Accessibility
This directly improves screen reader navigation by ensuring all interactive elements provide unambiguous, specific context for the action they perform, adhering to WCAG guidelines for link/button purpose.
PR created automatically by Jules for task 13844653177100647895 started by @aicoder2009
Summary by CodeRabbit