Make search shortcuts layout-independent

[Vonavy]

Add event.code check in addition to event.key to work with any keyboard layout.

This is mostly relevant for other languages, which require switching to English to use shortcuts.

Summary by CodeRabbit

• Bug Fixes
  • Improved reliability of keyboard shortcuts for opening search: “/”, “Cmd/Ctrl+K”, and “Alt+Shift+F” are now detected more consistently across keyboards and browsers.
  • Preserves existing behavior and safeguards (e.g., avoids activating in form fields) while reducing missed triggers from varied key mappings.

[coderabbitai]

Walkthrough

Updates keyboard shortcut detection in resources/skins.citizen.scripts/search.js to use event.code for Slash/KeyK/KeyF checks while retaining event.key checks, preserving existing early-return and non-form-field logic; search UI behavior remains unchanged.

Changes

Cohort / File(s)	Summary
Search keyboard handling resources/skins.citizen.scripts/search.js	Replace key-based detection with code-based detection in bindOpenOnSlash: use event.code === 'Slash' for /, event.code === 'KeyK' with ctrl/meta for Ctrl/Cmd+K, and event.code === 'KeyF' with alt+shift for Alt+Shift+F; keep existing control flow, preventDefault, and target checks; no API signature changes.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant D as Document
  participant H as Key Handler (bindOpenOnSlash)
  participant S as Search UI

  U->>D: Keydown
  D->>H: Dispatch event
  rect rgba(230,240,255,0.5)
    note over H: Ensure target is not input/textarea/contentEditable
    H->>H: Check event.code=='Slash' OR event.key=='/'
    H->>H: Check (ctrl/meta) AND (event.code=='KeyK' OR event.key.toLowerCase()=='k')
    H->>H: Check (alt+shift) AND (event.code=='KeyF' OR event.key.toLowerCase()=='f')
  end
  alt Shortcut matched
    H->>S: event.preventDefault() + open search UI
  else No match or disallowed target
    H-->>D: return (no action)
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I tap-tap keys with whiskered flair,
Slash, K, and F dance through the air—
Codes and keys now both align,
The search pops up, oh how divine!
A hop, a skip, a focused stare,
I find my carrots everywhere. 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "Make search shortcuts layout-independent" is directly and clearly related to the main change in the changeset. The PR replaces event.key-based detection with event.code-based detection to support any keyboard layout, which is precisely what the title describes. The title is concise (4 words, 40 characters), avoids vague terminology, and accurately conveys the primary objective stated in the PR description: to enable search shortcuts to work regardless of keyboard layout, particularly benefiting users with non-English keyboard layouts.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7c1474a and fc91ba9.

📒 Files selected for processing (1)

• resources/skins.citizen.scripts/search.js (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

resources/skins.citizen.scripts/search.js (2)

resources/skins.citizen.commandPalette/composables/useActionNavigation.js (1)

• handleActionButtonKeydown (67-124)

resources/skins.citizen.search/typeahead.js (2)

• () => { (292-294)
• typeaheadInputElement (238-255)

🔇 Additional comments (1)

resources/skins.citizen.scripts/search.js (1)

129-135: LGTM! Layout-independent keyboard shortcuts correctly implemented.

The shift from event.key to event.code ensures shortcuts work regardless of keyboard layout. Users with non-English layouts (Cyrillic, Asian, etc.) can now use these shortcuts without switching to English. The physical key position checks (Slash, KeyK, KeyF) combined with modifier key detection are the correct approach.

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

resources/skins.citizen.scripts/search.js (1)

125-150: Optional: Consider applying this pattern to other keyboard handlers.

The codebase has other keyboard event handlers (e.g., useActionNavigation.js) that use only event.key without event.code. For consistency and improved layout independence, consider applying this dual-check pattern to other keyboard shortcuts in the codebase.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 70181e4 and 7c1474a.

📒 Files selected for processing (1)

• resources/skins.citizen.scripts/search.js (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

resources/skins.citizen.scripts/search.js (1)

resources/skins.citizen.commandPalette/composables/useActionNavigation.js (1)

• handleActionButtonKeydown (67-124)

🔇 Additional comments (3)

resources/skins.citizen.scripts/search.js (3)

129-129: Excellent improvement for keyboard layout independence!

Adding event.code === 'Slash' alongside event.key === '/' ensures the shortcut works across different keyboard layouts. Users can now trigger search by either:

• Pressing the physical key that produces "/" on QWERTY layouts
• Typing the "/" character on any layout

---

132-132: Correct implementation for Ctrl/Cmd+K shortcut.

The dual check for 'KeyK' and 'k' ensures this shortcut works reliably across keyboard layouts while maintaining backward compatibility.

---

136-136: Consistent layout-independent implementation for Alt+Shift+F.

The change correctly applies the same pattern as the other shortcuts, ensuring MediaWiki's standard search shortcut works across all keyboard layouts.

Please verify the shortcuts work correctly on different keyboard layouts (e.g., AZERTY, QWERTZ) to ensure the physical key positions and character inputs both trigger the expected behavior.