feat: add auto-focus on first input field in onboarding modal

[grishabhatia]

🚀 Program

GSSoC

📝 Description

This PR adds auto-focus functionality to the onboarding modal. Previously, users had to manually click into input fields before typing, which created unnecessary friction, especially for keyboard users and those with mobility challenges.

Now, when each onboarding step loads, the first input field automatically receives keyboard focus, allowing users to start typing immediately.

Changes Made:

• Added useRef and useEffect imports in Onboarding.jsx
• Created voiceNameInputRef for Step 1 (voice name input)
• Created step2FirstInputRef and step3FirstInputRef for future steps
• Added useEffect that triggers on activeStep change to set focus
• Attached ref to the voice name input element in Step 1
• Added hidden focusable divs for Step 2 and Step 3 (as they don't have input fields yet)

🔗 Related Issue

Closes #185

🔄 Type of Change

• 🐛 Bug fix
• ✨ New feature
• 🔍 SEO improvement
• 🎨 Style / UI improvement
• ♿ Accessibility improvement
• 📝 Documentation
• ⚙️ CI / configuration
• 🧹 Refactor / cleanup

🧪 How to Test

1. Run npm run dev in the project root
2. Open http://localhost:5173 (or http://localhost:5174) in Chrome or Edge
3. Clear localStorage if you've completed onboarding before:
   • Open DevTools (F12) → Application → Local Storage → Clear
4. Refresh the page to start onboarding
5. Expected result: Cursor automatically appears in the "Voice profile name" input field when Step 1 loads
6. Complete Step 1, go to Step 2 → focus moves to the workspace section
7. Go to Step 3 → focus moves to the pipeline deployment section

✅ Checklist

• I am contributing under GSSoC
• My code follows the project's existing style
• I have tested my changes in a browser (⚠️ partially tested - server issue)
• I have linked the related issue above
• My PR title follows Conventional Commits format (e.g. feat: add voice preview)

---

Summary by cubic

Adds auto-focus to the first field in each onboarding step so users can start typing right away. Improves keyboard flow, accessibility, and focus reliability.

• New Features

  • Auto-focuses the first element on each step change via activeStep.

• Bug Fixes

  • Improves focus reliability using callback refs, a retry-based helper, and a backup effect.
  • Adds screen-reader-only focus targets for Steps 2–3 that become visible on focus until real inputs exist.

^{Written for commit 99cde0a. Summary will update on new commits.}

[vercel]

@grishabhatia is attempting to deploy a commit to the itzzavdhesh's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Warning

Review limit reached

@grishabhatia, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 50 minutes and 17 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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 7b39c75f-7f3f-44d4-8122-da8ee71557c6

📥 Commits

Reviewing files that changed from the base of the PR and between 9f81e02 and 99cde0a.

📒 Files selected for processing (1)

• client/src/pages/Onboarding.jsx

📝 Walkthrough

Walkthrough

Onboarding.jsx now manages step-aware focus: it adds refs and a retry-focus helper, wires callback refs into the Step 1 voice name input and sr-only focus targets for Steps 2 and 3, and focuses the appropriate target whenever activeStep changes.

Changes

Auto-focus on step transitions

Layer / File(s)	Summary
Hook imports and repositioned status fetch client/src/pages/Onboarding.jsx	React import updated to include useRef and useEffect; the component’s server-status fetch("/api/voice/status") effect and hasKey memo are moved near the new focus-management code.
Focus refs, retry helper, effect, and JSX wiring client/src/pages/Onboarding.jsx	Adds refs for Step 1/2/3, a setFocusWithRetry helper, callback refs that focus when their step becomes active, a fallback useEffect that focuses the mapped target on activeStep changes, and wires ref={setVoiceNameRef} on Step 1 plus sr-only focus containers with ref={setStep2Ref} and ref={setStep3Ref} for Steps 2 and 3.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• itzzavdhesh/VoiceForge#137: Modifies the same Onboarding component to structure steps around activeStep, which this PR's auto-focus logic relies on.

Suggested labels

size/m

Suggested reviewers

• sabeenaviklar
• itsdakshjain

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: adding auto-focus functionality to the first input field in the onboarding modal.
Linked Issues check	✅ Passed	The PR implements all key objectives from issue #185: programmatically focuses the first input per step using useRef/useEffect, creates refs for Steps 1-3, triggers focus on activeStep changes, and targets the correct file.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the auto-focus feature. No unrelated modifications to existing onboarding logic, storage effects, cloning, or navigation are present.
Description check	✅ Passed	The pull request description clearly explains the auto-focus feature being added, includes detailed changes made, testing steps, and links to the related issue #185, which directly matches the changeset in Onboarding.jsx.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

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 `@client/src/pages/Onboarding.jsx`:
- Line 252: The current focus targets (e.g., the element referenced by
step2FirstInputRef and the similar step3 ref) point to sr-only divs, which gives
no visible focus for keyboard users; update the DOM so the refs point to visible
headings or container elements (make the visible heading/container receive
tabIndex={-1} and move the ref from the sr-only div to that element) and remove
or repurpose the sr-only placeholders, then ensure any dynamic ARIA states
(recording status, audio playback, live camera indicators) are present on those
visible elements or nearby elements so screen-readers announce step/context
changes correctly.
- Around line 33-41: The useEffect that accesses activeStep and refs (useEffect,
voiceNameInputRef, step2FirstInputRef, step3FirstInputRef) runs before
activeStep is declared, causing a TDZ ReferenceError; fix by moving the
activeStep state declaration (the useState for activeStep) above this useEffect
(or vice‑versa ensure activeStep is declared before any hook that references
it). Also update the focus targets for steps 2 and 3 to focus a real interactive
control (e.g., the visible Back or Continue button — create refs like
step2FirstInteractiveRef/step3FirstInteractiveRef or reuse existing
back/continue button refs) instead of hidden sr-only divs, or add an aria-live
region to announce step changes for screen readers.

🪄 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: ASSERTIVE

Plan: Pro Plus

Run ID: c5cc1938-d064-47be-8448-c11bb245fada

📥 Commits

Reviewing files that changed from the base of the PR and between 21418cc and 00b9f84.

📒 Files selected for processing (1)

• client/src/pages/Onboarding.jsx

[cubic-dev-ai]

1 issue found across 1 file

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>

[github-actions]

✍️ DCO Sign-off Needed

Hey @grishabhatia! 👋 One or more commits in this PR are missing a Signed-off-by: line.

Warning

• 99cde0a Merge branch 'main' into feat/auto-focus-onboarding-fix

How to fix:

For the latest commit:

git commit --amend --signoff
git push --force-with-lease

For multiple commits, replace N with the number to update:

git rebase --signoff HEAD~N
git push --force-with-lease

This comment will update automatically after you push.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}

