Add keyboard shortcuts for study sessions #282

Summary

Implement keyboard shortcuts for faster flashcard study sessions. Power users and accessibility-focused users benefit significantly from keyboard-driven interactions.

Motivation

• Speed up study sessions by 2-3x for touch typists
• Improve accessibility for users who prefer keyboard navigation
• Standard UX pattern in popular flashcard apps (Anki, Quizlet)
• Reduces friction during review sessions

Proposed Shortcuts

Study Session

Global

Implementation Details

1. Create useKeyboardShortcuts hook
2. Add keyboard event listeners with proper cleanup
3. Show visual hints on cards (e.g., "Press Space to reveal")
4. Create shortcuts help modal accessible via ?
5. Ensure shortcuts don't interfere with form inputs

Accessibility Considerations

• Announce actions to screen readers when triggered via keyboard
• Provide visual feedback for key presses
• Don't override browser/OS shortcuts
• Support for custom keybindings (future enhancement)

Technical Approach

function useStudyShortcuts(handlers: {
  onReveal: () => void
  onRate: (rating: number) => void
}) {
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.target instanceof HTMLInputElement) return
      switch (e.key) {
        case ' ': handlers.onReveal(); break
        case '1': handlers.onRate(1); break
        // ...
      }
    }
    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [handlers])
}

Acceptance Criteria

• Space bar reveals/flips flashcard
• Number keys 1-4 rate cards
• Shortcuts don't fire when typing in inputs
• Help modal shows all available shortcuts
• Visual hints shown on study cards