fix(frontend): improve Earn page readability#2264
Conversation
Use theme-safe link styling instead of text-primary (unreadable yellow on white in the Alby theme), bolder reward amounts, and trophy/heart icons for non-sat rewards. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Warning Rate limit exceeded
To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughUpdated the AlbyEarn component with a new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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)
frontend/src/screens/alby/AlbyEarn.tsx (1)
83-104: Mark decorative icons asaria-hiddenfor cleaner SR output.
HeartIcon/TrophyIconhere are purely decorative — the adjacentrewardTextalready conveys meaning. lucide-react doesn't setaria-hiddenby default, so screen readers may announce them as generic images/SVGs. Same applies to the•bullet andExternalLinkIconin the platforms list.♻️ Suggested tweak
- <Icon className="size-4" /> + <Icon className="size-4" aria-hidden="true" />- {index > 0 && <span className="mr-2">•</span>} + {index > 0 && ( + <span className="mr-2" aria-hidden="true">•</span> + )} ... - <ExternalLinkIcon className="size-3 ml-1" /> + <ExternalLinkIcon className="size-3 ml-1" aria-hidden="true" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/src/screens/alby/AlbyEarn.tsx` around lines 83 - 104, The HeartIcon and TrophyIcon used in the Reward component (function Reward) are decorative and should be hidden from assistive tech; update their usage to include aria-hidden="true" (and focusable={false} if applicable for the SVG component) so screen readers don't announce them, and similarly mark the bullet character (•) and any ExternalLinkIcon in the platforms list as aria-hidden to avoid redundant announcements; search for Reward, HeartIcon, TrophyIcon and ExternalLinkIcon to locate all occurrences and add the aria-hidden/focusable attributes where these decorative icons/characters are rendered.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/src/screens/alby/AlbyEarn.tsx`:
- Around line 83-104: The HeartIcon and TrophyIcon used in the Reward component
(function Reward) are decorative and should be hidden from assistive tech;
update their usage to include aria-hidden="true" (and focusable={false} if
applicable for the SVG component) so screen readers don't announce them, and
similarly mark the bullet character (•) and any ExternalLinkIcon in the
platforms list as aria-hidden to avoid redundant announcements; search for
Reward, HeartIcon, TrophyIcon and ExternalLinkIcon to locate all occurrences and
add the aria-hidden/focusable attributes where these decorative icons/characters
are rendered.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d1a6adf3-e733-4b70-90e8-97f852005fb5
📒 Files selected for processing (1)
frontend/src/screens/alby/AlbyEarn.tsx
2 participants
Summary
text-primaryon body-text links (unreadable yellow on white in the Alby theme) with theme-safeunderlinestylingTest plan
🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes
New Features
UI/Style