모달 팝업에서 초점이 유출되는 이유: aria-modal="true"와 포커스 트랩(Focus Trap) 구현 기법

수정 전 (결함: 단순 aria-modal 선언)

// 결함 코드: 포커스 이동 리스너 없음
function openModal() {
  const modal = document.getElementById('settings-modal');
  modal.hidden = false;
  // 실패: 초기 초점 지정 누락
  // 실패: Tab 키 순환 제어 없음 -> 배경으로 유출
  // 실패: 닫힘 시 opener 복원 없음
}

수정 후 (6단계 포커스 트랩 완비)

// 정상 코드: 6단계 포커스 트랩 완성
let openerElement: HTMLElement;

function openSettingsModal() {
  // 1. 직전 활성 요소(Opener) 참조 저장
  openerElement = document.activeElement as HTMLElement;
  
  const modal = document.getElementById('settings-modal')!;
  const mainApp = document.getElementById('app-main')!;
  
  modal.hidden = false;
  // 2. 배경 비활성화 & 스크롤 잠금
  mainApp.setAttribute('inert', '');
  document.body.style.overflow = 'hidden';
  
  // 3. 모달 내부 첫 번째 조작 요소로 초점 이동
  const focusables = modal.querySelectorAll<HTMLElement>(
    'input, button, [tabindex]:not([tabindex="-1"])'
  );
  const firstEl = focusables[0];
  const lastEl = focusables[focusables.length - 1];
  firstEl?.focus();
  
  // 4. Tab 순환 및 Escape 닫기 키보드 이벤트
  modal.onkeydown = (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
      closeSettingsModal();
      return;
    }
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === firstEl) {
        e.preventDefault();
        lastEl.focus(); // 역방향 순환
      } else if (!e.shiftKey && document.activeElement === lastEl) {
        e.preventDefault();
        firstEl.focus(); // 순방향 순환
      }
    }
  };
}

function closeSettingsModal() {
  const modal = document.getElementById('settings-modal')!;
  const mainApp = document.getElementById('app-main')!;
  
  modal.hidden = true;
  modal.onkeydown = () => {};
  
  // 5. 배경 비활성화 해제 & 스크롤 복원
  mainApp.removeAttribute('inert');
  document.body.style.overflow = '';
  
  // 6. 직전 Opener 버튼으로 초점 복원
  openerElement?.focus();
}