Modal
Radix UI Dialog 기반의 접근성 높은 모달 컴포넌트입니다.
개요
기본 모달
모달 콘텐츠가 여기에 표시됩니다.
설치
사용법
예제
Size
모달은 5가지 크기를 지원합니다: sm, md, lg, xl, full
Small (max-w-md / 28rem)
Medium (max-w-lg / 32rem) - 기본값
Large (max-w-2xl / 42rem)
Extra Large (max-w-4xl / 56rem)
Full (max-w-full)
접근성
WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
- 닫기 버튼: 모든 모달은 오른쪽 상단에 X 닫기 버튼을 기본으로 포함합니다. 포커스 순서는 제목 → 본문 → footer 버튼들 → 닫기 버튼 순서로 이동합니다.
- Focus Management: 모달이 열리면 포커스가 자동으로 모달로 이동하고, 닫히면 원래 요소로 복원됩니다.
- 키보드 네비게이션: Tab/Shift+Tab으로 요소 순환, ESC 키로 닫기가 지원됩니다.
- ARIA 속성:
role="dialog",aria-modal="true"등 필요한 ARIA 속성이 자동으로 적용됩니다. - 포커스 트랩: 모달이 열린 동안 포커스가 모달 내부에만 유지되어 배경 콘텐츠로 이동하지 않습니다.
- 스크린 리더 지원: ModalTitle이 자동으로 모달의 레이블로 연결됩니다.
- 배경 스크롤 방지: 모달이 열리면 배경 스크롤이 자동으로 비활성화됩니다.