Use kbd styling for keyboard shortcut hints
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
- Originally background was
Screenshots or screen recordings
Current | Update | Update (menu hover) | Update (dark mode) | Update (menu hover - dark mode) |
---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Michael Le