[Feature]: Add keyboard shortcuts for mode switching (SEO / AI / Community) and new tab creation

[divyanshim27]

Summary

SuperBrowser presents a mode-based browsing interface with three distinct research modes — SuperSEO, SuperAI, and Community Insights — along with a tab-based browsing system. Currently, switching between modes and creating new tabs requires mouse interaction. For a tool positioning itself as a productivity-focused, AI-native browser, the absence of keyboard shortcuts is a notable UX gap. Power users who rely on keyboard navigation cannot efficiently cycle through modes or manage tabs without moving their hands to the mouse.

Problem
There are no keyboard shortcuts for switching between SuperSEO, SuperAI, and Community modes.
Creating a new tab, closing the current tab, and switching between open tabs have no keyboard bindings.
The search bar has no documented shortcut to focus it (e.g., pressing / or Ctrl+L as in standard browsers).
There is no keyboard shortcut reference or help modal in the UI.
Impact
Power users and researchers — the primary target audience — face workflow interruptions requiring mouse use for basic navigation.
Accessibility for keyboard-only users is limited.
SuperBrowser's competitive positioning against browser-based tools is weakened without keyboard-first navigation.
Proposed Solution

1. Add a global keyboard event listener in frontend/src/App.jsx:

javascript
// frontend/src/App.jsx
useEffect(() => {
const handleKeyDown = (e) => {
// Focus search bar
if ((e.key === '/' || (e.ctrlKey && e.key === 'l')) && !e.target.matches('input, textarea')) {
e.preventDefault();
document.querySelector('[data-search-input]')?.focus();
}

// Switch modes: Ctrl+1, Ctrl+2, Ctrl+3
if (e.ctrlKey && e.key === '1') { e.preventDefault(); setActiveMode('seo'); }
if (e.ctrlKey && e.key === '2') { e.preventDefault(); setActiveMode('ai'); }
if (e.ctrlKey && e.key === '3') { e.preventDefault(); setActiveMode('community'); }

// Tab management
if (e.ctrlKey && e.key === 't') { e.preventDefault(); createNewTab(); }
if (e.ctrlKey && e.key === 'w') { e.preventDefault(); closeCurrentTab(); }
if (e.ctrlKey && e.key === 'Tab') { e.preventDefault(); switchToNextTab(); }
if (e.ctrlKey && e.shiftKey && e.key === 'Tab') { e.preventDefault(); switchToPrevTab(); }

};

window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [activeMode, tabs]);

2. Add a keyboard shortcut help modal (accessible via ? key):

jsx
// frontend/src/components/KeyboardShortcutsModal.jsx
const shortcuts = [
{ keys: 'Ctrl + 1', action: 'Switch to SuperSEO mode' },
{ keys: 'Ctrl + 2', action: 'Switch to SuperAI mode' },
{ keys: 'Ctrl + 3', action: 'Switch to Community mode' },
{ keys: 'Ctrl + T', action: 'New tab' },
{ keys: 'Ctrl + W', action: 'Close current tab' },
{ keys: 'Ctrl + Tab', action: 'Next tab' },
{ keys: '/', action: 'Focus search bar' },
{ keys: '?', action: 'Show keyboard shortcuts' },
];

3. Add data-search-input attribute to the search bar component for reliable DOM targeting.

4. Add a small ? icon in the UI header that opens the shortcuts modal.

Acceptance Criteria
Ctrl+1/2/3 switches between SEO, AI, and Community modes
Ctrl+T creates a new tab, Ctrl+W closes current tab, Ctrl+Tab cycles tabs
/ or Ctrl+L focuses the search input
? key opens a keyboard shortcuts reference modal
All shortcuts are disabled when focus is inside an input or textarea to prevent interference
Shortcuts work in both web and Electron desktop modes

I would be happy to implement this fully. Could you please assign this issue to me?

Labels: enhancement, feature-request, frontend, user-experience, accessibility, help wanted, GSSoC 2026

---

[divyanshim27]

Hey @PandyaJeet ,
Please assign it to me under GSSoC 2026.
/assign /claim /claim-assignment