Refactor Hero component and enhance accessibility features#32
Merged
Refactor Hero component and enhance accessibility features#32
Conversation
Replace fixed responsive text sizes with a fluid clamp-based `text-hero` token, and swap `<br>` line breaks for `block` spans with `text-balance` for better reflow.
Moves motion animation props and shouldHighlight state from AboutTab/RecruiterTab into the parent TabsPanel render prop, enabling layout-aware animations at the panel level.
Introduces an orange-tinted select color token for light and dark themes and applies it as a fixed radial gradient on the body background.
Uses Base UI's useRender hook to allow Button to render as any element (e.g. Link, anchor) when nativeButton is false, enabling semantic rendering for navigation use cases.
Use dl/dt/dd for experience list, nav for socials, h2 for section headings, and aria-hidden on decorative separators and icons.
📝 WalkthroughWalkthroughRefactors tab animation ownership in Description, adds parent-level highlight state, extends Button API for custom rendering, swaps semantic HTML elements and accessibility attributes, adjusts Hero heading markup and root background, updates ESLint to import oxlint config object, and adds theme tokens for hero text and select color. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 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 `@src/components/description.tsx`:
- Around line 60-70: The inline ref cleanup that resets shouldHighlight is
causing the highlight to be cleared on every rerender; remove the ref callback
block that returns a cleanup and instead reset shouldHighlight inside the tab
change handler (onValueChange). Specifically: delete the ref={() => { return ()
=> { setShouldHighlight(false); }; }} callback, ensure onAnimationComplete still
calls setShouldHighlight(true) only when the active tab equals RECRUITER, and
add a call to setShouldHighlight(false) in the onValueChange handler (or the
function that updates tab state) so the highlight is reset when the tab actually
changes.
🪄 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: 05bd9760-7f2d-43f7-946b-f84064369cb0
📒 Files selected for processing (10)
eslint.config.tssrc/components/description.tsxsrc/components/experience.tsxsrc/components/hero.tsxsrc/components/socials.tsxsrc/components/ui/button.tsxsrc/components/ui/tabs.tsxsrc/routes/__root.tsxsrc/routes/index.tsxsrc/styles/globals.css
Move setShouldHighlight(false) to the tab change handler where it belongs, removing the fragile ref callback cleanup pattern.
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/components/description.tsx (1)
57-63:⚠️ Potential issue | 🟡 MinorGate the recruiter highlight trigger to the active tab.
Line 62 is still unconditional. If this wrapper finishes animating while
ABOUTis selected,shouldHighlightflips back totrueand the resume highlight can re-enable out of sequence.Suggested fix
<motion.div layout initial={{ opacity: 0.25, filter: "blur(4px)" }} animate={{ opacity: 1, filter: "blur(0px)" }} onAnimationComplete={() => { - setShouldHighlight(true); + if (tab === RECRUITER) { + setShouldHighlight(true); + } }} />For `@base-ui-components/react` Tabs, are inactive `Tabs.Panel` elements mounted by default, and for `motion/react` does `onAnimationComplete` fire for initial/layout animations on mount? I want to verify whether an inactive tab panel can still call `onAnimationComplete`.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/description.tsx` around lines 57 - 63, The motion.div's onAnimationComplete unconditionally calls setShouldHighlight(true), which can re-enable the resume highlight even when the ABOUT tab is not active; update the handler to guard by the active tab state/prop (e.g., check activeTab or currentTab) and only call setShouldHighlight(true) when the active tab equals the ABOUT tab constant (e.g., "ABOUT" or Tabs.ABOUT). Locate the motion.div wrapper and modify its onAnimationComplete to first test the active-panel flag (or selected tab variable) and return early if the panel is not active so the highlight only triggers for the visible ABOUT panel.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/components/description.tsx`:
- Around line 57-63: The motion.div's onAnimationComplete unconditionally calls
setShouldHighlight(true), which can re-enable the resume highlight even when the
ABOUT tab is not active; update the handler to guard by the active tab
state/prop (e.g., check activeTab or currentTab) and only call
setShouldHighlight(true) when the active tab equals the ABOUT tab constant
(e.g., "ABOUT" or Tabs.ABOUT). Locate the motion.div wrapper and modify its
onAnimationComplete to first test the active-panel flag (or selected tab
variable) and return early if the panel is not active so the highlight only
triggers for the visible ABOUT panel.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 761a624b-ec49-4e69-bf9e-9ebda097edd7
📒 Files selected for processing (1)
src/components/description.tsx
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
1 participant
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.
Summary by CodeRabbit
New Features
Style
Accessibility