모달 대화상자

button  (여는 버튼)  ─────────────── 닫으면 포커스가 여기로 돌아옴
dialog  또는  div[role=dialog][aria-modal=true]
 ├─ aria-labelledby → h2 (제목)          ← 대화상자의 이름
 ├─ aria-describedby → p (설명, 선택)    ← 열릴 때 함께 읽힘
 ├─ 입력 요소들
 └─ 버튼들 (닫기·취소·확인)               ← Tab은 이 안에서만 순환
나머지 페이지 → inert (조작·포커스·탐색 불가)

<button type="button" id="open-subscribe">뉴스레터 구독</button>

<dialog id="subscribe" aria-labelledby="subscribe-title" aria-describedby="subscribe-desc">
  <h2 id="subscribe-title">뉴스레터 구독</h2>
  <p id="subscribe-desc">매주 월요일 아침에 접근성 소식을 보내 드립니다.</p>
  <form method="dialog">
    <label for="subscribe-email">이메일</label>
    <input id="subscribe-email" type="email" autocomplete="email">
    <button value="cancel" formnovalidate>취소</button>
    <button value="ok">구독</button>
  </form>
</dialog>

<script>
  initNativeDialog(
    document.getElementById('open-subscribe'),
    document.getElementById('subscribe'),
    function (value) { if (value === 'ok') { /* 구독 처리 */ } }
  );
</script>

// 네이티브 <dialog>: showModal() 하나로 모달 동작 대부분을 브라우저가 처리합니다.
function initNativeDialog(openBtn, dialog, onClose) {
  openBtn.addEventListener('click', function () {
    dialog.returnValue = '';
    dialog.showModal();     // 바깥 inert + Esc 닫기 + 첫 요소로 포커스 이동
  });
  dialog.addEventListener('close', function () {
    // 최신 브라우저는 닫을 때 연 요소로 포커스를 돌려줍니다. 혹시 모를 경우를 대비한 보완:
    if (!document.activeElement || document.activeElement === document.body) openBtn.focus();
    if (onClose) onClose(dialog.returnValue);   // <form method="dialog"> 버튼의 value
  });
}

<button type="button" id="open-address">주소 변경</button>

<div class="backdrop" id="address-backdrop" hidden>
  <div role="dialog" aria-modal="true" tabindex="-1"
       aria-labelledby="address-title" aria-describedby="address-desc">
    <h2 id="address-title">주소 변경</h2>
    <button type="button" data-close="cancel" aria-label="닫기">×</button>
    <p id="address-desc">배송 받을 새 주소를 입력하세요.</p>
    <label for="zip">우편번호</label>
    <input id="zip" inputmode="numeric" autocomplete="postal-code" data-autofocus>
    <button type="button" data-close="cancel">취소</button>
    <button type="button" data-close="save">저장</button>
  </div>
</div>

<script>
  var modal = createModal(document.getElementById('address-backdrop'), function (result) {
    if (result === 'save') { /* 저장 처리 */ }
  });
  document.getElementById('open-address').addEventListener('click', function (e) {
    modal.open(e.currentTarget);
  });
</script>

// ARIA 모달 대화상자: 역할은 마크업이, 동작은 모두 스크립트가 맡습니다.
var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]),' +
  ' select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';

function createModal(backdrop, onClose) {
  var dialog = backdrop.querySelector('[role="dialog"], [role="alertdialog"]');
  var opener = null;
  var inerted = [];

  function focusables() {
    return Array.prototype.filter.call(dialog.querySelectorAll(FOCUSABLE), function (el) {
      return el.getClientRects().length > 0;          // 화면에 보이는 것만
    });
  }

  // 대화상자 바깥을 inert로: 클릭·포커스·화면낭독기 탐색을 모두 막습니다.
  function setOutsideInert(on) {
    if (!on) {
      inerted.forEach(function (el) { el.inert = false; });
      inerted = [];
      return;
    }
    var node = backdrop;
    while (node.parentElement && node !== document.body) {
      Array.prototype.forEach.call(node.parentElement.children, function (sib) {
        if (sib !== node && !sib.inert && sib.tagName !== 'SCRIPT' && sib.tagName !== 'STYLE') {
          sib.inert = true;
          inerted.push(sib);
        }
      });
      node = node.parentElement;
    }
  }

  function open(trigger) {
    opener = trigger || document.activeElement;       // 닫을 때 돌아갈 곳
    backdrop.hidden = false;
    setOutsideInert(true);
    var first = dialog.querySelector('[data-autofocus]') || focusables()[0] || dialog;
    first.focus();
  }

  function close(result) {
    backdrop.hidden = true;
    setOutsideInert(false);
    if (opener && document.contains(opener)) opener.focus();   // 포커스 복귀
    if (onClose) onClose(result);
  }

  dialog.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {                          // Esc로 닫기
      e.preventDefault();
      e.stopPropagation();
      close('cancel');
      return;
    }
    if (e.key !== 'Tab') return;                       // 포커스 트랩
    var items = focusables();
    if (!items.length) { e.preventDefault(); return; }
    var first = items[0], last = items[items.length - 1];
    var active = document.activeElement;
    if (e.shiftKey && (active === first || active === dialog)) {
      e.preventDefault();
      last.focus();
    } else if (!e.shiftKey && active === last) {
      e.preventDefault();
      first.focus();
    }
  });

  // data-close="값" 버튼은 그 값으로 닫습니다.
  Array.prototype.forEach.call(dialog.querySelectorAll('[data-close]'), function (btn) {
    btn.addEventListener('click', function () { close(btn.getAttribute('data-close')); });
  });

  // 바깥(배경) 클릭으로 닫기 (선택)
  backdrop.addEventListener('mousedown', function (e) {
    if (e.target === backdrop) close('cancel');
  });

  return { open: open, close: close };
}

/* 네이티브 dialog의 배경 */
dialog::backdrop { background: rgb(0 0 0 / .5); }

/* ARIA 방식의 배경과 위치 */
.backdrop { position: fixed; inset: 0; display: grid; place-items: center; background: rgb(0 0 0 / .5); }
.backdrop[hidden] { display: none; }