From 413c6d72d66efc28a8a5b6ec8adf577f3b62aee5 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 25 Sep 2023 00:13:29 +0100
Subject: [PATCH] refactor: redo the way focus is handled for popup

---
 frontend/src/ts/test/practise-words.ts | 12 ++----------
 frontend/static/html/popups.html       |  2 +-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/frontend/src/ts/test/practise-words.ts b/frontend/src/ts/test/practise-words.ts
index 692a94fa4..c371af37b 100644
--- a/frontend/src/ts/test/practise-words.ts
+++ b/frontend/src/ts/test/practise-words.ts
@@ -140,7 +140,7 @@ export function resetBefore(): void {
   before.customText = null;
 }
 
-export function showPopup(focus = false): void {
+export function showPopup(): void {
   if (Config.mode === "zen") {
     Notifications.add("Practice words is unsupported in zen mode", 0);
     return;
@@ -152,10 +152,7 @@ export function showPopup(focus = false): void {
       .css("opacity", 0)
       .removeClass("hidden")
       .animate({ opacity: 1 }, 100, () => {
-        if (focus) {
-          console.log("focusing");
-          $("#practiseWordsPopup .missed").trigger("focus");
-        }
+        $(`#${wrapperId}`).trigger("focus");
       });
   }
 }
@@ -190,11 +187,6 @@ $("#practiseWordsPopupWrapper .button").on("keypress", (e) => {
   }
 });
 
-$("#practiseWordsPopupWrapper .button.both").on("focusout", (e) => {
-  e.preventDefault();
-  $("#practiseWordsPopup .missed").trigger("focus");
-});
-
 $(document).on("keydown", (event) => {
   if (event.key === "Escape" && isPopupVisible(wrapperId)) {
     hidePopup();
diff --git a/frontend/static/html/popups.html b/frontend/static/html/popups.html
index 9fc9bd73d..b3e00ee0c 100644
--- a/frontend/static/html/popups.html
+++ b/frontend/static/html/popups.html
@@ -264,7 +264,7 @@
   </div>
 </div>
 
-<div id="practiseWordsPopupWrapper" class="popupWrapper hidden">
+<div id="practiseWordsPopupWrapper" class="popupWrapper hidden" tabindex="-1">
   <div id="practiseWordsPopup" action="">
     <div class="title">Practice words</div>
     <div class="text">