fix: add aria-label to Newsletter input and nav links for FAQ/Testimonials#198
fix: add aria-label to Newsletter input and nav links for FAQ/Testimonials#198shazzar00ni wants to merge 2 commits into
Conversation
…nials - Add aria-label='Email' to Newsletter input for E2E test identification - Add FAQ and Testimonials to NAV_LINKS for navigation - Add aria-label prop to Input component
![infinitcode-ai[bot]](https://avatars.githubusercontent.com/in/1117690?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary
This pull request adds an aria-label prop to the Input component and uses it in the Newsletter component, improving accessibility. It also adds two new navigation links ('FAQ' and 'Testimonials') to the content data. The changes are minimal, well-structured, and introduce no apparent bugs or security issues.
Review Verdict: ✅ Review Passed
The changes are straightforward, enhance accessibility, and extend navigation without breaking existing functionality. No critical issues detected.
Changes
| File Path | Changes Detected |
|---|---|
src/components/Newsletter.tsx |
• Added aria-label="Email" to the email input for better accessibility. |
src/components/ui/Input.tsx |
• Added optional 'aria-label' prop to the InputProps interface.• Destructured 'aria-label': ariaLabel from props and passed it to the underlying <input> element. |
src/data/content.ts |
• Added 'FAQ' and 'Testimonials' navigation links to the NAV_LINKS array. |
Code Style & Consistency
All identifiers follow project casing conventions.
Hot Take
"Adding aria-label is like putting a seatbelt on a tricycle—technically correct but maybe overkill for a newsletter signup. And those new nav links? Bold move adding 'FAQ' and 'Testimonials' without any actual content to back them up—hope you're ready for some 404 adventures."
Example Commands:
@infinitcodeai review Trigger an instant AI PR review.
@infinitcodeai {prompt} Ask anything about your codebase.
Note: For additional settings, navigate to Infinitcode AI.
About
Automated review powered by Infinitcode AI
Report generated at 5/6/2026, 12:45:57 AM
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
To continue reviewing without waiting, purchase usage credits 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: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (5)
WalkthroughAdds optional aria-label accessibility prop to the Input component and applies it to the Newsletter email field. Also expands site navigation with FAQ and Testimonials links. ChangesEmail Input Accessibility
Site Navigation Expansion
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 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 |
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 0 |
| Duplication | 0 |
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
There was a problem hiding this comment.
Pull request overview
Improves landing-page accessibility and navigation by enabling aria-label support on the shared Input component, using it on the newsletter email field (to support label-based E2E selection), and adding missing section anchors to the main navigation.
Changes:
- Added
aria-labelsupport to the sharedInputcomponent. - Labeled the Newsletter email input with
aria-label="Email". - Added
FAQandTestimonialslinks toNAV_LINKS.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/data/content.ts | Adds FAQ/Testimonials anchors to the global nav link list. |
| src/components/ui/Input.tsx | Extends the Input API to accept and forward aria-label. |
| src/components/Newsletter.tsx | Applies aria-label to the newsletter email input for accessibility/E2E selection. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![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 `@src/components/Newsletter.tsx`:
- Line 108: The Newsletter component currently hardcodes aria-label="Email";
replace that literal with the centralized copy constant (e.g.,
NEWSLETTER_COPY.ariaLabel) by importing NEWSLETTER_COPY from src/data/content.ts
and using it for the input's aria-label prop (look for the input element in the
Newsletter component). Add the import statement for NEWSLETTER_COPY (or extend
an existing import from src/data/content.ts) and ensure the aria-label prop uses
NEWSLETTER_COPY.ariaLabel so all text is sourced from the content module.
🪄 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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 9b37c115-c47d-4448-b046-1801ba33bf00
📒 Files selected for processing (3)
src/components/Newsletter.tsxsrc/components/ui/Input.tsxsrc/data/content.ts
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Agent
- GitHub Check: Codacy Static Code Analysis
- GitHub Check: Codacy Security Scan
🧰 Additional context used
📓 Path-based instructions (4)
src/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx,js,jsx}: Use absolute imports fromsrc/directory (configured intsconfig.json)
Organize imports in this order: React → external dependencies → internal components/utils
Use camelCase for variable and function names (e.g.,handleSubmit,isLoading)
Use SCREAMING_SNAKE_CASE for constants (e.g.,SITE_CONFIG)
Handle runtime errors properly — avoid emptycatchblocks; always log the error or re-throw to preserve stack traces
Files:
src/data/content.tssrc/components/Newsletter.tsxsrc/components/ui/Input.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx}: Noanytypes - use explicit types orunknownwith type guards
Useinterfacefor object types,typefor unions/primitives
Use descriptive generic names (T,K,V) or descriptive names (Item,Key) for generics
Files:
src/data/content.tssrc/components/Newsletter.tsxsrc/components/ui/Input.tsx
src/data/content.ts
📄 CodeRabbit inference engine (AGENTS.md)
src/data/content.ts: Use developer-focused tone: confident, technical, no marketing fluff
Avoid lorem ipsum; use realistic placeholder text
Use 'you/your' for direct address in copy
Files:
src/data/content.ts
src/components/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
src/components/**/*.tsx: Use named exports only for components; no default exports
Use PascalCase for component files and component names (e.g.,HeroSection,PricingCard)
Use meaningful CSS class names, avoid abbreviations
Use design system colors fromtailwind.config.js(e.g.,text-dark-100,bg-teal-600)
Dark mode first: The app defaults to dark mode. Usedark:prefix to activate styles when dark mode is active.
Avoid arbitrary Tailwind values ([...]); extend theme instead
Use semantic Tailwind color names:text-dark-300for secondary text,text-teal-400for accents
Use consistent spacing scale:4,6,8,12,16
Use responsive Tailwind prefixes:sm:,md:,lg:for responsive breakpoints
Use Framer Motion for entrance animations only (fade-in, slide-up); keep duration at0.5sfor most,0.6sfor complex animations
When using Framer Motion, stagger children withdelay: index * 0.1
Use inline form validation or simple state for form validation; do not use external validation libraries
Display user-friendly messages for network errors
Place all text copy and site configuration insrc/data/content.ts; never hardcode text in components
Use mobile-first responsive design approach
UseReact.memo()for expensive components
Optimize images with WebP/AVIF formats
Files:
src/components/Newsletter.tsxsrc/components/ui/Input.tsx
🔇 Additional comments (2)
src/components/ui/Input.tsx (1)
9-10: Accessibility prop plumbing is correctly implemented.
aria-labelis properly added toInputProps, destructured safely, and forwarded to the native input element.Also applies to: 47-48, 58-60
src/data/content.ts (1)
13-14: NAV_LINKS update looks good.Adding
FAQandTestimonialshere keeps navigation content centralized and consistent with the data-driven content pattern.
- Add NEWSLETTER_COPY.ariaLabel to content.ts for centralized copy - Use NEWSLETTER_COPY.ariaLabel in Newsletter component - Add unit tests for aria-label prop forwarding
|
Summary
aria-label="Email"to Newsletter input for E2E test identificationNAV_LINKSfor navigationaria-labelprop to Input componentChanges
src/components/ui/Input.tsx: Add aria-label prop supportsrc/components/Newsletter.tsx: Add aria-label to email inputsrc/data/content.ts: Add FAQ and Testimonials to nav linksTesting
npm run e2eRelated