重ねる

モーダルを閉じたときは、開いたボタンへフォーカスを戻します（下のコードは記憶と復帰まで含みます）。

<button type="button" id="open-confirm">記事を削除する</button>

<dialog id="confirm" aria-labelledby="confirm-title">
  <div class="dialog-in">
    <h2 id="confirm-title">この記事を削除しますか</h2>
    <p>削除すると元に戻せません。</p>
    <form method="dialog">
      <button class="button button--ghost" value="cancel">キャンセル</button>
      <button class="button button--danger" value="delete">削除する</button>
    </form>
  </div>
</dialog>

<style>
/* .button の基底と派生（--ghost・--danger）は「出発点のCSS」にある */
dialog { padding: 0; border: 1px solid var(--color-border); }
dialog::backdrop { background: rgb(0 0 0 / 0.4); }
/* 余白は内側の要素に置く。dialog 自体に余白があると、その部分のクリックでも閉じる */
.dialog-in { padding: var(--space-5); display: grid; gap: var(--space-3); }
</style>

<script>
var dialog = document.getElementById("confirm");
var opener = document.getElementById("open-confirm");
var trigger = null;
opener.addEventListener("click", function () {
  trigger = document.activeElement;              // 開く前の位置を記憶する
  dialog.showModal();                            // 焦点の閉じ込めと Esc はブラウザが担う
});
dialog.addEventListener("click", function (event) {
  if (event.target === dialog) dialog.close();   // 外側のクリックで閉じる
});
dialog.addEventListener("close", function () {
  if (trigger) trigger.focus();                  // 開いたボタンへ焦点を戻す
});
</script>