🎨 Palette: [UX improvement] Add keyboard shortcut to focus search input - #266
🎨 Palette: [UX improvement] Add keyboard shortcut to focus search input#266mkk2026 wants to merge 1 commit into
Conversation
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. |
📝 WalkthroughWalkthroughThis PR adds keyboard shortcut accessibility to the security dashboard's search input. A journal entry documents the pattern for dynamic ChangesKeyboard Shortcut Accessibility for Search Input
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6466a9d474
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| // Keyboard shortcut handler | ||
| const handleKeyDown = (e: KeyboardEvent) => { | ||
| if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') { |
There was a problem hiding this comment.
The keydown guard currently triggers on e.ctrlKey || e.metaKey, so on macOS both Ctrl+K and Cmd+K focus the search box even though the UI hint and aria-keyshortcuts advertise only Meta+K. This creates a behavior/accessibility mismatch and also suppresses native Ctrl+K text-editing behavior in focused inputs because preventDefault() runs whenever Control is held.
Useful? React with 👍 / 👎.
![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
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.Jules/palette.md:
- Line 27: The journal heading "## 2026-10-27 - Dynamic Keyboard Shortcut
Accessibility" uses a future date; update that header in .Jules/palette.md to a
non-future date (e.g., the PR creation date "2026-05-02" or another past date
that accurately reflects when the entry was written) so repository history
remains chronological; edit the string in the header line to replace
"2026-10-27" with the chosen past date while leaving the rest of the heading
text unchanged.
🪄 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: 513d3611-4447-4d5d-9f76-611cd6b750e9
📒 Files selected for processing (2)
.Jules/palette.mdsrc/app/page.tsx
| **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. | ||
|
|
||
| ## 2026-10-27 - Dynamic Keyboard Shortcut Accessibility |
There was a problem hiding this comment.
Use a non-future date for this journal entry.
Line 27 is dated 2026-10-27, but this PR was created on May 2, 2026. That makes the timeline confusing in repository history.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.Jules/palette.md at line 27, The journal heading "## 2026-10-27 - Dynamic
Keyboard Shortcut Accessibility" uses a future date; update that header in
.Jules/palette.md to a non-future date (e.g., the PR creation date "2026-05-02"
or another past date that accurately reflects when the entry was written) so
repository history remains chronological; edit the string in the header line to
replace "2026-10-27" with the chosen past date while leaving the rest of the
heading text unchanged.
1 participant
💡 What:
Added a dynamic keyboard shortcut (
Cmd+Kon Mac,Ctrl+Kon Windows/Linux) to quickly focus the main search input on the dashboard. Also added a visual<kbd>hint that appears when the input is empty to educate users about the shortcut.🎯 Why:
Searching is one of the primary actions on the dashboard. Requiring users to move their mouse to click the search bar creates friction. Adding a standard keyboard shortcut significantly speeds up the workflow for power users.
📸 Before/After:
Cmd/Ctrl+Kto instantly focus the search field. A small visual hint (⌘KorCtrlK) guides them when the input is empty.♿ Accessibility:
aria-keyshortcutsattribute dynamically depending on the user's OS (Meta+KvsControl+K) to ensure screen readers correctly announce the exact shortcut string expected by the Web Content Accessibility Guidelines.useEffecthook.PR created automatically by Jules for task 15375496995824822650 started by @corebrimtech
Summary by CodeRabbit