Updates to the cancel modal

app/assets/javascripts/notifyModal.js

@@ -61,20 +61,20 @@ function closeModal() {
 
 }
 
-// Attach open triggers
-document.querySelectorAll('[data-open-modal]').forEach(btn => {
-  btn.addEventListener('click', () => {
-    const modalId = btn.getAttribute('data-open-modal');
-    openModal(modalId);
+function attachModalTriggers() {
+  document.querySelectorAll('[data-open-modal]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const modalId = btn.getAttribute('data-open-modal');
+      openModal(modalId);
+    });
   });
-});
 
-// Attach close triggers
-document.querySelectorAll('[data-close-modal]').forEach(btn => {
-  btn.addEventListener('click', () => {
-    closeModal();
+  document.querySelectorAll('[data-close-modal]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      closeModal();
+    });
   });
-});
+}
 
 // Escape key closes modal
 document.addEventListener('keydown', (e) => {
@@ -89,3 +89,12 @@ document.addEventListener('click', (e) => {
     closeModal();
   }
 });
+
+document.addEventListener('DOMContentLoaded', () => {
+  attachModalTriggers();
+});
+
+// ✅ Check if we're in a Node.js environment (for Jest) before using `module.exports`
+if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
+  module.exports = { closeModal, openModal, attachModalTriggers };
+}

app/assets/javascripts/preventDuplicateFormSubmissions.js

@@ -21,6 +21,12 @@
         $submitButton.append('<span class="dot-anim" aria-hidden="true"></span>');
       }
 
+      // Disable Cancel button too
+      const $cancelButton = $('button[name]').filter(function () {
+        return $(this).attr('name')?.toLowerCase() === 'cancel';
+      });
+      $cancelButton.prop('disabled', true);
+
       setTimeout(() => {
         renableSubmitButton($submitButton);
       }, 10000); // fallback safety

app/assets/sass/uswds/_main.scss

@@ -352,6 +352,19 @@ h2.recipient-list {
 }
 
 // Button ellipses loading
+.dot-anim {
+  display: inline-block;
+  margin-left: 0; /* remove left margin if it exists */
+  padding-left: 0;
+  font-size: 1em;
+  animation: dots 1s steps(3, end) infinite;
+}
+
+/* Optional: reduce spacing by removing whitespace node */
+button span.dot-anim {
+  margin-left: 0; /* forces no space even if white-space exists */
+}
+
 .dot-anim::after {
   content: '.';
   animation: dotPulse 1.5s steps(3, end) infinite;