From cf855bd48d07983282c27c29253a85ae4121751d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Truite=20S=C3=A9ch=C3=A9e?=
 <66438253+Truiteseche@users.noreply.github.com>
Date: Thu, 4 Jul 2024 13:27:24 +0200
Subject: [PATCH] impr(test config): allow keyboard navigation (@Truiteseche)
 (#5528)

---
 frontend/src/html/pages/test.html             | 96 ++++++++++---------
 frontend/src/styles/test.scss                 | 35 +++----
 .../src/ts/controllers/input-controller.ts    |  2 +-
 frontend/src/ts/elements/modes-notice.ts      | 50 +++++-----
 frontend/src/ts/test/test-config.ts           |  7 ++
 5 files changed, 99 insertions(+), 91 deletions(-)

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index 288f0d062..7a98316ac 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -2,88 +2,94 @@
   <div id="testConfig" class="full-width">
     <div class="row">
       <div class="puncAndNum">
-        <div class="textButton punctuationMode">
+        <button class="textButton punctuationMode">
           <i class="fas fa-fw fa-at"></i>
           punctuation
-        </div>
-        <div class="textButton numbersMode">
+        </button>
+        <button class="textButton numbersMode">
           <i class="fas fa-fw fa-hashtag"></i>
           numbers
-        </div>
+        </button>
       </div>
 
       <div class="spacer leftSpacer"></div>
 
       <div class="mode">
-        <div class="textButton" mode="time">
+        <button class="textButton" mode="time">
           <i class="fas fa-fw fa-clock"></i>
           time
-        </div>
-        <div class="textButton" mode="words">
+        </button>
+        <button class="textButton" mode="words">
           <i class="fas fa-fw fa-font"></i>
           words
-        </div>
-        <div class="textButton" mode="quote">
+        </button>
+        <button class="textButton" mode="quote">
           <i class="fas fa-fw fa-quote-left"></i>
           quote
-        </div>
-        <div class="textButton" mode="zen">
+        </button>
+        <button class="textButton" mode="zen">
           <i class="fas fa-fw fa-mountain"></i>
           zen
-        </div>
-        <div class="textButton" mode="custom">
+        </button>
+        <button class="textButton" mode="custom">
           <i class="fas fa-fw fa-wrench"></i>
           custom
-        </div>
+        </button>
       </div>
 
       <div class="spacer rightSpacer"></div>
 
       <div class="time">
-        <div class="textButton" timeConfig="15"><span>15</span></div>
-        <div class="textButton" timeConfig="30"><span>30</span></div>
-        <div class="textButton" timeConfig="60"><span>60</span></div>
-        <div class="textButton" timeConfig="120"><span>120</span></div>
-        <div class="textButton" timeConfig="custom">
+        <button class="textButton" timeConfig="15"><span>15</span></button>
+        <button class="textButton" timeConfig="30"><span>30</span></button>
+        <button class="textButton" timeConfig="60"><span>60</span></button>
+        <button class="textButton" timeConfig="120"><span>120</span></button>
+        <button class="textButton" timeConfig="custom">
           <i class="fas fa-fw fa-tools"></i>
-        </div>
+        </button>
       </div>
 
       <div class="wordCount">
-        <div class="textButton" wordCount="10"><span>10</span></div>
-        <div class="textButton" wordCount="25"><span>25</span></div>
-        <div class="textButton" wordCount="50"><span>50</span></div>
-        <div class="textButton" wordCount="100"><span>100</span></div>
-        <div class="textButton" wordCount="custom">
+        <button class="textButton" wordCount="10"><span>10</span></button>
+        <button class="textButton" wordCount="25"><span>25</span></button>
+        <button class="textButton" wordCount="50"><span>50</span></button>
+        <button class="textButton" wordCount="100"><span>100</span></button>
+        <button class="textButton" wordCount="custom">
           <i class="fas fa-fw fa-tools"></i>
-        </div>
+        </button>
       </div>
 
       <div class="quoteLength">
-        <div class="textButton" quotelength="-1">all</div>
-        <div class="textButton" quotelength="0">short</div>
-        <div class="textButton" quotelength="1">medium</div>
-        <div class="textButton" quotelength="2">long</div>
-        <div class="textButton" quotelength="3">thicc</div>
-        <div class="textButton favorite hidden" quotelength="-3">
+        <button class="textButton" quotelength="-1">all</button>
+        <button class="textButton" quotelength="0">short</button>
+        <button class="textButton" quotelength="1">medium</button>
+        <button class="textButton" quotelength="2">long</button>
+        <button class="textButton" quotelength="3">thicc</button>
+        <button class="textButton favorite hidden" quotelength="-3">
           <i class="fas fa-heart"></i>
-        </div>
-        <div class="textButton" quotelength="-2">
+        </button>
+        <button class="textButton" quotelength="-2">
           <i class="fas fa-search"></i>
-        </div>
+        </button>
       </div>
 
       <div class="zen">
         <div
           class="textButton"
-          style="width: 0; padding-left: 0; padding-right: 0"
+          style="
+            width: 0;
+            padding-left: 0;
+            padding-right: 0;
+            margin-left: 0;
+            margin-right: 0;
+          "
         >
            
         </div>
       </div>
 
       <div class="customText">
-        <div class="textButton">change</div>
+        <button class="textButton">change</button>
       </div>
     </div>
   </div>
@@ -309,7 +315,7 @@
         <div id="resultWordsHistory" class="hidden">
           <div class="title">
             <span>input history</span>
-            <span
+            <button
               id="copyWordsListButton"
               class="textButton"
               aria-label="Copy words list"
@@ -317,16 +323,16 @@
               style="display: inline-block"
             >
               <i class="fas fa-fw fa-align-left"></i>
-            </span>
-            <span
+            </button>
+            <button
               id="copyMissedWordsListButton"
               class="textButton"
               aria-label="Copy missed words list"
               data-balloon-pos="up"
             >
               <i class="fas fa-fw fa-times"></i>
-            </span>
-            <span
+            </button>
+            <button
               id="toggleBurstHeatmap"
               class="textButton"
               aria-label="Toggle burst heatmap"
@@ -334,7 +340,7 @@
               style="display: inline-block"
             >
               <i class="fas fa-fw fa-fire-alt"></i>
-            </span>
+            </button>
             <div class="heatmapLegend hidden">
               <div class="boxes">
                 <div class="box box0"></div>
@@ -350,7 +356,7 @@
         <div id="resultReplay" class="hidden">
           <div class="title">
             watch replay
-            <span
+            <button
               id="playpauseReplayButton"
               class="textButton"
               aria-label="Start replay"
@@ -358,7 +364,7 @@
               style="display: inline-block"
             >
               <i class="fas fa-play"></i>
-            </span>
+            </button>
             <p id="replayStats">0s</p>
           </div>
           <div id="wordsWrapper">
diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index feee0ce2c..49fc7d91e 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -1027,7 +1027,7 @@
   margin-bottom: 1rem;
   .puncAndNum {
     // transition: 0.25s cubic-bezier(0.37, 0, 0.63, 1);
-    overflow: hidden;
+    // overflow: hidden;
     opacity: 1;
   }
   .row {
@@ -1039,13 +1039,14 @@
   }
   .spacer {
     height: auto;
-    width: 0.25rem;
+    width: 0.5em;
     border-radius: calc(var(--roundness) / 2);
     background: var(--bg-color);
-    margin: 0.5rem 0;
+    margin: 0.75em 0;
+    transition: 250ms;
     &.scrolled {
+      opacity: 0;
       width: 0;
-      margin: auto 0;
     }
   }
 
@@ -1053,10 +1054,9 @@
   .time,
   .customText {
     .textButton {
-      // line-height: 1.4em;
+      align-self: end;
       span {
-        // height: 1.1em;
-        margin-top: 0.12em;
+        line-height: 1.15;
       }
     }
   }
@@ -1074,19 +1074,14 @@
     .textButton {
       padding: var(--verticalPadding) var(--horizontalPadding);
 
-      --double: calc(var(--horizontalPadding) * 2);
-
       &:first-child {
-        padding: var(--verticalPadding) var(--horizontalPadding)
-          var(--verticalPadding) var(--double);
+        margin-left: var(--horizontalPadding);
       }
       &:last-child {
-        padding: var(--verticalPadding) var(--double) var(--verticalPadding)
-          var(--horizontalPadding);
+        margin-right: var(--horizontalPadding);
       }
       &:only-child {
-        padding: var(--verticalPadding) var(--double) var(--verticalPadding)
-          var(--double);
+        margin-inline: var(--horizontalPadding);
       }
     }
   }
