Add a dedicated Frequently Asked Questions (FAQ) page#389
Conversation
|
@ArshiBansal is attempting to deploy a commit to the Darshan Rajput's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughA new client-side Next.js page ( ChangesFAQ Page and Footer Link
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 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 Warning |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cdcd80730d
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| <li> | ||
| <Link | ||
| href="/faq" | ||
| href="/faqs" |
There was a problem hiding this comment.
This footer link now sends users to /faqs, but the existing /faq page remains and the other in-app FAQ entry points still target it (app/page.tsx:380, app/contact/page.tsx:134, and app/not-found.tsx:73). As a result, users see different FAQ content depending on where they click, and updates made in the new page are missed from the main support/contact flows; either reuse the existing route or update the remaining links together.
Useful? React with 👍 / 👎.
| {/* Search Bar */} | ||
| <div className="mb-12"> | ||
| <div className="relative max-w-xl mx-auto"> | ||
| <input |
There was a problem hiding this comment.
On the new /faqs page, the search field has only placeholder text and no associated <label>, aria-label, or aria-labelledby. Screen-reader users navigating the form control may not get a stable name for what this input does, especially after typing replaces the placeholder; add an accessible label as the existing /faq search field does.
Useful? React with 👍 / 👎.
![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
🤖 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 `@app/faqs/page.tsx`:
- Around line 106-109: The markdown-style link syntax [here](/privacy) in the
answer string of the FAQ item will render as plain text rather than a clickable
link since React doesn't parse markdown in text nodes. Replace the markdown link
syntax with an actual React Link component or HTML anchor tag to create a
functional hyperlink to the privacy page. Apply this same fix to all other FAQ
items with similar markdown-style links (note that the same pattern appears in
multiple FAQ entries as indicated by the "Also applies to" comment).
- Around line 170-176: The search input element lacks proper accessibility
labeling and the accordion trigger/panel pairs are missing ARIA associations.
Add an explicit label element with htmlFor attribute or an aria-label to the
search input for screen readers. For each accordion trigger element in the
mapped list items (found in the sections around lines 215-219 and 249-257), add
an aria-controls attribute that references a unique id, and add that matching id
to the corresponding accordion panel/content element to establish proper ARIA
control relationships between triggers and panels.
🪄 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 Plus
Run ID: eaa1e96a-0d09-4a92-b086-c8e8ce80da22
📒 Files selected for processing (2)
app/components/Footer.tsxapp/faqs/page.tsx
| question: "What is your privacy policy?", | ||
| answer: | ||
| "You can read our full Privacy Policy [here](/privacy). We comply with GDPR and other major data protection regulations.", | ||
| }, |
There was a problem hiding this comment.
Markdown-style link text will render as plain text, not a clickable link.
[here](/privacy) in a string is shown literally in React text nodes, so users can’t click through to the policy from this FAQ item.
Suggested fix
interface FAQItem {
question: string;
- answer: string;
+ answer: React.ReactNode;
category: string;
}
// ...
{
category: "Privacy & Security",
question: "What is your privacy policy?",
- answer:
- "You can read our full Privacy Policy [here](/privacy). We comply with GDPR and other major data protection regulations.",
+ answer: (
+ <>
+ You can read our full Privacy Policy{" "}
+ <Link href="/privacy" className="text-sky-600 dark:text-sky-400 underline">
+ here
+ </Link>
+ . We comply with GDPR and other major data protection regulations.
+ </>
+ ),
},
// render remains valid:
<div className="px-8 pb-8 text-gray-600 dark:text-gray-400 leading-relaxed border-t border-gray-100 dark:border-gray-700 pt-6">
{faq.answer}
</div>Also applies to: 256-258
🤖 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 `@app/faqs/page.tsx` around lines 106 - 109, The markdown-style link syntax
[here](/privacy) in the answer string of the FAQ item will render as plain text
rather than a clickable link since React doesn't parse markdown in text nodes.
Replace the markdown link syntax with an actual React Link component or HTML
anchor tag to create a functional hyperlink to the privacy page. Apply this same
fix to all other FAQ items with similar markdown-style links (note that the same
pattern appears in multiple FAQ entries as indicated by the "Also applies to"
comment).
| <input | ||
| type="text" | ||
| placeholder="Search FAQs..." | ||
| value={searchTerm} | ||
| onChange={(e) => setSearchTerm(e.target.value)} | ||
| className="w-full px-6 py-4 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-sky-500 text-lg" | ||
| /> |
There was a problem hiding this comment.
Improve search + accordion ARIA wiring for screen-reader navigation.
The search input lacks an explicit label, and each accordion trigger/panel pair is missing aria-controls ↔ id association.
Suggested fix
-<input
- type="text"
+<label htmlFor="faq-search" className="sr-only">
+ Search frequently asked questions
+</label>
+<input
+ id="faq-search"
+ type="search"
placeholder="Search FAQs..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full px-6 py-4 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-sky-500 text-lg"
/>
{items.map((faq, idx) => {
const globalIndex = faqs.findIndex((f) => f.question === faq.question);
+ const panelId = `faq-panel-${globalIndex}`;
+ const buttonId = `faq-button-${globalIndex}`;
return (
<motion.div ...>
<button
+ id={buttonId}
onClick={() => toggleFAQ(globalIndex)}
className="w-full px-8 py-6 text-left flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all group"
aria-expanded={openIndex === globalIndex}
+ aria-controls={panelId}
>
...
</button>
<AnimatePresence>
{openIndex === globalIndex && (
<motion.div
+ id={panelId}
+ role="region"
+ aria-labelledby={buttonId}
initial={{ height: 0, opacity: 0 }}
animate={{ height: "auto", opacity: 1 }}
exit={{ height: 0, opacity: 0 }}Also applies to: 215-219, 249-257
🤖 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 `@app/faqs/page.tsx` around lines 170 - 176, The search input element lacks
proper accessibility labeling and the accordion trigger/panel pairs are missing
ARIA associations. Add an explicit label element with htmlFor attribute or an
aria-label to the search input for screen readers. For each accordion trigger
element in the mapped list items (found in the sections around lines 215-219 and
249-257), add an aria-controls attribute that references a unique id, and add
that matching id to the corresponding accordion panel/content element to
establish proper ARIA control relationships between triggers and panels.
1 participant
📋 What Does This PR Do?
This PR implements a dedicated FAQ page (
/faq) for the Dev Pocket website as per the issue requirements.Key Changes & Features Added:
app/faq/page.tsx🛠 Tech Stack Used
useState,useMemo)Related Issue
Closes #374
Additional Notes
This dedicated FAQ page improves user experience by providing quick self-service answers, reducing support queries, and helping new users understand the platform faster.
Checklist
Summary by CodeRabbit
New Features
Bug Fixes