🎨 Palette: Add keyboard shortcut hint to global search - #448
Conversation
Added a visual `<kbd>` hint (/) to the global search input and implemented the keyboard event listener to focus the input when `/` or `Cmd+K` is pressed. The shortcut is safely bypassed if the user is already typing in an input field. Also added an `aria-label` to announce the shortcut to screen readers. Co-authored-by: corebrimtech <175357468+corebrimtech@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📝 WalkthroughWalkthroughAdds a global keyboard shortcut ( ChangesGlobal Search Shortcut
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant Document
participant PageComponent
participant SearchInput
User->>Document: presses "/" or Ctrl/Meta+K
Document->>PageComponent: keydown event
PageComponent->>PageComponent: check activeElement is not a form field
PageComponent->>SearchInput: focus()
SearchInput-->>User: shows focused input, hides hint if query non-empty
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/app/page.tsxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/app/page.tsx (1)
106-122: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider adding coverage for the new shortcut behavior.
No tests exercise the
/or Ctrl/Cmd+K focus behavior or the guard against typing in other fields. Given this is a small, isolated, easily-testable interaction, a lightweight test (e.g., with Testing Library firingkeydownevents) would guard against regressions.🤖 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 `@src/app/page.tsx` around lines 106 - 122, Add test coverage for the new keyboard shortcut logic in the page component: the handleKeyDown behavior in page.tsx should be exercised with tests that verify '/' and Ctrl/Cmd+K focus the search input via searchInputRef, and that the guard early-returns when the active element is an INPUT, TEXTAREA, or contentEditable element. Use a lightweight Testing Library keydown test around the page component or the relevant effect so this interaction stays protected from regressions.
🤖 Prompt for all review comments with 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.
Inline comments:
In @.Jules/palette.md:
- Line 26: The journal entry date in palette.md is out of chronological order;
update the heading for the “Added Global Search Shortcut Hints” entry so it
matches the surrounding 2026 entries. Locate the section by its “Added Global
Search Shortcut Hints” title and correct the date text to the intended 2026
value so the timeline remains ordered.
---
Nitpick comments:
In `@src/app/page.tsx`:
- Around line 106-122: Add test coverage for the new keyboard shortcut logic in
the page component: the handleKeyDown behavior in page.tsx should be exercised
with tests that verify '/' and Ctrl/Cmd+K focus the search input via
searchInputRef, and that the guard early-returns when the active element is an
INPUT, TEXTAREA, or contentEditable element. Use a lightweight Testing Library
keydown test around the page component or the relevant effect so this
interaction stays protected from regressions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 8a5911e5-9f1d-496a-a64f-b03633e9ef13
📒 Files selected for processing (2)
.Jules/palette.mdsrc/app/page.tsx
| ## 2026-10-26 - Clearable Search Inputs | ||
| **Learning:** Search inputs without a quick reset mechanism force users to manually delete text, which is tedious on mobile. | ||
| **Action:** Always include a conditional "Clear" button (X icon) inside the input wrapper when text is present, ensuring `aria-label` is set for screen readers. | ||
| ## 2024-05-24 - Added Global Search Shortcut Hints |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Journal entry date is out of chronological order.
This entry is dated 2024-05-24, but it's inserted after entries dated 2026-10-25 and 2026-10-26. Likely a typo for a 2026 date.
📝 Suggested fix
-## 2024-05-24 - Added Global Search Shortcut Hints
+## 2026-10-27 - Added Global Search Shortcut Hints📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ## 2024-05-24 - Added Global Search Shortcut Hints | |
| ## 2026-10-27 - Added Global Search Shortcut Hints |
🤖 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 @.Jules/palette.md at line 26, The journal entry date in palette.md is out of
chronological order; update the heading for the “Added Global Search Shortcut
Hints” entry so it matches the surrounding 2026 entries. Locate the section by
its “Added Global Search Shortcut Hints” title and correct the date text to the
intended 2026 value so the timeline remains ordered.
1 participant
💡 What:
Added a visual
<kbd>hint for the/shortcut to the global search input on the dashboard. The hint automatically hides when the input has a value to reduce visual clutter. Implemented a keyboard event listener that focuses the search bar when/orCtrl/Cmd+Kis pressed.🎯 Why:
To make the global search feature more discoverable and accessible for keyboard power users, allowing them to quickly jump to search without reaching for the mouse.
📸 Before/After:
Before: Search bar only had a placeholder. Users had to manually click it to focus.
After: Search bar displays a small
kbdhint (/) on the right side. Pressing/instantly focuses the input. The hint disappears once the user starts typing.♿ Accessibility:
<kbd>hint is hidden from screen readers (aria-hidden="true") to prevent redundant audio noise.aria-labelwas updated to explicitly announce the shortcut to screen reader users:"Search articles, CVEs, or software (Press '/' to focus)".document.activeElementto ensure it doesn't intercept regular typing if the user is focused on another input, textarea, or contenteditable element.PR created automatically by Jules for task 743285040206422956 started by @corebrimtech
Summary by CodeRabbit
New Features
/orCtrl/Cmd+K.Accessibility