@@ -1094,11 +1089,11 @@
   .wordCount,
   .customText,
   .zen,
-  .quoteLength,
+  .quoteLength {
+    justify-content: end;
+  }
   .puncAndNum {
-    // width: 100%;
-    justify-content: center;
-    overflow: hidden;
+    justify-content: start;
   }
   .customText {
     display: grid;
@@ -1176,7 +1171,7 @@
     user-select: none;
 
     .textButton {
-      margin: 0 0.5rem;
+      padding: 0.5em 1em;
       &.noInteraction {
         pointer-events: none;
       }
diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts
index 091544f56..ab14f9930 100644
--- a/frontend/src/ts/controllers/input-controller.ts
+++ b/frontend/src/ts/controllers/input-controller.ts
@@ -927,7 +927,7 @@ $(document).on("keydown", async (event) => {
   if (
     allowTyping &&
     !wordsFocused &&
-    !["Enter", "Tab", ...ModifierKeys].includes(event.key)
+    !["Enter", " ", "Escape", "Tab", ...ModifierKeys].includes(event.key)
   ) {
     TestUI.focusWords();
     if (Config.showOutOfFocusWarning && !event.ctrlKey && !event.metaKey) {
diff --git a/frontend/src/ts/elements/modes-notice.ts b/frontend/src/ts/elements/modes-notice.ts
index 06aeccca0..4456dbc10 100644
--- a/frontend/src/ts/elements/modes-notice.ts
+++ b/frontend/src/ts/elements/modes-notice.ts
@@ -93,32 +93,32 @@ export async function update(): Promise<void> {
 
   if (Config.mode !== "zen") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="languages"><i class="fas fa-globe-americas"></i>${getLanguageDisplayString(
+      `<button class="textButton" commands="languages"><i class="fas fa-globe-americas"></i>${getLanguageDisplayString(
         Config.language,
         Config.mode === "quote"
-      )}</div>`
+      )}</button>`
     );
   }
 
   if (Config.difficulty === "expert") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="difficulty"><i class="fas fa-star-half-alt"></i>expert</div>`
+      `<button class="textButton" commands="difficulty"><i class="fas fa-star-half-alt"></i>expert</button>`
     );
   } else if (Config.difficulty === "master") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="difficulty"><i class="fas fa-star"></i>master</div>`
+      `<button class="textButton" commands="difficulty"><i class="fas fa-star"></i>master</button>`
     );
   }
 
   if (Config.blindMode) {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="blindMode"><i class="fas fa-eye-slash"></i>blind</div>`
+      `<button class="textButton" commands="blindMode"><i class="fas fa-eye-slash"></i>blind</button>`
     );
   }
 
   if (Config.lazyMode) {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="lazyMode"><i class="fas fa-couch"></i>lazy</div>`
+      `<button class="textButton" commands="lazyMode"><i class="fas fa-couch"></i>lazy</button>`
     );
   }
 
@@ -132,7 +132,7 @@ export async function update(): Promise<void> {
     });
 
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="paceCaretMode"><i class="fas fa-tachometer-alt"></i>${
+      `<button class="textButton" commands="paceCaretMode"><i class="fas fa-tachometer-alt"></i>${
         Config.paceCaret === "average"
           ? "average"
           : Config.paceCaret === "pb"
@@ -142,7 +142,7 @@ export async function update(): Promise<void> {
           : Config.paceCaret === "daily"
           ? "daily"
           : "custom"
-      } pace ${speed}</div>`
+      } pace ${speed}</button>`
     );
   }
 
@@ -165,76 +165,76 @@ export async function update(): Promise<void> {
       const text = `${avgWPMText} ${avgAccText}`.trim();
 
       $(".pageTest #testModesNotice").append(
-        `<div class="textButton" commands="showAverage"><i class="fas fa-chart-bar"></i>avg: ${text}</div>`
+        `<button class="textButton" commands="showAverage"><i class="fas fa-chart-bar"></i>avg: ${text}</button>`
       );
     }
   }
 
   if (Config.minWpm !== "off") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="minWpm"><i class="fas fa-bomb"></i>min ${Format.typingSpeed(
+      `<button class="textButton" commands="minWpm"><i class="fas fa-bomb"></i>min ${Format.typingSpeed(
         Config.minWpmCustomSpeed,
         { showDecimalPlaces: false, suffix: ` ${Config.typingSpeedUnit}` }
-      )}</div>`
+      )}</button>`
     );
   }
 
   if (Config.minAcc !== "off") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="minAcc"><i class="fas fa-bomb"></i>min ${Config.minAccCustom}% acc</div>`
+      `<button class="textButton" commands="minAcc"><i class="fas fa-bomb"></i>min ${Config.minAccCustom}% acc</button>`
     );
   }
 
   if (Config.minBurst !== "off") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="minBurst"><i class="fas fa-bomb"></i>min ${Format.typingSpeed(
+      `<button class="textButton" commands="minBurst"><i class="fas fa-bomb"></i>min ${Format.typingSpeed(
         Config.minBurstCustomSpeed,
         { showDecimalPlaces: false }
       )} ${Config.typingSpeedUnit} burst ${
         Config.minBurst === "flex" ? "(flex)" : ""
-      }</div>`
+      }</button>`
     );
   }
 
   if (Config.funbox !== "none") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="funbox"><i class="fas fa-gamepad"></i>${Config.funbox
+      `<button class="textButton" commands="funbox"><i class="fas fa-gamepad"></i>${Config.funbox
         .replace(/_/g, " ")
-        .replace(/#/g, ", ")}</div>`
+        .replace(/#/g, ", ")}</button>`
     );
   }
 
   if (Config.confidenceMode === "on") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="confidenceMode"><i class="fas fa-backspace"></i>confidence</div>`
+      `<button class="textButton" commands="confidenceMode"><i class="fas fa-backspace"></i>confidence</button>`
     );
   }
   if (Config.confidenceMode === "max") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="confidenceMode"><i class="fas fa-backspace"></i>max confidence</div>`
+      `<button class="textButton" commands="confidenceMode"><i class="fas fa-backspace"></i>max confidence</button>`
     );
   }
 
   if (Config.stopOnError !== "off") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="stopOnError"><i class="fas fa-hand-paper"></i>stop on ${Config.stopOnError}</div>`
+      `<button class="textButton" commands="stopOnError"><i class="fas fa-hand-paper"></i>stop on ${Config.stopOnError}</button>`
     );
   }
 
   if (Config.layout !== "default") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="layouts"><i class="fas fa-keyboard"></i>emulating ${Config.layout.replace(
+      `<button class="textButton" commands="layouts"><i class="fas fa-keyboard"></i>emulating ${Config.layout.replace(
         /_/g,
         " "
-      )}</div>`
+      )}</button>`
     );
   }
 
   if (Config.oppositeShiftMode !== "off") {
     $(".pageTest #testModesNotice").append(
-      `<div class="textButton" commands="oppositeShiftMode"><i class="fas fa-exchange-alt"></i>opposite shift${
+      `<button class="textButton" commands="oppositeShiftMode"><i class="fas fa-exchange-alt"></i>opposite shift${
         Config.oppositeShiftMode === "keymap" ? " (keymap)" : ""
-      }</div>`
+      }</button>`
     );
   }
 
