impr: use dialog element to take advantage of focus trapping

monkeytypegame · Feb 28, 2024 · 8e0f124 · 8e0f124
1 parent a88ba61
commit 8e0f124
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
@@ -4,12 +4,12 @@
   </div>
 </div>
 
-<div id="alertsPopupWrapper" class="popupWrapper hidden">
+<dialog id="alertsPopupWrapper" class="popupWrapper hidden">
   <div id="alertsPopup">
-    <div class="button mobileClose">
+    <button class="mobileClose">
       <i class="fas fa-times"></i>
       Close
-    </div>
+    </button>
     <div class="scrollWrapper">
       <div class="accountAlerts">
         <div class="title">
@@ -19,14 +19,14 @@
           </div>
           <div class="right"></div>
         </div>
-        <div class="button claimAll hidden">
+        <button class="claimAll hidden">
           <i class="fas fa-fw fa-gift"></i>
           Claim all
-        </div>
-        <div class="button deleteAll hidden">
+        </button>
+        <button class="deleteAll hidden">
           <i class="fas fa-fw fa-trash"></i>
           Delete all
-        </div>
+        </button>
         <div class="list">
           <div class="nothing">Nothing to show</div>
         </div>
@@ -53,7 +53,7 @@
       </div>
     </div>
   </div>
-</div>
+</dialog>
 
 <div id="simplePopupWrapper" class="popupWrapper hidden">
   <div id="simplePopup" popupId=""></div>

diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
@@ -1,6 +1,9 @@
 .popupWrapper {
   width: 100%;
   height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0;
   background: rgba(0, 0, 0, 0.75);
   position: fixed;
   left: 0;
@@ -10,6 +13,7 @@
   justify-content: center;
   align-items: center;
   padding: 2rem 0;
+  border: none;
   &:focus-visible {
     outline: none;
   }
@@ -1631,7 +1635,7 @@
   padding: 0;
   justify-content: end;
   z-index: 99999999;
-  // padding: 2rem;
+  overflow-x: hidden;
   #alertsPopup {
     background: var(--bg-color);
     width: calc(350px + 2rem);
@@ -1647,7 +1651,8 @@
     border-radius: var(--roundness) 0 0 var(--roundness);
 
     .mobileClose {
-      margin: 0 1rem 2rem 1rem;
+      margin-bottom: 2rem;
+      width: 100%;
       display: none;
     }
 

diff --git a/frontend/src/ts/elements/alerts.ts b/frontend/src/ts/elements/alerts.ts
@@ -12,6 +12,10 @@ import * as Skeleton from "../popups/skeleton";
 
 const wrapperId = "alertsPopupWrapper";
 
+const wrapperDialog = document.querySelector(
+  "#" + wrapperId
+) as HTMLDialogElement;
+
 let accountAlerts: MonkeyTypes.MonkeyMail[] = [];
 let maxMail = 0;
 let mailToMarkRead: string[] = [];
@@ -116,6 +120,7 @@ function hide(): void {
           $("#alertsPopupWrapper").addClass("hidden");
           $("#alertsPopup .notificationHistory .list").empty();
           $("#alertsPopup .psas .list").empty();
+          wrapperDialog.close();
           Skeleton.remove(wrapperId);
         }
       );
@@ -125,6 +130,8 @@ function hide(): void {
 async function show(): Promise<void> {
   Skeleton.append(wrapperId);
   if (!isPopupVisible(wrapperId)) {
+    wrapperDialog.showModal();
+
     $("#alertsPopup").css("marginRight", "-10rem").animate(
       {
         marginRight: 0,