From 8ff0a17f6abdda2fe58a814b8678f7c8b5315677 Mon Sep 17 00:00:00 2001
From: sfisher <scott.fisher@ucop.edu>
Date: Wed, 22 Jan 2025 13:25:35 -0800
Subject: [PATCH] Fixes the login form so that it can be closed in a normal way
 (click outside, esc) and closes if navigating out of it.

---
 dev/includes/login-modal.html       |  4 +-
 dev/js/main2.js                     | 66 +++++++++--------------
 static_src/javascripts/main2.min.js | 81 ++++++++++++++++++-----------
 3 files changed, 79 insertions(+), 72 deletions(-)

diff --git a/dev/includes/login-modal.html b/dev/includes/login-modal.html
index 3da6a7a5..f04dee58 100755
--- a/dev/includes/login-modal.html
+++ b/dev/includes/login-modal.html
@@ -2,7 +2,9 @@
 <div id="js-login-modal" class="login-modal" aria-expanded="false" role="dialog" aria-labelledby="login-modal__title">
 	<div class="login-modal__header">
 		<div id="login-modal__title" class="login-modal__title">Access your account</div>
-		<img id="js-login-modal__close" src="images/icon_cross.svg" alt="close" class="login-modal__close">
+		<button type="button" id="js-login-modal__close" class="login-modal__close" aria-label="Close modal">
+  		<img src="images/icon_cross.svg" alt="close">
+		</button>
 	</div>
 	<form id="js-login-modal__form" action="url-here" class="login-modal__form">
     <div class="login-modal__form-element fcontrol__group-stacked">
diff --git a/dev/js/main2.js b/dev/js/main2.js
index 50129a4d..8d42bda0 100755
--- a/dev/js/main2.js
+++ b/dev/js/main2.js
@@ -59,36 +59,6 @@ $(document).ready(function () {
     $(this).siblings('.fcontrol__text-label-inline').addClass('fcontrol__label-required');
   });
 
-  // ***** Modal Login ***** //
-
-
-/*
-  // Toggle open and closed from login button
-  $('#js-header__loginout-button').click(function () {
-    if ($('#js-login-modal').attr('aria-expanded') == 'false') {
-      $('#js-login-modal').attr('aria-expanded', 'true');
-    } else {
-      $('#js-login-modal').attr('aria-expanded', 'false');
-    }
-    $('#js-login-modal').fadeToggle(200);
-  });
-
-  // Close when close icon is clicked
-
-  $('#js-login-modal__close').click(function (e) {
-    e.preventDefault();
-    $('#js-login-modal').attr('aria-expanded', 'false');
-    $('#js-login-modal').fadeToggle(200);
-  });
-
-  // Close when form is submitted
-
-  $('#js-login-modal__form').submit(function () {
-    $('#js-login-modal').attr('aria-expanded', 'false');
-    $('#js-login-modal').fadeToggle(200);
-  });
-*/
-
 }); // Close $(document).ready(function()
 
 // ***** The "Learn" menu needs more flexibility for keyboard navigation ***** //
