Hide keyboard shortcut hint until keyboard is triggered

src/components/shortcuts.jsx

@@ -95,7 +95,9 @@ function Shortcuts() {
               <span class="menu-grow">
                 <AsyncText>{title}</AsyncText>
               </span>
-              <span class="menu-shortcut">{i + 1}</span>
+              <span class="menu-shortcut hide-until-focus-visible">
+                {i + 1}
+              </span>
             </MenuLink>
           );
         })}

src/index.css

@@ -299,6 +299,13 @@ code {
   color: var(--text-insignificant-color);
 }
 
+.hide-until-focus-visible {
+  display: none;
+}
+:has(:focus-visible) .hide-until-focus-visible {
+  display: initial;
+}
+
 /* KEYFRAMES */
 
 @keyframes appear {