refactor: use button instead of div

Reduce css.
Remove keypress event listeners.
Remove tabindex overrides.
Moved sign in tip below the buttons so that tab navigation makes sense.

frontend/src/styles/test.scss

@@ -538,20 +538,27 @@
     outline: none;
   }
 
+  button {
+    padding: 1em 2em;
+  }
+
   .buttons {
     display: grid;
     grid-auto-flow: column;
     gap: 1rem;
     justify-content: center;
-    // grid-area: buttons;
     grid-column: 1/3;
   }
 
   .ssWatermark {
-    // grid-area: ssw;
     grid-column: 1/3;
   }
 
+  #retrySavingResultButton {
+    margin: 0 auto 1rem auto;
+    display: flex;
+  }
+
   #resultWordsHistory,
   #resultReplay {
     // grid-area: wordsHistory;
@@ -888,63 +895,6 @@
   }
 }
 
-#restartTestButton,
-#showWordHistoryButton,
-#saveScreenshotButton,
-#restartTestButtonWithSameWordset,
-#nextTestButton,
-#practiseWordsButton,
-#watchReplayButton,
-#watchVideoAdButton {
-  position: relative;
-  border-radius: var(--roundness);
-  padding: 1rem 2rem;
-  width: min-content;
-  width: -moz-min-content;
-  color: var(--sub-color);
-  transition: 0.125s;
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    color: var(--text-color);
-    outline: none;
-  }
-
-  &:focus {
-    background: var(--text-color);
-    color: var(--bg-color);
-  }
-}
-
-#retrySavingResultButton {
-  position: relative;
-  border-radius: var(--roundness);
-  padding: 1rem 2rem;
-  color: var(--error-color);
-  transition: 0.25s;
-  cursor: pointer;
-  width: -moz-max-content;
-  width: max-content;
-  background: var(--colorful-error-color);
-  color: var(--bg-color);
-  justify-self: center;
-  justify-content: center;
-  margin: 0 auto 1rem auto;
-  -webkit-user-select: none;
-  user-select: none;
-
-  &:hover,
-  &:focus {
-    background: var(--text-color);
-    outline: none;
-  }
-
-  &:focus {
-    background: var(--text-color);
-  }
-}
-
 #showWordHistoryButton {
   opacity: 1;
 }
@@ -961,8 +911,9 @@
 }
 
 #restartTestButton {
-  margin: 0 auto;
-  margin-top: 1rem;
+  margin: 1rem auto 0 auto;
+  display: flex;
+  padding: 1em 2em;
 }
 
 #koInputVisualContainer {

frontend/src/ts/test/practise-words.ts

@@ -202,12 +202,6 @@ $(document).on("keydown", (event) => {
   }
 });
 
-$(document).on("keypress", "#practiseWordsButton", (event) => {
-  if (event.key === "Enter") {
-    showPopup(true);
-  }
-});
-
 $(".pageTest").on("click", "#practiseWordsButton", () => {
   showPopup();
 });

frontend/src/ts/test/replay.ts

@@ -317,12 +317,6 @@ $("#replayWords").on("click", "letter", (event) => {
   loadOldReplay();
 });
 
-$(document).on("keypress", "#watchReplayButton", (event) => {
-  if (event.key === "Enter") {
-    toggleReplayDisplay();
-  }
-});
-
 $(".pageTest").on("click", "#watchReplayButton", () => {
   toggleReplayDisplay();
 });

frontend/src/ts/test/result.ts

@@ -814,7 +814,6 @@ export async function update(
       $("#words").empty();
       ChartController.result.resize();
 
-      $("#result").trigger("focus");
       window.scrollTo({ top: 0 });
       $("#testModesNotice").addClass("hidden");
     },

frontend/src/ts/test/test-logic.ts

@@ -1418,12 +1418,6 @@ $(".pageTest").on("click", "#testModesNotice .textButton.restart", () => {
   restart();
 });
 
