Accessible Vanilla JavaScript Modal

🎯

User Research Platform

Tools for conducting and analyzing UX research studies.

⚡

Performance Dashboard

Real-time metrics visualization for web applications.

🔐

Authentication Flow

Secure, accessible login and registration system.

⌨️

Focus Trap

Tab key stays within the modal until closed

🔙

Return Focus

Focus returns to trigger button on close

⎋

Escape to Close

Press Escape key to dismiss the modal

📣

ARIA Labels

Screen readers announce modal content properly

          
            
          
          JavaScript Modal Class (Key Methods)
        
          class Modal {
  open(trigger) {
    // Store trigger for focus return
    this.previouslyFocused = trigger;

    // Show modal
    this.modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('modal-open');

    // Setup focus trap & move focus
    this.setupFocusTrap();
    this.firstFocusable?.focus();
  }

  close() {
    this.modal.setAttribute('aria-hidden', 'true');
    document.body.classList.remove('modal-open');

    // Return focus to trigger
    this.previouslyFocused?.focus();
  }
}
        