Skip to content

feat: add keyboard shortcuts for search focus and section navigation #1992

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GeethaBurigalla wants to merge 9 commits into
base: main
Choose a base branch
from
+86 −25
Open

feat: add keyboard shortcuts for search focus and section navigation #1992

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
950c3bb
feat: add keyboard shortcuts for search focus and section navigation
GeethaBurigalla Jul 4, 2026
bc713fa
fix: prevent shortcut leak behind open modals and add help modal focu…
GeethaBurigalla Jul 4, 2026
9f8ca59
fix: restore shortcut handlers in index.html and use Alt+1/2 to avoid…
GeethaBurigalla Jul 4, 2026
3580b61
docs: update help modal to show Alt+1/Alt+2 shortcuts instead of Ctrl…
GeethaBurigalla Jul 4, 2026
53c56e2
fix: prevent help modal from stacking over other open modals
GeethaBurigalla Jul 4, 2026
3d52d6a
fix: include proposal modal in modal-open guard for global shortcuts
GeethaBurigalla Jul 4, 2026
127901e
fix: block page shortcuts behind any open modal and align Escape hand…
GeethaBurigalla Jul 5, 2026
4fd8edf
fix: remove duplicate const declarations in handleGlobalKeydown
GeethaBurigalla Aug 8, 2026
6ac3c2b
fix: remove redundant stale searchInput check in isTyping guard
GeethaBurigalla Aug 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 40 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1356,6 +1356,7 @@
<div class="relative z-10 bg-white dark:bg-[#18181b] rounded-[calc(1rem-1.5px)] w-full search-border-inner flex items-center gap-2 transition-all duration-300">
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-zinc-400">search</span>
<input id="hero-search" type="text" placeholder="Search organization names..." aria-label="Search GSoC 2026 organizations" class="flex-1 bg-transparent border-0 rounded-2xl py-3 sm:py-4 pl-12 pr-4 text-sm font-medium focus:ring-0 focus:outline-none transition-all text-zinc-900 dark:text-zinc-100" />
<span class="hidden sm:inline-flex items-center gap-0.5 mr-2 px-1.5 py-0.5 rounded-md border border-zinc-300 dark:border-zinc-600 text-[10px] font-mono font-semibold text-zinc-400 dark:text-zinc-500 select-none" aria-hidden="true">⌘K</span>
Comment thread
greptile-apps[bot] marked this conversation as resolved.
Outdated

@cubic-dev-ai cubic-dev-ai Bot Jul 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: The visible search-bar hint chip and help-modal shortcut table only show Mac-specific ⌘ symbols, but the handler code accepts both Ctrl and Cmd (e.metaKey || e.ctrlKey). On Windows/Linux, users won't see that Ctrl+K, Ctrl+1, and Ctrl+2 also work, which undermines the discoverability this PR aims to improve. Consider displaying both alternatives (e.g., Ctrl/Cmd+K) or adapting the label to the user's platform.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At index.html, line 1359:

<comment>The visible search-bar hint chip and help-modal shortcut table only show Mac-specific `⌘` symbols, but the handler code accepts both `Ctrl` and `Cmd` (`e.metaKey || e.ctrlKey`). On Windows/Linux, users won't see that `Ctrl+K`, `Ctrl+1`, and `Ctrl+2` also work, which undermines the discoverability this PR aims to improve. Consider displaying both alternatives (e.g., `Ctrl/Cmd+K`) or adapting the label to the user's platform.</comment>

<file context>
@@ -1356,6 +1356,7 @@ <h1 class="text-4xl sm:text-5xl md:text-7xl font-extrabold font-headline trackin
           <div class="relative z-10 bg-white dark:bg-[#18181b] rounded-[calc(1rem-1.5px)] w-full search-border-inner flex items-center gap-2 transition-all duration-300">
             <span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-zinc-400">search</span>
             <input id="hero-search" type="text" placeholder="Search organization names..." aria-label="Search GSoC 2026 organizations" class="flex-1 bg-transparent border-0 rounded-2xl py-3 sm:py-4 pl-12 pr-4 text-sm font-medium focus:ring-0 focus:outline-none transition-all text-zinc-900 dark:text-zinc-100" />
