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
• 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).