focusing practise popup. closes #1663

src/js/test/practise-words.js

@@ -90,13 +90,18 @@ export function resetBefore() {
   before.numbers = null;
 }
 
-export function showPopup() {
+export function showPopup(focus = false) {
   if ($("#practiseWordsPopupWrapper").hasClass("hidden")) {
     $("#practiseWordsPopupWrapper")
       .stop(true, true)
       .css("opacity", 0)
       .removeClass("hidden")
-      .animate({ opacity: 1 }, 100);
+      .animate({ opacity: 1 }, 100, () => {
+        if (focus) {
+          console.log("focusing");
+          $("#practiseWordsPopup .missed").focus();
+        }
+      });
   }
 }
 

src/js/test/test-ui.js

@@ -1005,10 +1005,9 @@ $(document.body).on("click", "#restartTestButton", () => {
 });
 
 $(document).on("keypress", "#practiseWordsButton", (event) => {
-  // if (event.keyCode == 13) {
-  //   PractiseWords.init();
-  // }
-  PractiseWords.showPopup();
+  if (event.keyCode == 13) {
+    PractiseWords.showPopup(true);
+  }
 });
 
 $(document.body).on("click", "#practiseWordsButton", () => {

src/sass/style.scss

@@ -3585,8 +3585,8 @@ key {
     outline: none;
   }
   &:focus {
-    color: var(--text-color);
-    background: rgba(0, 0, 0, 0.1);
+    color: var(--main-color);
+    background: var(--sub-color);
     outline: none;
   }
 

static/index.html

@@ -126,9 +126,9 @@
           more often or words that you typed much slower will be weighted higher
           and appear more often.
         </div>
-        <div class="button missed">Practice missed</div>
-        <div class="button slow">Practice slow</div>
-        <div class="button both">Practice both</div>
+        <div class="button missed" tabindex="1">Practice missed</div>
+        <div class="button slow" tabindex="1">Practice slow</div>
+        <div class="button both" tabindex="1">Practice both</div>
       </div>
     </div>