+            <span class="hidden sm:inline-flex items-center gap-0.5 mr-2 px-1.5 py-0.5 rounded-md border border-zinc-300 dark:border-zinc-600 text-[10px] font-mono font-semibold text-zinc-400 dark:text-zinc-500 select-none" aria-hidden="true">⌘K</span>
             <button id="hero-search-submit" type="button" class="mr-2 inline-flex items-center justify-center rounded-xl bg-primary px-4 py-2 text-xs sm:text-sm font-bold text-white transition-colors hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-primary/30">
               Search
</file context>

<button id="hero-search-submit" type="button" class="mr-2 inline-flex items-center justify-center rounded-xl bg-primary px-4 py-2 text-xs sm:text-sm font-bold text-white transition-colors hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-primary/30">
Search
</button>
Expand Down Expand Up @@ -5199,7 +5200,7 @@
}
Comment thread
greptile-apps[bot] marked this conversation as resolved.
</script>

<div class="modal-bg" id="helpModal">
<div class="modal-bg" id="helpModal" role="dialog" aria-modal="true" aria-labelledby="helpModalTitle">

Check warning on line 5203 in index.html

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Use <dialog> instead of the dialog role to ensure accessibility across all devices. 


See more on https://sonarcloud.io/project/issues?id=S3DFX-CYBER_GSoC-Org-Finder-&issues=AZ8tAayo_PZEko8307io&open=AZ8tAayo_PZEko8307io&pullRequest=1992
Comment thread
cubic-dev-ai[bot] marked this conversation as resolved.
<div class="modal">

<button class="close-btn" onclick="closeHelpModal()" aria-label="Close keyboard shortcuts modal">
Expand All @@ -5209,7 +5210,7 @@


<div class="modal-header">
<h2>Keyboard Shortcuts</h2>
<h2 id="helpModalTitle">Keyboard Shortcuts</h2>
<p>Quick shortcuts for navigation</p>
</div>

Expand Down Expand Up @@ -5245,10 +5246,20 @@
</tr>

<tr class="shortcut-row">
<td class="py-2"><kbd>/</kbd></td>
<td class="py-2"><kbd>/</kbd> or <kbd>⌘</kbd><kbd>K</kbd></td>
<td class="py-2">Focus search bar</td>
</tr>

<tr class="shortcut-row">
<td class="py-2"><kbd>⌘</kbd><kbd>1</kbd></td>
<td class="py-2">Jump to Timeline section</td>
</tr>

<tr class="shortcut-row">
<td class="py-2"><kbd>⌘</kbd><kbd>2</kbd></td>
<td class="py-2">Jump to Organizations section</td>
</tr>


<tr class="category-row">
<td colspan="2">Actions</td>
Expand Down Expand Up @@ -5326,18 +5337,36 @@
helpBtn.addEventListener('click', openHelpModal);
}

