Modal.astro

---
const {
  triggerId,
  title,
  closeText = 'Close'
} = Astro.props
---

<div class="modal" role="dialog" aria-labelledby={triggerId}>
  <div class="modal__inner">
    <div class="modal__content">
      <h3 tabindex="-1">
        {title}
      </h3>
      <slot>Modal description.</slot>
    </div>
    <div class="modal__close">
      <button>{closeText}</button>
    </div>
  </div>
</div>

<script type="module">
  // variables
  const body = document.querySelector('body')
  const modal = document.querySelector('.modal')
  const modalId = modal.getAttribute('aria-labelledby')
  const modalCloseButton = modal.querySelector('.modal__close button')
  const modalTrigger = document.querySelector(`#${modalId}`)
  
  // functions
  const teleportToRoot = element => {
    element.remove()
    body.appendChild(element)
  }

  const getKeyboardFocusableElements = element => {
    return [...element.querySelectorAll(
      'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
    )]
      .filter(el => !el.hasAttribute('disabled'))
  }

  const trapFocus = event => {
    const focusables = getKeyboardFocusableElements(modal)
    const firstFocusable = focusables[0]
    const lastFocusable = focusables[focusables.length - 1]

    if (document.activeElement === lastFocusable && event.key === 'Tab' && !event.shiftKey) {
      event.preventDefault()
      firstFocusable.focus()
    }

    if (document.activeElement === firstFocusable && event.key === 'Tab' && event.shiftKey) {
      event.preventDefault()
      lastFocusable.focus()
    }
  }

  const openModal = _ => {
    const modalTitle = modal.querySelector('h3')

    modal.classList.add('show')
    body.classList.add('modal-is-active')
    modalTitle.focus()
    document.addEventListener('keydown', trapFocus)

    modal.addEventListener('keydown', event => {
      if (event.key === 'Escape') {
        closeModal()
      }
    })
  }

  const closeModal = _ => {
    modal.classList.remove('show')
    body.classList.remove('modal-is-active')
    modalTrigger.focus({ preventScroll: true })
    document.removeEventListener('keydown', trapFocus)
  }

  // execution
  teleportToRoot(modal)

  modalTrigger.addEventListener('click', openModal)

  modalCloseButton.addEventListener('click', closeModal)

  modal.addEventListener('click', event => { 
    if (!event.target.closest('.modal__content')) {
      closeModal()
    }
  })

  window.closeModal = closeModal
</script>

<style lang="scss" is:global>
  body.modal-is-active > *:not(.modal) {
    filter: blur(6px);
  }

  .modal {
    height: 0;
    position: fixed;
    visibility: hidden;
    z-index: -10;

    &.show {
      display: grid;
      place-items: center;
      visibility: visible;
      height: auto;
      background-color: rgba(0, 0, 0, 0.5);
      inset: 0;
      z-index: 10;

      .modal__inner {
        opacity: 1;
      }
    }
  }

  .modal__inner {
    width: clamp(30ch, 70%, 75ch);
    color: black;
    background-color: white;
    border: 0.5rem solid black;
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  .modal__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 2rem;
  }

  .modal__close button {
    width: 100%;
    border: none;
    background-color: lightgrey;
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
    text-align: right;
    transition: background-color 0.15s ease-in-out;

    &:hover,
    &:focus {
      background-color: grey;
      text-decoration: underline;
    }
  }
</style>