From 41aa5c61e216c2ab580a5ccb4ba31a0325747644 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Fri, 17 Nov 2023 15:35:44 +0000
Subject: [PATCH] refactor: fix accessibility of edit profile button

done by converting the popup to a form
converting class button to a button type submit
listening to form submit
---
 frontend/src/ts/popups/edit-profile-popup.ts | 4 +++-
 frontend/static/html/popups.html             | 8 ++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/ts/popups/edit-profile-popup.ts b/frontend/src/ts/popups/edit-profile-popup.ts
index b9b795e54..ba4c7cd5f 100644
--- a/frontend/src/ts/popups/edit-profile-popup.ts
+++ b/frontend/src/ts/popups/edit-profile-popup.ts
@@ -29,6 +29,7 @@ export function show(callbackOnHide: () => void): void {
       .removeClass("hidden")
       .animate({ opacity: 1 }, 125, () => {
         hydrateInputs();
+        $("#editProfilePopupWrapper").trigger("focus");
       });
   }
 }
@@ -189,7 +190,8 @@ $("#editProfilePopupWrapper").on("mousedown", (e) => {
   }
 });
 
-$("#editProfilePopupWrapper .edit-profile-submit").on("click", async () => {
+$("#editProfilePopupWrapper #editProfilePopup").on("submit", async (e) => {
+  e.preventDefault();
   await updateProfile();
 });
 
diff --git a/frontend/static/html/popups.html b/frontend/static/html/popups.html
index a95d6f42e..0f00da846 100644
--- a/frontend/static/html/popups.html
+++ b/frontend/static/html/popups.html
@@ -1126,8 +1126,8 @@
   </div>
 </div>
 
-<div id="editProfilePopupWrapper" class="popupWrapper hidden">
-  <div id="editProfilePopup">
+<div id="editProfilePopupWrapper" class="popupWrapper hidden" tabindex="-1">
+  <form id="editProfilePopup">
     <div class="title">Edit Profile</div>
     <div>
       <label>avatar</label>
@@ -1166,6 +1166,6 @@
       <label>badge</label>
       <div class="badgeSelectionContainer"></div>
     </div>
-    <div class="button edit-profile-submit">save</div>
-  </div>
+    <button class="edit-profile-submit" type="submit">save</button>
+  </form>
 </div>