refactor: Converting span to kbd tag (#2774)

src/components/ContextMenu.scss

@@ -54,6 +54,7 @@
     .context-menu-option__shortcut {
       justify-self: end;
       opacity: 0.6;
+      font-family: inherit;
       font-size: 0.7rem;
     }
   }

src/components/ContextMenu.tsx

@@ -52,11 +52,11 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
                 onClick={action}
               >
                 <div className="context-menu-option__label">{label}</div>
-                <div className="context-menu-option__shortcut">
+                <kbd className="context-menu-option__shortcut">
                   {shortcutName
                     ? getShortcutFromShortcutName(shortcutName)
                     : ""}
-                </div>
+                </kbd>
               </button>
             </li>
           ))}

src/components/ShortcutsDialog.scss

@@ -29,6 +29,7 @@
     box-sizing: border-box;
     display: flex;
     align-items: center;
+    font-family: inherit;
   }
 
   .ShortcutsDialog-footer {

src/components/ShortcutsDialog.tsx

@@ -82,7 +82,7 @@ Shortcut.defaultProps = {
 };
 
 const ShortcutKey = (props: { children: React.ReactNode }) => (
-  <span className="ShorcutsDialog-key" {...props} />
+  <kbd className="ShorcutsDialog-key" {...props} />
 );
 
 const Footer = () => (