[codex] Polish landing page design#661
Conversation
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ 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 (2)
📝 WalkthroughWalkthroughThis PR updates Tailwind classes and layout across many site components and pages: blog cards/listing, hero and features bar, feature tiles, blog post pages, plugin directory/detail pages, shared copy, and small service reordering. No functional APIs or exported typings changed. ChangesWebsite Design System Refresh
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
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)
Comment |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/web/src/pages/plugins.astro (1)
278-287:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAdd
aria-hiddento decorative stat SVGs.The npm/star glyphs next to numeric text are decorative and should be hidden from screen readers.
♿ Suggested patch
-<svg class="mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> +<svg aria-hidden="true" class="mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> @@ -<svg class="mr-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20"> +<svg aria-hidden="true" class="mr-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20">As per coding guidelines, "Decorative SVGs must have
aria-hidden=\"true\"."🤖 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 `@apps/web/src/pages/plugins.astro` around lines 278 - 287, The two decorative SVG icons next to numeric stats (the npm/downloads glyph rendered alongside {formatCount(item.npmDownloads)}/w and the star SVG below it) are missing aria-hidden and should be hidden from screen readers; update the SVG elements in the plugins.astro snippet (the SVG with class "mr-1 h-4 w-4" and the following star SVG with class "mr-1 h-4 w-4") to include aria-hidden="true" (and optionally role="img" if not needed remove it) so they are treated as decorative by assistive tech.apps/web/src/pages/app_mobile.astro (1)
86-180:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winMark feature-card SVG icons as decorative.
In this updated grid, the card icons are decorative and should include
aria-hidden="true"(and optionallyfocusable="false") to avoid noisy screen-reader output.As per coding guidelines, "Decorative SVGs must have
aria-hidden=\"true\"."🤖 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 `@apps/web/src/pages/app_mobile.astro` around lines 86 - 180, The SVG icons inside each feature card (the inline <svg> elements used in the cards for test_releases_instantly, manage_channels, deploy_with_confidence, real_time_statistics, team_collaboration, instant_rollback, etc.) are decorative; update each <svg> to include aria-hidden="true" (and add focusable="false" for IE/Edge compatibility) so screen readers ignore them and they no longer produce noisy output.
🤖 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.
Outside diff comments:
In `@apps/web/src/pages/app_mobile.astro`:
- Around line 86-180: The SVG icons inside each feature card (the inline <svg>
elements used in the cards for test_releases_instantly, manage_channels,
deploy_with_confidence, real_time_statistics, team_collaboration,
instant_rollback, etc.) are decorative; update each <svg> to include
aria-hidden="true" (and add focusable="false" for IE/Edge compatibility) so
screen readers ignore them and they no longer produce noisy output.
In `@apps/web/src/pages/plugins.astro`:
- Around line 278-287: The two decorative SVG icons next to numeric stats (the
npm/downloads glyph rendered alongside {formatCount(item.npmDownloads)}/w and
the star SVG below it) are missing aria-hidden and should be hidden from screen
readers; update the SVG elements in the plugins.astro snippet (the SVG with
class "mr-1 h-4 w-4" and the following star SVG with class "mr-1 h-4 w-4") to
include aria-hidden="true" (and optionally role="img" if not needed remove it)
so they are treated as decorative by assistive tech.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 991cb477-9411-402c-8916-d7a43af731ff
⛔ Files ignored due to path filters (1)
.github/pr-screenshots/landing-design-polish.pngis excluded by!**/*.png
📒 Files selected for processing (8)
apps/web/src/components/Blog.astroapps/web/src/components/BlogListing.astroapps/web/src/components/Hero.astroapps/web/src/pages/app_mobile.astroapps/web/src/pages/blog/[slug].astroapps/web/src/pages/plugins.astroapps/web/src/pages/plugins/[slug].astroapps/web/src/services/pluginDocs.ts
|
Addressed CodeRabbit outside-diff accessibility comments in 02ebad2 by marking the decorative SVG icons as hidden from assistive tech. CI is green after the update. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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.
Inline comments:
In `@apps/web/src/components/BlogListing.astro`:
- Around line 35-46: The filter pill links ("All" anchor using
getRelativeLocaleUrl and the mapped anchors inside uniqueTags that use slugify)
currently only define hover styles; add explicit keyboard focus styles (e.g.,
focus-visible:outline-none + focus-visible:ring-2 and
focus-visible:ring-offset-2 with a clear contrast color or focus-visible:border
color) to both the standalone "All" <a> and the mapped tag <a> so keyboard users
get a visible focus ring; update the class attribute on those anchors to include
these focus-visible utility classes so the focus state matches the hover
affordance and meets the "Focus states must be visible" guideline.
🪄 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: b3d73a0c-ad2c-48ca-a044-5cc20d401bb6
⛔ Files ignored due to path filters (1)
.github/pr-screenshots/landing-design-polish.pngis excluded by!**/*.png
📒 Files selected for processing (8)
apps/shared/copy/messages.tsapps/web/src/components/BlogListing.astroapps/web/src/components/Hero.astroapps/web/src/components/ProblemSolution.astroapps/web/src/config/app.tsapps/web/src/pages/app_mobile.astroapps/web/src/pages/blog/[slug].astroapps/web/src/pages/plugins.astro
✅ Files skipped from review due to trivial changes (4)
- apps/shared/copy/messages.ts
- apps/web/src/pages/blog/[slug].astro
- apps/web/src/components/ProblemSolution.astro
- apps/web/src/pages/app_mobile.astro
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/src/pages/plugins.astro
…polish # Conflicts: # apps/shared/copy/messages.ts
1 participant
Summary
Screenshot
Validation
bunx prettier --write apps/web/src/components/Hero.astro apps/web/src/components/Blog.astro apps/web/src/components/BlogListing.astro 'apps/web/src/pages/blog/[slug].astro' apps/web/src/pages/plugins.astro 'apps/web/src/pages/plugins/[slug].astro' apps/web/src/pages/app_mobile.astro apps/web/src/services/pluginDocs.tsbun run check/,/app_mobile/,/plugins/,/plugins/capacitor-updater/, and/blog/at mobile and desktop widths; no horizontal overflow.Summary by CodeRabbit