@@ -148,14 +118,18 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 
-
 // ***** Modal Login ***** //
 document.addEventListener('DOMContentLoaded', () => {
   const modal = document.getElementById('js-login-modal');
-  const closeButton = document.getElementById('js-login-modal__close');
+  const closeButton = document.getElementById('js-login-modal__close').parentElement;
   const formElements = modal.querySelectorAll('input, button, a');
   const firstFocusable = formElements[0];
   const lastFocusable = formElements[formElements.length - 1];
+  const openButton = document.getElementById('js-header__loginout-button');
+
+  // Ensure aria-expanded is set to false initially
+  modal.setAttribute('aria-expanded', 'false');
+  modal.style.display = 'none';
 
   const openModal = () => {
     modal.setAttribute('aria-expanded', 'true');
@@ -165,13 +139,13 @@ document.addEventListener('DOMContentLoaded', () => {
   };
 
   const closeModal = (event) => {
-    console.log("Closing modal");
     if (event) {
       event.preventDefault();
     }
     modal.setAttribute('aria-expanded', 'false');
     modal.style.display = 'none';
     // modal.classList.remove('open');
+    openButton.focus();
   };
 
   const handleKeydown = (event) => {
@@ -180,33 +154,44 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     if (event.key === 'Tab') {
-      // Manage focus trapping
+      // Allow tabbing outside and close modal if tabbing out
       if (event.shiftKey) {
         // Shift + Tab: focus backwards
         if (document.activeElement === firstFocusable) {
-          event.preventDefault();
-          lastFocusable.focus();
+          closeModal();
         }
       } else {
         // Tab: focus forwards
         if (document.activeElement === lastFocusable) {
-          event.preventDefault();
-          firstFocusable.focus();
+          closeModal();
         }
       }
     }
   };
 
   // Add event listeners
+  // Close modal when clicking outside
+  document.addEventListener('click', (event) => {
+    if (!modal.contains(event.target) && event.target !== openButton &&
+        modal.getAttribute('aria-expanded') === 'true') {
+      closeModal();
+    }
+  });
+
   closeButton.addEventListener('click', closeModal);
+  closeButton.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      closeModal(event);
+    }
+  });
   document.addEventListener('keydown', handleKeydown);
 
-  const openButton = document.getElementById('js-header__loginout-button');
+
   if (openButton) {
     openButton.addEventListener('click', () => {
       const expanded = modal.getAttribute('aria-expanded');
       if (expanded === null || expanded === 'false') {
-        console.log("Opening modal");
         openModal();
       } else {
         closeModal();
@@ -214,3 +199,4 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 });
+
diff --git a/static_src/javascripts/main2.min.js b/static_src/javascripts/main2.min.js
index a0523585..78a299e6 100755
--- a/static_src/javascripts/main2.min.js
+++ b/static_src/javascripts/main2.min.js
@@ -30912,32 +30912,32 @@ $(document).ready(function () {
   // ***** Modal Login ***** //
 
 
-/*
-  // Toggle open and closed from login button
-  $('#js-header__loginout-button').click(function () {
-    if ($('#js-login-modal').attr('aria-expanded') == 'false') {
-      $('#js-login-modal').attr('aria-expanded', 'true');
-    } else {
-      $('#js-login-modal').attr('aria-expanded', 'false');
-    }
-    $('#js-login-modal').fadeToggle(200);
-  });
+  /*
+    // Toggle open and closed from login button
+    $('#js-header__loginout-button').click(function () {
+      if ($('#js-login-modal').attr('aria-expanded') == 'false') {
+        $('#js-login-modal').attr('aria-expanded', 'true');
+      } else {
+        $('#js-login-modal').attr('aria-expanded', 'false');
+      }
+      $('#js-login-modal').fadeToggle(200);
+    });
 
-  // Close when close icon is clicked
+    // Close when close icon is clicked
 
-  $('#js-login-modal__close').click(function (e) {
-    e.preventDefault();
-    $('#js-login-modal').attr('aria-expanded', 'false');
-    $('#js-login-modal').fadeToggle(200);
-  });
+    $('#js-login-modal__close').click(function (e) {
+      e.preventDefault();
+      $('#js-login-modal').attr('aria-expanded', 'false');
+      $('#js-login-modal').fadeToggle(200);
+    });
 
-  // Close when form is submitted
+    // Close when form is submitted
 
-  $('#js-login-modal__form').submit(function () {
-    $('#js-login-modal').attr('aria-expanded', 'false');
-    $('#js-login-modal').fadeToggle(200);
-  });
-*/
+    $('#js-login-modal__form').submit(function () {
+      $('#js-login-modal').attr('aria-expanded', 'false');
+      $('#js-login-modal').fadeToggle(200);
+    });
+  */
 
 }); // Close $(document).ready(function()
 
@@ -30998,14 +30998,18 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 
-
 // ***** Modal Login ***** //
 document.addEventListener('DOMContentLoaded', () => {
   const modal = document.getElementById('js-login-modal');
-  const closeButton = document.getElementById('js-login-modal__close');
+  const closeButton = document.getElementById('js-login-modal__close').parentElement;
   const formElements = modal.querySelectorAll('input, button, a');
   const firstFocusable = formElements[0];
   const lastFocusable = formElements[formElements.length - 1];
+  const openButton = document.getElementById('js-header__loginout-button');
+
+  // Ensure aria-expanded is set to false initially
+  modal.setAttribute('aria-expanded', 'false');
+  modal.style.display = 'none';
 
   const openModal = () => {
     modal.setAttribute('aria-expanded', 'true');
@@ -31022,6 +31026,7 @@ document.addEventListener('DOMContentLoaded', () => {
     modal.setAttribute('aria-expanded', 'false');
     modal.style.display = 'none';
     // modal.classList.remove('open');
+    openButton.focus();
   };
 
   const handleKeydown = (event) => {
@@ -31030,33 +31035,46 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     if (event.key === 'Tab') {
-      // Manage focus trapping
+      // Allow tabbing outside and close modal if tabbing out
       if (event.shiftKey) {
         // Shift + Tab: focus backwards
         if (document.activeElement === firstFocusable) {
-          event.preventDefault();
-          lastFocusable.focus();
+          closeModal();
         }
       } else {
         // Tab: focus forwards
         if (document.activeElement === lastFocusable) {
-          event.preventDefault();
-          firstFocusable.focus();
+          closeModal();
         }
       }
     }
   };
 
   // Add event listeners
+  // Close modal when clicking outside
+  document.addEventListener('click', (event) => {
+    console.log("event target", event.target);
+    console.log("contains event target", modal.contains(event.target))
+    if (!modal.contains(event.target) && event.target !== openButton &&
+        modal.getAttribute('aria-expanded') === 'true') {
+      closeModal();
+    }
+  });
+
   closeButton.addEventListener('click', closeModal);
+  closeButton.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      closeModal(event);
+    }
+  });
   document.addEventListener('keydown', handleKeydown);
 
-  const openButton = document.getElementById('js-header__loginout-button');
+
   if (openButton) {
     openButton.addEventListener('click', () => {
       const expanded = modal.getAttribute('aria-expanded');
       if (expanded === null || expanded === 'false') {
-        console.log("Opening modal");
         openModal();
       } else {
         closeModal();
@@ -31064,3 +31082,4 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 });
+