From 6c63fb14b4b259b8a064299ce72c59ed1246dc7f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 19 Feb 2023 22:07:46 +0800
Subject: [PATCH] Hide keyboard shortcut hint until keyboard is triggered

---
 src/components/shortcuts.jsx | 4 +++-
 src/index.css                | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/shortcuts.jsx b/src/components/shortcuts.jsx
index b7cf35ed..280f75cc 100644
--- a/src/components/shortcuts.jsx
+++ b/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>
           );
         })}
diff --git a/src/index.css b/src/index.css
index 48e6f767..15b128ff 100644
--- a/src/index.css
+++ b/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 {