feat(ui): highlight slash keyboard shortcut on header/home search bars#1960
feat(ui): highlight slash keyboard shortcut on header/home search bars#1960aqandrew wants to merge 2 commits intonpmx-dev:mainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
📝 WalkthroughWalkthroughThe pull request replaces textual slash hints in SearchBox and index components with keyboard hint elements ( Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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 |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
app/pages/index.vue (1)
72-91:⚠️ Potential issue | 🟡 MinorHide the slash hint when keyboard shortcuts are disabled.
Line 91 already defers the semantic shortcut to
InputBase, which dropsaria-keyshortcutswhen the user turns shortcuts off. This<kbd>still renders unconditionally, so the homepage can advertise/even though shortcuts are disabled in settings. That diverges fromapp/components/Button/Base.vue:29-73andapp/components/Link/Base.vue:69-132, where the visual hint and ARIA attribute are gated together.Suggested fix
<script setup lang="ts"> import { SHOWCASED_FRAMEWORKS } from '~/utils/frameworks' const { model: searchQuery, flushUpdateUrlQuery } = useGlobalSearch() const isSearchFocused = shallowRef(false) +const keyboardShortcutsEnabled = useKeyboardShortcuts() @@ - <kbd + <kbd + v-if="keyboardShortcutsEnabled" class="absolute inset-is-4 text-fg-subtle font-mono text-lg pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1 rounded" aria-hidden="true" >app/components/Header/SearchBox.vue (1)
41-60:⚠️ Potential issue | 🟡 MinorKeep the header shortcut hint behind the same settings gate.
This
<kbd>is always visible, butInputBaseon Line 60 only exposesaria-keyshortcutswhenuseKeyboardShortcuts()is enabled. If a user disables keyboard shortcuts, the header still shows/, which is inconsistent with the rest of the shortcut affordances and with the input’s ARIA state.Suggested fix
<script setup lang="ts"> withDefaults( defineProps<{ inputClass?: string }>(), @@ const emit = defineEmits(['blur', 'focus']) const route = useRoute() const isSearchFocused = shallowRef(false) +const keyboardShortcutsEnabled = useKeyboardShortcuts() @@ - <kbd + <kbd + v-if="keyboardShortcutsEnabled" class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1 rounded" aria-hidden="true" >
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 097198b2-351e-4288-91ce-07edffead1e5
📒 Files selected for processing (3)
app/components/Header/SearchBox.vueapp/components/Input/Base.vueapp/pages/index.vue
🔗 Linked issue
n/a
🧭 Context
The keyboard shortcut highlighting feature introduced in #440 does not highlight the slash labels in the homepage's/header's search inputs.
Pressing
?now highlights the search inputs' keyboard shortcut hints, in addition to other keyboard shortcut hints.📚 Description
These slash labels are currently
spans. Semantically, they make more sense askbds, since they indicate the key used to focus the search input.I've clarified the slash labels' purpose in the a11y tree accordingly. Now the
kbdelements havearia-hidden="true", and a keyboard shortcut hint is set througharia-keyshortcutson the focusable element itself, similar toBaseLink:npmx.dev/app/components/Link/Base.vue
Line 128 in 58da597
npmx.dev/app/components/Link/Base.vue
Line 108 in 58da597
Demo
Screen.Recording.2026-03-03.at.4.15.07.AM.mov
Screen.Recording.2026-03-03.at.4.18.35.AM.mov
old a11y information
screenshots taken from macOS VoiceOver
The word "slash" was being read aloud when first focusing the input.
new a11y information
"Slash" is now announced as an available shortcut.