document.addEventListener('keydown', (e) => {

Check failure on line 5340 in index.html

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this function to reduce its Cognitive Complexity from 22 to the 15 allowed. 


See more on https://sonarcloud.io/project/issues?id=S3DFX-CYBER_GSoC-Org-Finder-&issues=AZ8tAayo_PZEko8307ip&open=AZ8tAayo_PZEko8307ip&pullRequest=1992
const active = document.activeElement;
const isTyping = active && (
['INPUT', 'TEXTAREA', 'SELECT'].includes(active.tagName) ||
active.id === 'searchInput'
);

// Focus search bar — works alongside Ctrl/Cmd but not while already typing
if (!isTyping && (e.key === '/' || ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k'))) {
Comment thread
cubic-dev-ai[bot] marked this conversation as resolved.
Outdated
e.preventDefault();
document.getElementById('hero-search')?.focus();
return;
}
// Jump to Timeline section
if (!isTyping && (e.metaKey || e.ctrlKey) && e.key === '1') {
e.preventDefault();
document.getElementById('timeline')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
return;
}
// Jump to Organizations section
if (!isTyping && (e.metaKey || e.ctrlKey) && e.key === '2') {
e.preventDefault();
document.getElementById('orgs')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
return;
}
Comment thread
greptile-apps[bot] marked this conversation as resolved.
Outdated
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated

if (e.ctrlKey || e.metaKey || e.altKey) {
return;
}
const active = document.activeElement;
if (
active &&
(
['INPUT', 'TEXTAREA', 'SELECT'].includes(active.tagName) ||
active.id === 'searchInput'
)
) {
if (isTyping) {
Comment on lines +5363 to +5397

@coderabbitai coderabbitai Bot Jul 4, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check for duplicate keydown listeners across index.html and app.js
rg -n "addEventListener\('keydown'|onkeydown" index.html src/js/app.js

Repository: S3DFX-CYBER/GSoC-Org-Finder-

Length of output: 1193

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Inspect the global keydown handler and the inline handler around the relevant lines.
sed -n '720,750p' src/js/app.js
printf '\n--- index.html ---\n'
sed -n '5338,5375p' index.html

Repository: S3DFX-CYBER/GSoC-Org-Finder-

Length of output: 2207

Consolidate the global keydown shortcut handler

This inline document.addEventListener('keydown', …) duplicates src/js/app.js#handleGlobalKeydown, and its isTyping guard still checks active.id === 'searchInput' while the search field is now #hero-search. Keep the shortcut logic in one place to avoid divergence.

🧰 Tools
🪛 ast-grep (0.44.0)

[warning] 5341-5344: Avoid SQL injections
Context: active && (
['INPUT', 'TEXTAREA', 'SELECT'].includes(active.tagName) ||
active.id === 'searchInput'
)
Note: [CWE-89] Improper Neutralization of Special Elements used in an SQL Command ('SQL Injection'). Security best practice.

(variable-sql-statement-injection)

[warning] 5342-5343: Avoid SQL injections
Context: ['INPUT', 'TEXTAREA', 'SELECT'].includes(active.tagName) ||
active.id === 'searchInput'
Note: [CWE-89] Improper Neutralization of Special Elements used in an SQL Command ('SQL Injection'). Security best practice.

(variable-sql-statement-injection)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@index.html` around lines 5341 - 5369, The global keydown shortcut logic is
duplicated here and in handleGlobalKeydown, so keep the shortcut handling in one
place and remove this inline copy. Update the typing guard to match the current
search field id used by the page (`#hero-search`) instead of checking searchInput.
Use the existing handleGlobalKeydown function as the single source of truth for
shortcuts and typing-state checks.

return;
}
const helpModalOpen =
Expand Down
14 changes: 12 additions & 2 deletions src/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -713,7 +713,7 @@
updateCardFocus();
}

function handleGlobalKeydown(e) {

Check failure on line 716 in src/js/app.js

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Refactor this function to reduce its Cognitive Complexity from 18 to the 15 allowed. 


See more on https://sonarcloud.io/project/issues?id=S3DFX-CYBER_GSoC-Org-Finder-&issues=AZ8tAaoN_PZEko8307in&open=AZ8tAaoN_PZEko8307in&pullRequest=1992
if (e.key === 'Escape' && handleEscapeKey(e)) return;

Comment thread
cubic-dev-ai[bot] marked this conversation as resolved.
if (['INPUT', 'SELECT', 'TEXTAREA'].includes(document.activeElement?.tagName)) return;
Expand All @@ -724,9 +724,19 @@
openModalElement('helpModal');
return;
}
if (e.key === '/') {
if (e.key === '/' || ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k')) {
e.preventDefault();
document.getElementById('searchInput')?.focus();
document.getElementById('hero-search')?.focus();
return;
}
if ((e.metaKey || e.ctrlKey) && e.key === '1') {
e.preventDefault();
document.getElementById('timeline')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
return;
}
if ((e.metaKey || e.ctrlKey) && e.key === '2') {
e.preventDefault();
document.getElementById('orgs')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
return;
Comment thread
cubic-dev-ai[bot] marked this conversation as resolved.
Outdated
}

Expand Down
Loading