[github-actions]

🎉 PR Ready for Mentor Review

Hey @grishabhatia! 👋 Your PR passed all checks and is now in the GSSoC review queue.

Note

🔗 Closing: #185 · 📐 89 lines across 1 file(s) · 📬 Review requested

@sabeenaviklar @Anushreebasics @itsdakshjain @snehkris @1754riya @Mrigakshi-Rathore @Itzzavdheshh @Nitya-003 @4f4d @lovestaco, this PR is ready for your review — please confirm scope, check behavior and tests, then approve or request changes.

Important

This is not an approval. Please wait for mentor feedback before expecting a merge. If changes are requested, push them to this same branch and keep the PR focused on the linked issue.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}

[itsdakshjain]

Resolve the bot comments

[github-actions]

❌ Merge Policy Violation

Caution

Unauthorized Merge — Pull request #205 was merged by @Itzzavdheshh (mentor) without any review on record.

VoiceForge guidelines require contributors/mentors to submit at least one review (approval, comment, or changes requested) before merging a pull request to ensure code quality and point-tracking integrity.

📊 Violation Summary

Parameter	Details
Merged By	@Itzzavdheshh (mentor)
Review Count	0 reviews on record
PR Author	@grishabhatia
PR Number	#205

⚠️ Action Required (@itzzavdhesh):

• Please review the merged code for quality and scope.
• Consider reverting the merge if it was done inappropriately.
  • Ensure your repository ruleset or branch protection rules are active.

---

_{🤖 VoiceForge Automation}

[github-actions]

🎊 PR Merged Successfully

Hey @grishabhatia! 👋 Congratulations and thank you for your contribution to VoiceForge!

Note

🔗 Linked issue(s): #185 · ✅ Marked as merged and complete

Maintainers may still handle final cleanup, release notes, or follow-up tracking after the merge.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}