Skip to content

Use kbd styling for keyboard shortcut hints

Michael Le requested to merge mle/keyboard-shortcut-menu-style into master

What does this MR do and why?

Wrap keyboard shortcuts of ? in a <kbd> element so that it can be styled properly and semantically represents the content better.

What changed?

  • Changed the container of the ? from <span> to <kbd>
    • Removed unused styles associated with the span tag
  • Added a new CSS style to <kbd> for a flat look that would be used in product instead of the existing styling used for the list of keyboard shortcuts.
    • kbd.flat is the new style
  • Element background is using $gray-100 with a border
    • Originally background was $gray-50 based on <code> element

Screenshots or screen recordings

Current Update Update (menu hover) Update (dark mode) Update (menu hover - dark mode)
image image image image image

These are strongly recommended to assist reviewers and reduce the time to merge your change.

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Michael Le

Merge request reports