Tab-related fixes and popup improvements

The 'toggleAllTabIndices' method was added to prevent the user from tabbing to anything else except for the continue/close buttons on popups. All popup-related functionality was merged into 'togglePopup'.
tomasvana10 · May 23, 2024 · e502b60 · e502b60
1 parent cda26b1
commit e502b60
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 32 deletions.
diff --git a/crossword_puzzle/cword_webapp/static/interaction.js b/crossword_puzzle/cword_webapp/static/interaction.js
@@ -20,6 +20,10 @@ const opMagnitude = { // The scale to which a grid operation is performed
   GRID: "grid",
 }
 const toggleIds = ["ts", "tw", "tc", "tz"];
+const popupData = {
+  ONLOAD: ["onload_popup", "continue_button"],
+  COMPLETION: ["completion_popup", "close_button"],
+}
 
 class Interaction {
   /* Class to handle all forms of interaction with the web app, as well as to
@@ -103,7 +107,7 @@ class Interaction {
     this.doNotSaveGridState = false;
 
     this.applyCookieData(); // Update grid and toggles
-    this.displayOnloadPopup();
+    this.togglePopup("onload_popup");
 
     // This flag was initially toggled to true, as by default, the toggles are
     // automatically turned off, thus overriding the toggle's cookies. It should
@@ -785,7 +789,7 @@ class Interaction {
       Interaction.sleep(1).then(() => {
         // Allow the input the user just made to be shown by the DOM
         this.handleEscapePress(null);
-        this.displayCompletionPopup();
+        this.togglePopup("completion_popup");
         this.jazz.play();
       });
     }
@@ -1256,41 +1260,36 @@ class Interaction {
     this.currentDropdown = id;
   }
 
-  displayOnloadPopup() {
-    this.onloadPopupToggled = true;
-
-    Interaction.sleep(200).then(() => {
-      document.getElementById("blur").classList.toggle("active");
-      document.getElementById("onload_popup").classList.toggle("active");
-      Interaction.sleep(301).then(() => {
-        document
-          .getElementsByClassName("continue_button")[0]
-          .focus({ focusVisible: true });
-      });
-    });
-  }
+  togglePopup(popupClass) {
+    let state;
+    let buttonClass =
+      popupClass === popupData.COMPLETION[0]
+        ? popupData.COMPLETION[1]
+        : popupData.ONLOAD[1];
+    if (popupClass === popupData.COMPLETION[0]) {
+      this.completionPopupToggled = !this.completionPopupToggled;
+      state = this.completionPopupToggled;
+    } else if (popupClass === popupData.ONLOAD[0]) {
+      this.onloadPopupToggled = !this.onloadPopupToggled;
+      state = this.onloadPopupToggled;
+    }
 
-  displayCompletionPopup() {
-    this.completionPopupToggled = !this.completionPopupToggled;
     document.getElementById("blur").classList.toggle("active");
-    document.getElementById("completion_popup").classList.toggle("active");
-    if (this.completionPopupToggled) {
-      // Focus the close button
+    document.getElementById(popupClass).classList.toggle("active");
+    if (state) {
+      Interaction.toggleAllTabIndices(false);
+
       Interaction.sleep(501).then(
         () =>
           document
-            .getElementsByClassName("close_button")[0]
+            .getElementsByClassName(buttonClass)[0]
             .focus({ focusVisible: true }) // Ensure the user can see the focus
       );
+    } else {
+      Interaction.toggleAllTabIndices(true);
     }
   }
 
-  closeOnloadPopup() {
-    this.onloadPopupToggled = false;
-    document.getElementById("blur").classList.toggle("active");
-    document.getElementById("onload_popup").classList.toggle("active");
-  }
-
   preventZoomIfRequired(event) {
     /* Prevent the user from zooming if they do not have the "click to zoom"
     button toggled on. This must be handled as the zoom functions from zoomooz.js
@@ -1321,6 +1320,12 @@ class Interaction {
     }
   }
 
+  static toggleAllTabIndices(mode) {
+    document.querySelectorAll(`[tabindex="${mode ? "-1": "0"}"]:not(.non_empty_cell):not(.right_side)`).forEach(element => {
+      element.tabIndex = mode ? "0" : "-1";
+    });
+  }
+
   static getDefByNumber(num, andClick = false) {
     let def = document.querySelector(`[data-num="${num}"`);
     if (andClick) {

diff --git a/crossword_puzzle/cword_webapp/static/interaction.min.js b/crossword_puzzle/cword_webapp/static/interaction.min.js
diff --git a/crossword_puzzle/cword_webapp/templates/index.html b/crossword_puzzle/cword_webapp/templates/index.html
@@ -117,7 +117,6 @@
               {% else %} {# This cell will have no characters #}
               <div
                 class="empty_cell"
-                tabindex="-1"
                 data-row="{{ row }}"
                 data-column="{{ column }}"
                 data-value="None"></div>
@@ -129,7 +128,7 @@
         </div>
       </div>
 
-      <div class="right_side">
+      <div class="right_side" tabindex="-1">
         <div class="definitions">
           {# Compound button #}
           <div class="compound">
@@ -354,7 +353,7 @@ <h2 class="heading">{{ _('Crossword Puzzle - Game') }}</h2>
       <button
         type="button"
         class="continue_button"
-        onclick="interaction.closeOnloadPopup()">
+        onclick="interaction.togglePopup('onload_popup')">
         {{ _('Continue') }}
       </button>
     </div>
@@ -365,7 +364,7 @@ <h2 class="heading">{{ _('You completed the crossword!') }}</h2>
       <button
         type="button"
         class="close_button"
-        onclick="interaction.displayCompletionPopup()">
+        onclick="interaction.togglePopup('completion_popup')">
         {{ _('Close') }}
       </button>
     </div>