Modal Dialog
현재 작업을 중단하고 사용자의 주의를 요구하는 오버레이 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
공통 베이스라인
모든 디자인 시스템에 적용role="dialog" 설정
role="dialog"와 aria-modal="true"를 설정해야 합니다.
aria-labelledby 연결
모달 제목을 aria-labelledby로 dialog에 연결해야 합니다.
포커스 트랩
모달 내부로 포커스를 가두고 외부로 이동하지 않아야 합니다.
열릴 때 포커스 이동
모달 열림 시 첫 번째 포커스 가능 요소 또는 제목으로 포커스를 이동해야 합니다.
ESC 키로 닫기
Escape 키로 모달을 닫을 수 있어야 합니다.
닫힐 때 포커스 복원
모달 닫힘 시 모달을 열었던 트리거 요소로 포커스를 반환해야 합니다.
배경 스크롤 방지
모달 열림 시 배경 콘텐츠 스크롤을 막아 혼란을 방지하세요.
배경 inert 처리
모달 외부 콘텐츠에 inert 속성을 적용해 스크린리더 접근을 차단하세요.
aria-describedby로 설명 추가
모달 본문 설명이 있을 경우 aria-describedby로 연결하세요.
스크롤 가능한 배경 허용 금지
모달 열림 중 배경이 스크롤되면 사용자가 맥락을 잃습니다.
포커스 트랩 없는 구현 금지
Tab 키가 모달 외부로 나가면 시각 장애 사용자가 길을 잃습니다.
추가 체크포인트
MUI Dialog keepMounted 주의
keepMounted prop 사용 시 숨겨진 Dialog가 DOM에 남아 스크린리더에 노출될 수 있습니다.
disablePortal 사용 금지
disablePortal은 포커스 트랩과 inert 처리를 방해합니다.
코드 샘플
구현 노트
- –MUI Dialog는 포커스 트랩을 자동으로 처리합니다.
- –autoFocus prop으로 열림 시 포커스 위치를 제어하세요.
- –TransitionProps.onExited로 닫힘 후 포커스 복원을 처리할 수 있습니다.