feat: refactor see more links#157
Conversation
- creating a unified component so we don't have to replicate styling
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 43 minutes and 54 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughThis PR introduces a reusable ChangesSeeMoreLink Component Extraction and Integration
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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: 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/routes/company`.$id.$slug.tsx:
- Around line 434-442: The GOV.UK SeeMoreLink is missing an explicit accessible
name; update the SeeMoreLink invocation (the component named SeeMoreLink where
flagState.govukBranded and GovUkLogo are used, referencing
profile.company_number) to include an ariaLabel prop (e.g. "View company details
on GOV.UK") so the link has a descriptive accessible name regardless of
flagState.govukBranded or the SVG internals.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 065b98bf-c89b-4633-a4e6-d2d71ad61f5d
📒 Files selected for processing (2)
apps/web/src/components/SeeMoreLink.tsxapps/web/src/routes/company.$id.$slug.tsx
| <SeeMoreLink | ||
| href={`https://find-and-update.company-information.service.gov.uk/company/${profile.company_number}`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="glass inline-flex w-fit items-center gap-2 rounded-full px-5 py-2.5 text-sm font-medium text-black no-underline transition-[box-shadow]! duration-300! dark:text-white" | ||
| > | ||
| {flagState.govukBranded ? ( | ||
| <GovUkLogo className="h-5 w-auto" /> | ||
| ) : ( | ||
| 'GOV.UK' | ||
| )} | ||
| <ExternalLink size={14} aria-hidden="true" /> | ||
| </a> | ||
| logo={ | ||
| flagState.govukBranded ? ( | ||
| <GovUkLogo className="h-5 w-auto" /> | ||
| ) : undefined | ||
| } | ||
| label={flagState.govukBranded ? undefined : 'GOV.UK'} | ||
| /> |
There was a problem hiding this comment.
Add ariaLabel for consistency and accessibility.
The GOV.UK link omits the ariaLabel prop while the Google and LinkedIn links below include descriptive aria labels. When flagState.govukBranded is true and only the logo is displayed, the link's accessible name relies entirely on the SVG's internal accessibility attributes.
For consistency and to ensure a clear, descriptive accessible name regardless of the branding flag state, provide an explicit ariaLabel such as "View company details on GOV.UK".
♿ Suggested fix
<SeeMoreLink
href={`https://find-and-update.company-information.service.gov.uk/company/${profile.company_number}`}
logo={
flagState.govukBranded ? (
<GovUkLogo className="h-5 w-auto" />
) : undefined
}
label={flagState.govukBranded ? undefined : 'GOV.UK'}
+ ariaLabel="View company details on GOV.UK"
/>🤖 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/routes/company`.$id.$slug.tsx around lines 434 - 442, The GOV.UK
SeeMoreLink is missing an explicit accessible name; update the SeeMoreLink
invocation (the component named SeeMoreLink where flagState.govukBranded and
GovUkLogo are used, referencing profile.company_number) to include an ariaLabel
prop (e.g. "View company details on GOV.UK") so the link has a descriptive
accessible name regardless of flagState.govukBranded or the SVG internals.
- Yes privacy related search gives users options
1 participant
Summary by CodeRabbit
New Features
Improvements