🎨 Palette: [UX improvement] Add missing aria-labels to icon buttons#252
🎨 Palette: [UX improvement] Add missing aria-labels to icon buttons#252ldsgroups225 wants to merge 1 commit intomasterfrom
Conversation
|
👋 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. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📝 WalkthroughWalkthroughThis PR adds localized Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.jules/palette.md:
- Line 14: Update the punctuation in the sentence that lists examples so "etc"
becomes "etc." (add the period); locate the line containing "t.common.actions(),
`t.common.edit(), etc" in .jules/palette.md and change the trailing "etc" token
to "etc." to conform to American English punctuation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: ac519583-9e62-4f34-8875-1272aa203d3f
📒 Files selected for processing (4)
.jules/palette.mdapps/core/src/routes/_auth/app/catalogs/grades/grades-section.tsxapps/core/src/routes/_auth/app/catalogs/grades/series-section.tsxapps/school/src/routes/_auth/settings/report-cards.tsx
| **Action:** Whenever implementing a toggleable component, always apply the trifecta of ARIA attributes: `aria-expanded` (linked to state), `aria-controls` (linked to the content's `id`), and a dynamic `aria-label` that clarifies the action (e.g., "Toggle details for [Name]"). | ||
| ## 2025-02-24 - Missing ARIA labels on IconButtons | ||
| **Learning:** Found that `<Button size="icon">` in some older files or specific routes lack `aria-label` which creates accessibility problems for screen readers since there's no text content. | ||
| **Action:** Always add descriptive `aria-label` based on translation keys (`t.common.actions()`, `t.common.edit()`, etc) to any button that only contains an icon. |
There was a problem hiding this comment.
Fix punctuation for “etc.”
Line 14 should use etc. (with a period) for correct American English punctuation.
🧰 Tools
🪛 LanguageTool
[style] ~14-~14: In American English, abbreviations like “etc.” require a period.
Context: ...t.common.actions(), t.common.edit()`, etc) to any button that only contains an ic...
(ETC_PERIOD)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.jules/palette.md at line 14, Update the punctuation in the sentence that
lists examples so "etc" becomes "etc." (add the period); locate the line
containing "t.common.actions(), `t.common.edit(), etc" in .jules/palette.md and
change the trailing "etc" token to "etc." to conform to American English
punctuation.
1 participant
What
Added
aria-labelattributes to multiple<Button size="icon">components inapps/schoolandapps/core. Also added a journal entry about verifying text content for icon-only buttons.Why
These buttons previously lacked accessible text since they only contained SVG icons.
Before/After
Before:
<Button size="icon"><IconEdit /></Button>After:
<Button size="icon" aria-label="Modifier"><IconEdit /></Button>Accessibility
Screen readers can now correctly announce the purpose of these icon-only buttons ('Actions', 'Modifier', 'Supprimer').
PR created automatically by Jules for task 16124742342104865395 started by @ldsgroups225
Summary by CodeRabbit