implement global keyboard shortcut

[shadrach68]

closes #591

This PR implements a robust, accessible global keyboard shortcut system for the Web3 Student Lab platform to improve efficiency for frequent users and power users.

Changes Made

• KeyboardShortcutsProvider: Implemented a global React context provider wrapping the application in layout.tsx. It uses hotkeys-js to listen for key combinations and dispatch custom events or trigger Next.js router navigations.
• ShortcutHelpModal: Built an accessible <dialog> based modal to display all available shortcuts. It can be toggled using Ctrl/Cmd + K or Ctrl/Cmd + Shift + H.
• Theme Integration: Updated ThemeToggle.tsx to listen for the custom theme-toggle event (Ctrl/Cmd + Shift + T).
• Playground Integration: Updated the Playground page.tsx to correctly listen for the playground-compile event on the document (Ctrl/Cmd + Shift + C).
• Accessibility & UX:
  • Prevents shortcuts from firing when the user is typing in form inputs, textareas, or content-editable regions.
  • Implemented semantic <kbd> tags in the help modal.
• Testing: Added comprehensive unit tests in KeyboardShortcuts.test.tsx and KeyboardShortcutsProvider.test.tsx achieving >90% coverage for the new module.

Available Shortcuts

Keys	Action
Ctrl/Cmd + K or Ctrl/Cmd + Shift + H	Open shortcut help panel
G + C	Navigate to the course catalog
G + R	Navigate to the roadmap
G + V	Navigate to the verification center
G + D	Navigate to the dashboard
Ctrl/Cmd + Shift + T	Toggle between light and dark theme
Ctrl/Cmd + Shift + C	Compile code in the playground

Acceptance Criteria

• Keyboard shortcuts work correctly across the platform.
• Help system shows available shortcuts (Modal).
• All unit tests pass with full coverage (>90%).
• Documentation and educational comments are included.
• Follows WCAG 2.1 accessibility best practices (Input filtering, Dialog semantics).

How to Test

1. Pull the branch and run the development server (npm run dev).
2. Press Cmd+K or Ctrl+K to open the help modal. Click outside or use the 'X' to close it.
3. Try navigating using G then C (Catalog), G then R (Roadmap), etc.
4. Press Cmd+Shift+T or Ctrl+Shift+T to toggle the application theme.
5. Navigate to /playground, focus outside the editor, and press Cmd+Shift+C or Ctrl+Shift+C to trigger compilation.
6. Verify tests by running npm test or npx vitest run in the frontend directory.

[vercel]

@shadrach68 is attempting to deploy a commit to the Ayomide Adeniran's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@shadrach68 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[ayomideadeniran]

PR under review. I will drop a review if I find any wrong implementation.