Increase the visibility of the keyboard shortcut for Global Search
Problem to solve
The discovery of the keyboard shortcut for Global Search field in the top navbar is pretty low, without the user opening the shortcut modal from within the Help menu. There may be opportunities to increase awareness of this to aid users who prefer using the keyboard more in their work.
In addition, this was brought up as an experience recommendation based on a recent UX Scorecard (https://gitlab.com/gitlab-org/gitlab-design/-/issues/1679).
Proposal
Add a kbd
element in the search field as an affordance to users on how to focus the search field with the /
keyboard shortcut.
Solution
-
Show/hide the kbd element in the search field based on different states. - Show the
kbd
element by default - Hide the
kbd
element when the field is focused - Show the
kbd
element when text has been entered, but the focus has been moved away from the field
- Show the
-
Utilize the kbd.flat style that already exists in our codebase, modifying on top of this for specific styles for this instance. -
When text has been entered in the search field, but the search field is not in focus, hide the ❌ (clear) icon and instead show the shortcut element. -
Add styles to account for the various themes that may be used by users in their preferences (color variables can be found in the design).
Edited by Nick Brandt