feat: handle navigation fatigue in components card and enhance footer navigation#445
Merged
hari merged 8 commits intocodse:mainfrom Apr 27, 2026
Conversation
…ks to decorative divs
…nced focus/hover states Co-authored-by: Copilot <copilot@github.com>
Moamal-2000
requested a deployment
to
preview-deployment
GitHub Actions
Waiting
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughIntroduces a footer category navigation by adding Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 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.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/(main)/_landing/stats-bento.tsx (1)
3-3:⚠️ Potential issue | 🟡 MinorRemove unused
Linkimport.The
Linkimport fromnext/linkon line 3 is not referenced anywhere in this file and should be removed to keep the bundle clean.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(main)/_landing/stats-bento.tsx at line 3, Remove the unused import "Link" by deleting the import line that reads `import Link from "next/link";` so the module no longer imports the unused symbol Link; update any associated ESLint/TS errors by saving the file containing the stats-bento component (remove the import from the top of stats-bento.tsx).
🧹 Nitpick comments (3)
components/site-footer.tsx (2)
26-26: Redundantaria-label.Screen readers already announce a
<nav>as "navigation";aria-label="Footer Navigation"becomes "Footer Navigation navigation". A shorter label like"Footer"or"Categories"reads better.- <nav aria-label="Footer Navigation" className="mx-auto mt-16 w-full max-w-6xl"> + <nav aria-label="Footer" className="mx-auto mt-16 w-full max-w-6xl">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/site-footer.tsx` at line 26, The nav's aria-label value is redundant; update the <nav> in the SiteFooter component (the nav element rendered in site-footer.tsx) to use a shorter, non-repetitive label such as aria-label="Footer" or aria-label="Categories", or remove the aria-label entirely if the visible heading already provides sufficient context; ensure the change is applied to the nav element that currently has aria-label="Footer Navigation".
13-15: Inline type annotation is redundant.
getFooterCategoriesalready returns{ title: string; href: string }[](or will, once the helper has an explicit return type). The local annotation here just duplicates that.- const footerCategories: { title: string; href: string }[] = getFooterCategories( - docsConfig.sidebarNav, - ); + const footerCategories = getFooterCategories(docsConfig.sidebarNav);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@components/site-footer.tsx` around lines 13 - 15, The variable footerCategories is annotated with a redundant inline type; remove the explicit "{ title: string; href: string }[]" annotation and let TypeScript infer the type from the getFooterCategories(docsConfig.sidebarNav) call (update the declaration of footerCategories accordingly so it simply assigns the result of getFooterCategories).app/(main)/_landing/stats-bento.tsx (1)
243-276: Decorative pills retain hover styling — consider removing.Now that the marquee container is
aria-hidden="true"and the pills are non-interactive<div>s, thetransition-colors hover:border-foreground/30styling is misleading: the cursor is the default arrow but the border still highlights on hover, suggesting interactivity that no longer exists. Consider dropping the hover class for visual honesty.♻️ Proposed cleanup
<div key={`fwd-${i}`} - className="rounded-full border border-border bg-foreground/5 px-2 py-0.5 text-[10px] font-semibold text-foreground transition-colors hover:border-foreground/30 sm:px-2.5 sm:py-1 sm:text-[11px]" + className="rounded-full border border-border bg-foreground/5 px-2 py-0.5 text-[10px] font-semibold text-foreground sm:px-2.5 sm:py-1 sm:text-[11px]" >(apply same change to the reverse marquee at Lines 268–273)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@app/`(main)/_landing/stats-bento.tsx around lines 243 - 276, The decorative pill elements inside the Marquee (the non-interactive divs generated in the categories.map for keys like `fwd-${i}` and the reversed map for `rev-${i}`) still include `transition-colors hover:border-foreground/30`, which implies interactivity even though the container is `aria-hidden="true"`; remove the `hover:border-foreground/30` class from both pill divs (and optionally `transition-colors` if you want to avoid hover transitions entirely) so the pills no longer change border on hover and correctly appear non-interactive.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@components/site-footer.tsx`:
- Around line 32-35: In the className passed to cn in the site-footer component
(the className prop around "text-sm text-muted-foreground" /
"hover:text-foreground focus:text-white px-4 py-2"), remove the hardcoded
focus:text-white and replace it with a theme-aware, accessible focus-visible
ring using the accent token (e.g., use focus-visible:ring-2 and a ring color
based on the accent token like ring-[hsl(var(--accent))] or a provided
ring-accent utility plus an offset), so keyboard focus uses a visible
theme-aware outline rather than white text.
In `@lib/docs.ts`:
- Around line 9-12: The footer mapping currently sets href to a dead-anchor
("#") when a category has no items; update the mapping for the category objects
(the .map((cat) => ({ ... })) call) to mirror the stats-bento logic by using the
first available destination: prefer cat.items?.[0]?.href, then cat.href, then a
safe default like "/docs" (use nullish coalescing instead of || to preserve
empty-string handling).
---
Outside diff comments:
In `@app/`(main)/_landing/stats-bento.tsx:
- Line 3: Remove the unused import "Link" by deleting the import line that reads
`import Link from "next/link";` so the module no longer imports the unused
symbol Link; update any associated ESLint/TS errors by saving the file
containing the stats-bento component (remove the import from the top of
stats-bento.tsx).
---
Nitpick comments:
In `@app/`(main)/_landing/stats-bento.tsx:
- Around line 243-276: The decorative pill elements inside the Marquee (the
non-interactive divs generated in the categories.map for keys like `fwd-${i}`
and the reversed map for `rev-${i}`) still include `transition-colors
hover:border-foreground/30`, which implies interactivity even though the
container is `aria-hidden="true"`; remove the `hover:border-foreground/30` class
from both pill divs (and optionally `transition-colors` if you want to avoid
hover transitions entirely) so the pills no longer change border on hover and
correctly appear non-interactive.
In `@components/site-footer.tsx`:
- Line 26: The nav's aria-label value is redundant; update the <nav> in the
SiteFooter component (the nav element rendered in site-footer.tsx) to use a
shorter, non-repetitive label such as aria-label="Footer" or
aria-label="Categories", or remove the aria-label entirely if the visible
heading already provides sufficient context; ensure the change is applied to the
nav element that currently has aria-label="Footer Navigation".
- Around line 13-15: The variable footerCategories is annotated with a redundant
inline type; remove the explicit "{ title: string; href: string }[]" annotation
and let TypeScript infer the type from the
getFooterCategories(docsConfig.sidebarNav) call (update the declaration of
footerCategories accordingly so it simply assigns the result of
getFooterCategories).
🪄 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: d7bb1ec6-936c-48f4-8363-009fb3670443
📒 Files selected for processing (3)
app/(main)/_landing/stats-bento.tsxcomponents/site-footer.tsxlib/docs.ts
…nced focus/hover states
….com:Moamal-2000/animata into feat/issue-444-improve-navigation-and-footer
Moamal-2000
temporarily deployed
to
preview-deployment
GitHub Actions
Inactive
|
🚀 Preview deployed to: https://fc951665.animata.pages.dev |
Moamal-2000
temporarily deployed
to
preview-deployment
GitHub Actions
Inactive
|
🚀 Preview deployed to: https://46e75d65.animata.pages.dev |
hari
requested changes
Apr 27, 2026
Moamal-2000
requested a deployment
to
preview-deployment
GitHub Actions
Waiting
Contributor
Author
|
@hari I've removed the hover styles from both rows. |
hari
approved these changes
Apr 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR fixes issue #444
This PR improves the overall site structure by introducing a dynamic footer navigation system and refining the accessibility of the component cards.
Changes
divelements. This prevents nested interactive elements (link-within-link) and ensures a cleaner accessibility tree for screen readers.getFooterCategoriesutility to dynamically filter and map documentation categories fromdocsConfig.hoverandfocusstates for footer links to provide better visual feedback and maintain high accessibility standards.Technical Details
lib/docs.tsto centralize navigation logic.Summary by CodeRabbit
New Features
Accessibility