Skip to content

feature: Add keyboard shortcuts for comparison form and table search #222

Open
Open
feature: Add keyboard shortcuts for comparison form and table search#222
Assignees
SamuelMackovych
Labels
accessibilitybeginner friendlyfeaturegood first issueGood for newcomersmediumnextjstypescriptux

Description

@O2sa
O2sa
opened on Oct 6, 2026

Introduce intuitive keyboard shortcuts across the application to enhance developer ergonomics:

  • Press / to focus the search input (in CompareForm or LeaderboardTable).
  • Press Ctrl + Enter (or Cmd + Enter) inside CompareForm inputs to submit the comparison.
  • Press Escape to clear inputs or reset focus.

Motivation

Developers appreciate thoughtful keyboard ergonomics. Subtle shortcuts give the app a polished, pro-tier feel that earns respect and upvotes on Hacker News and Reddit.

Tasks

  • Implement a lightweight keyboard listener hook (e.g., useHotkeys or useEffect on window).
  • Add keyboard shortcut visual indicator badges (e.g., <kbd className="border rounded px-1.5 text-xs">⌘↵</kbd>) inside input fields or submit buttons.
  • Ensure shortcuts do not trigger when typing inside other inputs or dialogs.
  • Verify accessibility and prevent browser shortcut conflicts.

Files to Check

  • src/features/comparison/components/compare-form.tsx
  • src/features/leaderboard/components/leaderboard-table.tsx
  • src/components/ui/input.tsx

Tip

🚀 Want to contribute?
Comment assign me to be automatically assigned to this issue via our GitHub Actions bot. Happy coding! ✨

Activity

  1. O2sa
    added
    good first issueGood for newcomers
    medium
    feature
    beginner friendly
    ux
    nextjs
    accessibility
    typescript
    on Oct 6, 2026

  2. SamuelMackovych commented on Oct 7, 2026

    @SamuelMackovych
    SamuelMackovych
    on Oct 7, 2026

    assign me

  3. github-actions
    assigned
    SamuelMackovych
    on Oct 7, 2026

  4. github-actions commented on Oct 7, 2026

    @github-actions
    github-actionsbot
    on Oct 7, 2026 – with GitHub Actions

    🎉 Issue assigned to @SamuelMackovych! Happy coding!

  5. O2sa
    unassigned
    SamuelMackovych
    on Oct 11, 2026

  6. SamuelMackovych commented on Oct 13, 2026

    @SamuelMackovych
    SamuelMackovych
    on Oct 13, 2026

    assign me

    Sorry about the previous inactivity. I will add a useHotkeys hook with no new dependency, wire / and Esc into the compare form and leaderboard search boxes, and put Cmd + Enter / Ctrl + Enter and / badges on the Compare button and the search fields, then I'll run pnpm lint and pnpm test before opening the PR.

    One question: the compare form has two username fields, so / can only focus one of them. Is focusing the first field fine, or would you prefer something else, like / focusing whichever field is empty first, or assigning a different key for the second field?

  7. github-actions
    assigned
    SamuelMackovych
    on Oct 13, 2026

  8. github-actions commented on Oct 13, 2026

    @github-actions
    github-actionsbot
    on Oct 13, 2026 – with GitHub Actions

    🎉 Issue assigned to @SamuelMackovych! Happy coding!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

accessibilitybeginner friendlyfeaturegood first issueGood for newcomersmediumnextjstypescriptux

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions