From 43cbcf6448b53b5339b1fcb6fa8b20de41810641 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 10 Jan 2026 20:48:40 +0000 Subject: [PATCH 1/3] feat: add keyboard shortcut for search and accessibility label - Added `/` and `Ctrl+K` keyboard shortcuts to focus search input - Added visually hidden label for search input for better accessibility - Added visual keyboard hint to search bar on desktop - Added `.sr-only` utility class --- .Jules/palette.md | 3 + index.html | 352 +++++++++++++++++++++++---------------------- js/uiController.js | 22 +++ styles.css | 40 ++++++ 4 files changed, 242 insertions(+), 175 deletions(-) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..68c839b --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2026-01-10 - Search Keyboard Shortcut & Accessibility +**Learning:** Users often rely on standard keyboard shortcuts like `/` or `Ctrl+K` for search, but visual cues are essential for discoverability. Adding a `.sr-only` label significantly improves accessibility for screen readers without altering the visual design. +**Action:** When implementing search features, always include a proper label (even if visually hidden) and consider adding standard keyboard shortcuts with visual hints for desktop users. \ No newline at end of file diff --git a/index.html b/index.html index 3966a00..8d05b1e 100644 --- a/index.html +++ b/index.html @@ -1,175 +1,177 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - Connect Dump Analyser V2.0 - - - - - - - - - -
- -
-
- -
-

Connect Dump Analyser v2.0

-
- - by MRZ - -
-
- -
-
- - -
- -
- -
-
-
- - search - -
-
-
- - -
-
- -
-
- -
- - - - - - - - - - - - - - - - - -
Course CodeSEC Faculty Faculty InfoSchedule Lab ScheduleAvailable Booked Capacity Exam DateRoom
-
- - -
- - - - arrow_upward - - - - - - -
- - -
- - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + Connect Dump Analyser V2.0 + + + + + + + + + +
+ +
+
+ +
+

Connect Dump Analyser v2.0

+
+ + by MRZ + +
+
+ +
+
+ + +
+ +
+ +
+
+
+ + + search + + +
+
+
+ + +
+
+ +
+
+ +
+ + + + + + + + + + + + + + + + + +
Course CodeSEC Faculty Faculty InfoSchedule Lab ScheduleAvailable Booked Capacity Exam DateRoom
+
+ + +
+ + + + arrow_upward + + + + + + +
+ + +
+ + + + + + + + + + + + + diff --git a/js/uiController.js b/js/uiController.js index 560c631..380b3a4 100644 --- a/js/uiController.js +++ b/js/uiController.js @@ -278,6 +278,28 @@ const UIController = { } }); } + + // Keyboard Shortcuts + document.addEventListener('keydown', (e) => { + // Focus search on '/' or Ctrl+K (Cmd+K) + if ((e.key === '/' || (e.key === 'k' && (e.metaKey || e.ctrlKey))) && + document.activeElement !== this.elements.searchInput) { + + // Don't trigger if user is typing in another input (if any existed) + if (document.activeElement.tagName === 'INPUT' || + document.activeElement.tagName === 'TEXTAREA') { + return; + } + + e.preventDefault(); + this.elements.searchInput.focus(); + } + + // Clear search on Escape + if (e.key === 'Escape' && document.activeElement === this.elements.searchInput) { + this.elements.searchInput.blur(); + } + }); }, /** diff --git a/styles.css b/styles.css index d8b4838..2565c01 100644 --- a/styles.css +++ b/styles.css @@ -145,6 +145,19 @@ body { transition: background 0.2s, color 0.2s; } +/* ---------- ACCESSIBILITY UTILITIES ---------- */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + /* ---------- CONTAINER ---------- */ .container { width: 100%; @@ -451,6 +464,33 @@ h1 { color: var(--accent-danger); } +.shortcut-hint { + position: absolute; + right: 65px; + top: 50%; + transform: translateY(-50%); + font-size: 0.75rem; + color: var(--text-muted); + border: 1px solid var(--border-color); + border-radius: 4px; + padding: 2px 6px; + background: var(--bg-tertiary); + pointer-events: none; + transition: opacity 0.2s; + display: none; +} + +@media (min-width: 769px) { + .shortcut-hint { + display: block; + } +} + +#searchInput:focus ~ .shortcut-hint, +#searchInput:not(:placeholder-shown) ~ .shortcut-hint { + display: none; +} + /* ---------- TABLE WRAPPER ---------- */ .table-responsive { width: 100%; From be62d5052baf2edee45839ea080ef77eca34a054 Mon Sep 17 00:00:00 2001 From: "cubic-dev-ai[bot]" <1082092+cubic-dev-ai[bot]@users.noreply.github.com> Date: Sat, 10 Jan 2026 21:33:23 +0000 Subject: [PATCH 2/3] Fix misleading comment in keyboard shortcut handler --- js/uiController.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/uiController.js b/js/uiController.js index 380b3a4..0507b01 100644 --- a/js/uiController.js +++ b/js/uiController.js @@ -295,7 +295,7 @@ const UIController = { this.elements.searchInput.focus(); } - // Clear search on Escape + // Unfocus search input on Escape if (e.key === 'Escape' && document.activeElement === this.elements.searchInput) { this.elements.searchInput.blur(); } From cc5dc7a0f46b834c7123bd4a5edc8d78476dcff2 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 10 Jan 2026 21:38:51 +0000 Subject: [PATCH 3/3] feat: add keyboard shortcut for search and accessibility label - Added `/` and `Ctrl+K` keyboard shortcuts to focus search input - Added visually hidden label for search input for better accessibility - Added visual keyboard hint to search bar on desktop - Added `.sr-only` utility class - Updated comment for keyboard listener logic - Added null check for search input in keyboard listener --- js/uiController.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/js/uiController.js b/js/uiController.js index 0507b01..14e382e 100644 --- a/js/uiController.js +++ b/js/uiController.js @@ -281,6 +281,9 @@ const UIController = { // Keyboard Shortcuts document.addEventListener('keydown', (e) => { + // Guard clause if search input doesn't exist + if (!this.elements.searchInput) return; + // Focus search on '/' or Ctrl+K (Cmd+K) if ((e.key === '/' || (e.key === 'k' && (e.metaKey || e.ctrlKey))) && document.activeElement !== this.elements.searchInput) { @@ -295,7 +298,7 @@ const UIController = { this.elements.searchInput.focus(); } - // Unfocus search input on Escape + // Remove focus from search on Escape if (e.key === 'Escape' && document.activeElement === this.elements.searchInput) { this.elements.searchInput.blur(); }