🎨 Palette: Add keyboard shortcut hint and navigation for global search

[mkk2026]

What

Added a global / keyboard shortcut to focus the main search input, along with a visual <kbd> hint for users.

Why

Improves keyboard navigation and makes the application more efficient for power users who want to quickly filter security articles without reaching for their mouse.

Before/After

Before: Users had to click the search input manually.
After: Users can press / to immediately focus the search bar. A / hint is shown inside the input when empty.

Accessibility

• Ensures the keyboard shortcut is disabled if the user is already typing in an input, textarea, or contenteditable element.
• Hidden the visual <kbd> hint from screen readers using aria-hidden="true" to prevent redundant noise, as the input's aria-label explicitly announces the shortcut.

---

PR created automatically by Jules for task 15524788915620540244 started by @corebrimtech

Summary by CodeRabbit

• New Features

  • Added a global / keyboard shortcut to quickly focus the search field.
  • Displayed a small shortcut hint in the search area when no query is entered.

• Accessibility

  • Improved screen reader support by announcing the shortcut through the search input label and hiding the visual hint from assistive technologies.
  • Prevented the shortcut from triggering while typing in text fields or other editable areas.

[google-labs-jules]

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a global "/" keyboard shortcut to focus the search input in the page component, guarding against interference with active typing, and updates the search input's ref, aria-label, and visual hint. Includes a journal note documenting related accessibility considerations.

Changes

Global Search Shortcut

Layer / File(s)	Summary
Keyboard shortcut handler and input wiring src/app/page.tsx	Adds useRef-based searchInputRef, a document keydown listener for "/" that focuses the search input unless typing in an editable element, and updates the input's ref, aria-label, and visual "/" hint.
Accessibility journal notes .Jules/palette.md	Documents accessibility considerations for the shortcut, such as checking document.activeElement and hiding the <kbd> hint from screen readers via aria-hidden.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• mkk2026/Security.News.Scraper#5: Both PRs modify the search input's aria-label and accessibility attributes in src/app/page.tsx.

Poem

A slash key hops, a search takes flight,
No more clicking, focus just right! 🐰
Unless you're typing, then I stay still,
Screen readers hushed by aria-hidden's will.
Hop, hop, hooray for shortcuts today!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the PR’s main change: adding a global search keyboard shortcut with a visible hint.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette/keyboard-shortcut-15524788915620540244

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/app/page.tsx

ESLint 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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

src/app/page.tsx (1)

56-75: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low value

searchInputRef should reach the underlying <input> correctly under React 19.

The shared Input component (src/components/ui/input.tsx) is a plain that spreads received props without forwardRef. Normally that would break ref forwarding, but since the project is on React 19.0.0, ref is passed as a regular prop for function components and captured in the rest-spread ...props, then forwarded onto the native <input> — no forwardRef needed. This is a documented React 19 behavior change, so the ref/focus wiring here should work as intended.

Separately, consider guarding against modifier-key combinations: e.key === '/' fires even when ctrlKey/metaKey is held (e.g., some browsers/extensions bind Ctrl+/ or Cmd+/ to other actions), and this handler will call preventDefault() unconditionally, potentially hijacking those combos.

💡 Optional guard for modifier keys

     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === '/') {
+      if (e.key === '/' && !e.ctrlKey && !e.metaKey) {

🤖 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 56 - 75, The keyboard shortcut handler in
page.tsx is too aggressive because handleKeyDown calls preventDefault() for
e.key === '/' even when modifier keys are pressed. Update the useEffect listener
in page.tsx to ignore combinations like Ctrl+/ and Cmd+/ by checking modifier
flags before focusing searchInputRef, while keeping the existing behavior for
plain '/'.

🤖 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.

Nitpick comments:
In `@src/app/page.tsx`:
- Around line 56-75: The keyboard shortcut handler in page.tsx is too aggressive
because handleKeyDown calls preventDefault() for e.key === '/' even when
modifier keys are pressed. Update the useEffect listener in page.tsx to ignore
combinations like Ctrl+/ and Cmd+/ by checking modifier flags before focusing
searchInputRef, while keeping the existing behavior for plain '/'.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 88f84348-c7e9-4de3-bf9f-fcc516c76514

📥 Commits

Reviewing files that changed from the base of the PR and between 558fb10 and 3e58b61.

📒 Files selected for processing (2)

• .Jules/palette.md
• src/app/page.tsx