-$(document).on("keypress", "#restartTestButton", (event) => {
-  if (event.key === "Enter") {
-    restart();
-  }
-});
-
 $(".pageTest").on("click", "#restartTestButton", () => {
   ManualRestart.set();
   if (TestUI.resultCalculating) return;
@@ -1442,12 +1436,6 @@ $(".pageTest").on("click", "#restartTestButton", () => {
 
 $(".pageTest").on("click", "#retrySavingResultButton", retrySavingResult);
 
-$(document).on("keypress", "#nextTestButton", (event) => {
-  if (event.key === "Enter") {
-    restart();
-  }
-});
-
 $(".pageTest").on("click", "#nextTestButton", () => {
   ManualRestart.set();
   restart();
@@ -1464,18 +1452,6 @@ $(".pageTest").on("click", "#restartTestButtonWithSameWordset", () => {
   });
 });
 
-$(document).on("keypress", "#restartTestButtonWithSameWordset", (event) => {
-  if (Config.mode === "zen") {
-    Notifications.add("Repeat test disabled in zen mode");
-    return;
-  }
-  if (event.key === "Enter") {
-    restart({
-      withSameWordset: true,
-    });
-  }
-});
-
 $(".pageTest").on("click", "#testConfig .mode .textButton", (e) => {
   if (TestUI.testRestarting) return;
   if ($(e.currentTarget).hasClass("active")) return;

frontend/src/ts/test/test-ui.ts

@@ -1217,12 +1217,6 @@ $(".pageTest").on("click", "#saveScreenshotButton", () => {
   screenshot();
 });
 
-$("#saveScreenshotButton").on("keypress", (e) => {
-  if (e.key === "Enter") {
-    screenshot();
-  }
-});
-
 $(".pageTest #copyWordsListButton").on("click", async () => {
   try {
     let words;
@@ -1303,12 +1297,6 @@ $("#wordsInput").on("focusout", () => {
   Caret.hide();
 });
 
-$(document).on("keypress", "#showWordHistoryButton", (event) => {
-  if (event.key === "Enter") {
-    toggleResultWords();
-  }
-});
-
 $(".pageTest").on("click", "#showWordHistoryButton", () => {
   toggleResultWords();
 });

frontend/static/html/pages/test.html

@@ -117,7 +117,6 @@
     <input
       id="wordsInput"
       class=""
-      tabindex="0"
       type="text"
       autocomplete="off"
       autocapitalize="off"
@@ -141,17 +140,15 @@
 
     <div id="keymap" class="hidden"></div>
 
-    <div
+    <button
       id="restartTestButton"
       aria-label="Restart Test"
-      role="button"
       data-balloon-pos="down"
-      class=""
-      tabindex="0"
+      class="text"
       onclick="this.blur();"
     >
       <i class="fas fa-fw fa-redo-alt"></i>
-    </div>
+    </button>
     <div id="largeLiveWpmAndAcc" class="timerMain">
       <div id="liveWpm" class="hidden">123</div>
       <div id="liveAcc" class="hidden">100%%</div>
@@ -172,7 +169,7 @@
     <div id="premidTestMode" class="hidden"></div>
     <div id="premidSecondsLeft" class="hidden"></div>
   </div>
-  <div id="result" tabindex="0" class="hidden">
+  <div id="result" class="hidden">
     <div class="stats">
       <!-- <div class="info">words 10<br>punctuation</div> -->
 
@@ -295,10 +292,6 @@
       <!-- <div class="title">wpm over time</div> -->
       <canvas id="wpmChart"></canvas>
     </div>
-    <div class="loginTip">
-      <a href="/login" tabindex="2" router-link>Sign in</a>
-      to save your result
-    </div>
     <div class="bottom" style="grid-column: 1/3">
       <div id="resultWordsHistory" class="hidden">
         <div class="title">
@@ -351,86 +344,85 @@
           <div id="replayWords" class="words"></div>
         </div>
       </div>
-      <div
+      <button
         id="retrySavingResultButton"
-        class="hidden"
-        tabindex="0"
+        class="danger hidden"
         onclick="this.blur();"
       >
         <i class="fas fa-redo"></i>
         Retry saving result
-      </div>
+      </button>
       <div class="buttons">
-        <div
+        <button
+          class="text"
           id="nextTestButton"
           aria-label="Next test"
           role="button"
           data-balloon-pos="down"
-          tabindex="0"
           onclick="this.blur();"
         >
           <i class="fas fa-fw fa-chevron-right"></i>
-        </div>
-        <div
+        </button>
+        <button
+          class="text"
           id="restartTestButtonWithSameWordset"
           aria-label="Repeat test"
           role="button"
           data-balloon-pos="down"
-          tabindex="0"
           onclick="this.blur();"
         >
           <i class="fas fa-fw fa-sync-alt"></i>
-        </div>
-        <div
+        </button>
+        <button
+          class="text"
           id="practiseWordsButton"
           aria-label="Practice words"
           role="button"
           data-balloon-pos="down"
-          tabindex="0"
           onclick="this.blur();"
         >
           <i class="fas fa-fw fa-exclamation-triangle"></i>
-        </div>
-        <div
+        </button>
+        <button
+          class="text"
           id="showWordHistoryButton"
           aria-label="Toggle words history"
           role="button"
           data-balloon-pos="down"
-          tabindex="0"
           onclick="this.blur();"
         >
           <i class="fas fa-fw fa-align-left"></i>
-        </div>
-        <div
+        </button>
+        <button
+          class="text"
           id="watchReplayButton"
           aria-label="Watch replay"
           role="button"
           data-balloon-pos="down"
-          tabindex="0"
           onclick="this.blur();"
         >
           <i class="fas fa-fw fa-backward"></i>
-        </div>
-        <div
+        </button>
+        <button
+          class="text"
           id="saveScreenshotButton"
           aria-label="Copy screenshot to clipboard"
           role="button"
           data-balloon-pos="down"
-          tabindex="0"
           onclick="this.blur();"
         >
           <i class="far fa-fw fa-image"></i>
-        </div>
-        <div
+        </button>
+        <button
+          class="text"
           id="watchVideoAdButton"
           aria-label="Watch video ad"
           role="button"
           data-balloon-pos="down"
-          tabindex="0"
           onclick="this.blur();"
         >
           <i class="fas fa-fw fa-ad"></i>
-        </div>
+        </button>
       </div>
       <div id="ad-result-wrapper" class="ad advertisement ad-h">
         <div class="iconAndText">
@@ -444,6 +436,10 @@
         <div id="ad-result-small"></div>
       </div>
     </div>
+    <div class="loginTip">
+      <a href="/login" router-link>Sign in</a>
+      to save your result
+    </div>
     <div class="ssWatermark hidden">monkeytype.com</div>
   </div>
   <div></div>