2554 - Adding cancel button to Send Message flow

app/assets/javascripts/notifyModal.js

@@ -0,0 +1,91 @@
+let activeModal = null;
+let lastFocusedElement = null;
+
+function openModal(modalId) {
+  const wrapper = document.getElementById(modalId);
+  if (!wrapper) return;
+
+  const modal = wrapper.querySelector('.usa-modal, dialog');
+  if (!modal) return;
+
+  lastFocusedElement = document.activeElement;
+
+  wrapper.classList.remove('is-hidden');
+  modal.removeAttribute('aria-hidden');
+  modal.removeAttribute('inert');
+  modal.removeAttribute('hidden');
+  document.body.classList.add('modal-open');
+
+
+  // Set focus to the first focusable element inside modal
+  const focusTarget = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  if (focusTarget) focusTarget.focus();
+
+  modal.addEventListener('keydown', function(e) {
+    if (e.key !== 'Tab') return;
+
+    const focusableElements = modal.querySelectorAll(
+      'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (e.shiftKey && document.activeElement === firstElement) {
+      e.preventDefault();
+      lastElement.focus();
+    } else if (!e.shiftKey && document.activeElement === lastElement) {
+      e.preventDefault();
+      firstElement.focus();
+    }
+  });
+
+  activeModal = wrapper;
+}
+
+function closeModal() {
+  if (!activeModal) return;
+
+  const modal = activeModal.querySelector('.usa-modal, dialog');
+  if (modal) {
+    modal.setAttribute('aria-hidden', 'true');
+    modal.setAttribute('inert', '');
+    modal.setAttribute('hidden', '');
+  }
+
+  activeModal.classList.add('is-hidden');
+  document.body.classList.remove('modal-open');
+
+  if (lastFocusedElement) lastFocusedElement.focus();
+
+  activeModal = null;
+
+}
+
+// Attach open triggers
+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();
+  });
+});
+
+// Escape key closes modal
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape' && activeModal) {
+    closeModal();
+  }
+});
+
+// Optional: click outside modal closes it
+document.addEventListener('click', (e) => {
+  if (activeModal && e.target.classList.contains('usa-modal-overlay')) {
+    closeModal();
+  }
+});

app/assets/javascripts/preventDuplicateFormSubmissions.js

@@ -1,37 +1,39 @@
-(function() {
-
+(function () {
   "use strict";
 
-  let disableSubmitButtons = function(event) {
-
-    var $submitButton = $(this).find(':submit');
-
-    if ($submitButton.data('clicked') == 'true') {
+  const disableSubmitButtons = function (event) {
+    const $submitButton = $(this).find(':submit');
 
+    if ($submitButton.data('clicked') === 'true') {
       event.preventDefault();
+      return;
+    }
 
-    } else {
+    $submitButton.data('clicked', 'true');
 
-      $submitButton.data('clicked', 'true');
+    // Add dot animation for Send/Schedule/Cancel buttons
+    const buttonName = $submitButton.attr('name')?.toLowerCase();
+    if (["send", "schedule", "cancel"].includes(buttonName)) {
+      $submitButton.prop('disabled', true);
 
-      if ($submitButton.is('[name="Send"], [name="Schedule"]')) {
-        $submitButton.prop('disabled', true);
-
-        setTimeout(() => {
-          renableSubmitButton($submitButton);
-        }, 10000);
-      } else {
-        setTimeout(renableSubmitButton($submitButton), 1500);
+      // Inject dot animation span if not already present
+      if ($submitButton.find('.dot-anim').length === 0) {
+        $submitButton.append('<span class="dot-anim" aria-hidden="true"></span>');
       }
+
+      setTimeout(() => {
+        renableSubmitButton($submitButton);
+      }, 10000); // fallback safety
+    } else {
+      setTimeout(renableSubmitButton($submitButton), 1500);
     }
   };
 
-  let renableSubmitButton = $submitButton => () => {
-
+  const renableSubmitButton = ($submitButton) => () => {
     $submitButton.data('clicked', '');
     $submitButton.prop('disabled', false);
+    $submitButton.find('.dot-anim').remove(); // clean up if needed
   };
 
   $('form').on('submit', disableSubmitButtons);
-
 })();