[BUG] Comparison slider handle is keyboard-focusable but not keyboard-operable

[magic-peach]

Bug description
The drag handle in ComparisonPreview.tsx:263-274 is a real <button> with a correct aria-label="Drag to compare original vs reframed", so it's reachable and announced correctly by a screen reader — but it only wires onMouseDown/onTouchStart (:264-265). There's no onKeyDown, so once focused, Enter/Space/arrow keys do nothing.

Steps to reproduce

1. Open the before/after comparison view
2. Tab to the "Drag to compare" handle (it does receive focus)
3. Press arrow keys or Enter — nothing happens

Expected behavior
Arrow keys should move the comparison slider position, matching the pattern in TrimControl.tsx's handles (ArrowLeft/ArrowRight adjusting the value).

Actual behavior
The control is reachable but inert from the keyboard.

Browser and OS info
Any.

[github-actions]

👋 Thanks for opening an issue, @magic-peach!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[github-actions]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[pranav28042007-boop]

/assign

[github-actions]

Hey @pranav28042007-boop, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.