Accessible Modal Dialog: WCAG-Compliant Exit Modals for WordPress | JAX Media Agency

Step 3: JavaScript Focus Trap for Your Accessible Modal Dialog

The JavaScript implementation handles all interaction logic, focus management, and accessibility features:

<script>
(function() {
  // Get modal elements
  const modal = document.getElementById('exitModal');
  const overlay = document.getElementById('modalOverlay');
  const closeBtn = document.getElementById('modalClose');
  const cancelBtn = document.getElementById('modalCancel');
  const confirmBtn = document.getElementById('modalConfirm');
  
  // Store the link and previous focus
  let currentLink = null;
  let lastFocusedElement = null;

  // Get all focusable elements within the modal
  const getFocusableElements = () => {
    return modal.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
  };

  // Open modal function
  const openModal = (link) => {
    currentLink = link;
    lastFocusedElement = document.activeElement;
    
    modal.classList.add('active');
    overlay.classList.add('active');
    modal.setAttribute('aria-hidden', 'false');
    overlay.setAttribute('aria-hidden', 'false');
    
    // Focus the close button when modal opens
    closeBtn.focus();
    
    // Prevent body scroll
    document.body.style.overflow = 'hidden';
  };

  // Close modal function
  const closeModal = () => {
    modal.classList.remove('active');
    overlay.classList.remove('active');
    modal.setAttribute('aria-hidden', 'true');
    overlay.setAttribute('aria-hidden', 'true');
    
    // Restore body scroll
    document.body.style.overflow = '';
    
    // Return focus to triggering element
    if (lastFocusedElement) {
      lastFocusedElement.focus();
    }
    
    currentLink = null;
  };

  // Trap focus within modal
  const trapFocus = (e) => {
    const focusableElements = getFocusableElements();
    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];

    if (e.key === 'Tab') {
      if (e.shiftKey) {
        // Shift + Tab
        if (document.activeElement === firstElement) {
          e.preventDefault();
          lastElement.focus();
        }
      } else {
        // Tab
        if (document.activeElement === lastElement) {
          e.preventDefault();
          firstElement.focus();
        }
      }
    }

    // Close modal on Escape key
    if (e.key === 'Escape') {
      closeModal();
    }
  };

  // Event listener for external links
  document.addEventListener('click', (e) => {
    const link = e.target.closest('a.external-link');
    if (link) {
      e.preventDefault();
      openModal(link);
    }
  });

  // Event listeners for modal buttons
  closeBtn.addEventListener('click', closeModal);
  cancelBtn.addEventListener('click', closeModal);
  
  confirmBtn.addEventListener('click', () => {
    if (currentLink) {
      window.open(currentLink.href, '_blank');
    }
    closeModal();
  });

  // Close modal when clicking overlay
  overlay.addEventListener('click', closeModal);

  // Trap focus when modal is open
  modal.addEventListener('keydown', trapFocus);
})();
</script>