모든 패턴
Drawer
화면 가장자리에서 슬라이드하여 나타나는 사이드 패널 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
Baseline (React)tsx
Loading...
공통 베이스라인
모든 디자인 시스템에 적용Must5
role="dialog"와 aria-modal="true"
드로어 패널에 role="dialog"와 aria-modal="true"를 설정해야 합니다.
레이블 제공
드로어에 aria-labelledby 또는 aria-label로 레이블을 제공해야 합니다.
포커스 트랩
드로어가 열렸을 때 Tab/Shift+Tab이 드로어 내부에서만 순환해야 합니다.
Escape로 닫기
Escape 키로 드로어를 닫을 수 있어야 합니다.
포커스 관리
드로어 열릴 때 내부 첫 포커스 가능 요소로 포커스 이동, 닫힐 때 트리거로 포커스 복귀해야 합니다.
Should2
배경 inert 처리
드로어가 열려 있을 때 배경 콘텐츠에 inert 속성으로 스크린리더가 배경을 읽지 못하게 하세요.
배경 오버레이 클릭으로 닫기
드로어 외부 오버레이를 클릭하면 닫히도록 구현하세요.
Avoid2
포커스 트랩 없이 배경 포커스 허용
드로어가 열린 상태에서 배경 요소에 Tab으로 이동할 수 있으면 스크린리더 사용자가 경계를 파악하기 어렵습니다.
시각적 닫기 버튼 미제공
모바일 사용자는 Escape 키가 없으므로 항상 시각적 닫기 버튼을 제공하세요.
디자인 시스템별 구현
추가 체크포인트
variant="temporary"로 모달 동작
MUI Drawer의 variant="temporary"는 포커스 트랩과 배경 오버레이를 자동으로 처리합니다.
코드 샘플
MUI Drawertsx
Loading...
구현 노트
- –MUI Drawer variant="temporary"는 Modal 기반으로 포커스 트랩과 Escape 닫기를 자동 처리합니다.
- –aria-labelledby를 드로어 제목 ID와 연결하세요.
- –keepMounted={false}로 설정하면 닫혔을 때 DOM에서 제거됩니다.