@@ -248,10 +248,10 @@ export async function update(): Promise<void> {
 
     if (tagsString !== "") {
       $(".pageTest #testModesNotice").append(
-        `<div class="textButton" commands="tags"><i class="fas fa-tag"></i>${tagsString.substring(
+        `<button class="textButton" commands="tags"><i class="fas fa-tag"></i>${tagsString.substring(
           0,
           tagsString.length - 2
-        )}</div>`
+        )}</button>`
       );
     }
   } catch {}
diff --git a/frontend/src/ts/test/test-config.ts b/frontend/src/ts/test/test-config.ts
index d98a466df..c4014c6f6 100644
--- a/frontend/src/ts/test/test-config.ts
+++ b/frontend/src/ts/test/test-config.ts
@@ -21,6 +21,7 @@ export async function instantUpdate(): Promise<void> {
   $("#testConfig .puncAndNum").css({
     width: 0,
     opacity: 0,
+    visibility: "hidden",
   });
   $("#testConfig .spacer").addClass("scrolled");
   $("#testConfig .time").addClass("hidden");
@@ -33,6 +34,7 @@ export async function instantUpdate(): Promise<void> {
     $("#testConfig .puncAndNum").css({
       width: "unset",
       opacity: 1,
+      visibility: "visible",
     });
     $("#testConfig .leftSpacer").removeClass("scrolled");
     $("#testConfig .rightSpacer").removeClass("scrolled");
@@ -43,6 +45,7 @@ export async function instantUpdate(): Promise<void> {
     $("#testConfig .puncAndNum").css({
       width: "unset",
       opacity: 1,
+      visibility: "visible",
     });
 
     $("#testConfig .leftSpacer").removeClass("scrolled");
@@ -60,6 +63,7 @@ export async function instantUpdate(): Promise<void> {
     $("#testConfig .puncAndNum").css({
       width: "unset",
       opacity: 1,
+      visibility: "visible",
     });
 
     $("#testConfig .leftSpacer").removeClass("scrolled");
@@ -139,6 +143,7 @@ export async function update(
       .css({
         opacity: puncAndNumVisible[current] ? 0 : 1,
         width: previousWidth,
+        visibility: "visible",
       })
       .animate(
         {
@@ -150,6 +155,8 @@ export async function update(
         () => {
           if (currentWidth !== 0) {
             puncAndNumEl.css("width", "unset");
+          } else {
+            puncAndNumEl.css("visibility", "hidden");
           }
         }
       );