Accessible modal with <dialog>

<button id="open">Delete project</button>

<dialog id="confirm" aria-labelledby="confirm-title">
  <form method="dialog">
    <h2 id="confirm-title">Delete this project?</h2>
    <p>This cannot be undone.</p>
    <menu>
      <button value="cancel">Cancel</button>
      <button value="delete">Delete</button>
    </menu>
  </form>
</dialog>

<style>
  dialog::backdrop { background: rgb(0 0 0 / .5); }
  dialog { border: 0; border-radius: 12px; padding: 20px; }
</style>
<script>
  const dialog = document.getElementById("confirm");
  document.getElementById("open").onclick = () => dialog.showModal();
  dialog.addEventListener("close", () => console.log("choice:", dialog.returnValue));
</script>