Accessible Modal Component

<dialog id="modal" class="modal" aria-labelledby="modal-title" aria-describedby="modal-body">
  <div class="modal__inner" role="document">
    <header class="modal__header">
      <h2 id="modal-title" class="modal__title">Confirm Action</h2>
      <button class="modal__close" aria-label="Close dialog" autofocus>✕</button>
    </header>
    <div id="modal-body" class="modal__body">
      <p>Are you sure you want to delete this item? This action cannot be undone.</p>
    </div>
    <footer class="modal__footer">
      <button class="btn btn--ghost" data-close>Cancel</button>
      <button class="btn btn--danger">Delete</button>
    </footer>
  </div>
</dialog>

<script>
const modal = document.getElementById('modal');
document.querySelector('[data-open-modal]')?.addEventListener('click', () => modal.showModal());
document.querySelector('.modal__close')?.addEventListener('click', () => modal.close());
document.querySelector('[data-close]')?.addEventListener('click', () => modal.close());
modal.addEventListener('click', e => { if (e.target === modal) modal.close(); });
</script>