Accessible modal dialogs with Stimulus and ARIA

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["container", "dialog"]

  connect() {
    this.previousActiveElement = null
  }

  open() {
    this.previousActiveElement = document.activeElement

    this.containerTarget.classList.remove('hidden')
    document.body.style.overflow = 'hidden'

    // Focus the first focusable element in the modal
    const firstFocusable = this.dialogTarget.querySelector(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    )
    if (firstFocusable) firstFocusable.focus()

    // Trap focus
    document.addEventListener('focusin', this.trapFocus.bind(this))
  }

  close() {
    this.containerTarget.classList.add('hidden')
    document.body.style.overflow = ''

    // Return focus to trigger element
    if (this.previousActiveElement) {
      this.previousActiveElement.focus()
    }

    document.removeEventListener('focusin', this.trapFocus.bind(this))
  }

  trapFocus(event) {
    if (!this.dialogTarget.contains(event.target)) {
      event.preventDefault()
      const firstFocusable = this.dialogTarget.querySelector(
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
      )
      if (firstFocusable) firstFocusable.focus()
    }
  }

  closeOnEscape(event) {
    if (event.key === 'Escape') {
      this.close()
    }
  }

  closeOnBackdrop(event) {
    if (event.target === this.containerTarget) {
      this.close()
    }
  }
}