fix: trap keyboard focus within onboarding dialog

[karthikeya20012007]

Description

Fixes an accessibility issue where keyboard focus could escape the onboarding dialog while the tour was active.

Added FocusTrap to keep keyboard navigation contained within the onboarding modal and preserved existing dismissal/navigation behavior.

Related Issue

Closes #878

Type of Contribution

• Bug fix
• New feature
• Documentation update
• GSSoC contribution

Participant Info

• GitHub username: karthikeya20012007
• Contribution level (Beginner/Intermediate/Advanced): Intermediate

Screen Recording

Recording / Loom link:

Checklist

• I have read the contribution guidelines
• My changes follow the project structure
• I have tested my changes in Chrome, Firefox, and Safari
• bun run lint passes (no ESLint errors)
• bunx tsc --noEmit passes (no TypeScript errors)
• New interactive elements have aria-label / accessible names
• No console.log statements left in
• This PR is related to a valid issue
• Screen recording attached above (required for UI/feature/design changes)

[vercel]

@karthikeya20012007 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

✅ PR Format Check Passed — @karthikeya20012007

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[github-actions]

👋 Thanks for your PR, @karthikeya20012007!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[magic-peach]

Hey @karthikeya20012007! Thanks for fixing keyboard focus trapping in the onboarding dialog — this is an important accessibility fix.

This PR currently has merge conflicts with main. Please rebase:

git fetch origin
git rebase origin/main
# resolve any conflicts
git push --force-with-lease origin <your-branch>

Once rebased and CI passes, I'll review and merge this.

[magic-peach]

Hey @karthikeya20012007! This PR had a merge conflict with `main` due to a concurrent refactor of `OnboardingTour.tsx` — I've resolved it automatically and pushed the result.

Here's what was merged:

• `src/components/OnboardingTour.tsx`: kept both your `FocusTrap` wrapper (the core change of this PR) and main's `currentStep` variable refactoring. The `Tooltip` now uses `currentStep` (from main) instead of `TOUR_STEPS[stepIndex]!` — functionally identical but cleaner.

CI has been re-triggered. The focus trap implementation looks correct — `focus-trap-react` is already in `package.json` and this is a solid accessibility improvement.

[karthikeya20012007]

Thanks for resolving the conflicts and integrating the refactor changes. I appreciate the review and the detailed explanation!

[magic-peach]

@karthikeya20012007 This PR has merge conflicts with main in src/components/OnboardingTour.tsx. The conflicts involve multiple functional changes on both sides (your FocusTrap addition and main's improved retry logic + requestAnimationFrame-based scroll/resize tracking).

Please rebase your branch on the latest main and resolve the conflicts:

git fetch upstream
git rebase upstream/main
# For each conflict in src/components/OnboardingTour.tsx:
# - Keep your FocusTrap wrapper in the return statement
# - Keep main's tryMeasure retry logic (the retryCount/retryTimer approach)
# - Keep main's remeasure with requestAnimationFrame + scroll listener
# Then:
git add src/components/OnboardingTour.tsx
git rebase --continue
git push --force-with-lease origin fix/onboarding-focus-trap

Once rebased and CI passes, this will be merged quickly!

[karthikeya20012007]

Hi @magic-peach, just following up — I synced the branch with the latest upstream changes and resolved the remaining merge conflicts locally. The branch should now be up to date on my side. Please let me know if any additional changes are needed from me.

[karthikeya20012007]

Hi @magic-peach, just following up — I synced the branch with the latest upstream changes and resolved the remaining merge conflicts locally. The branch should now be up to date on my side.

[magic-peach]

Hi @karthikeya20012007 — good news and a small ask.

Your PR passed review in our backlog cleanup and was queued to merge. We merged 38 PRs today, and yours now conflicts with main purely because of that — several of them touched the same files. Nothing is wrong with your change.

To land it:

git fetch origin
git rebase origin/main
# resolve conflicts
git push --force-with-lease

Ping me here once it's green and I'll merge it straight away — it's already approved on our side, so it won't go back into the queue. Thanks for your patience with how long this sat 🙏