화면 가장자리에서 슬라이드하여 나타나는 사이드 패널 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
role="dialog"와 aria-modal="true"
드로어 패널에 role="dialog"와 aria-modal="true"를 설정해야 합니다.
레이블 제공
드로어에 aria-labelledby 또는 aria-label로 레이블을 제공해야 합니다.
포커스 트랩
드로어가 열렸을 때 Tab/Shift+Tab이 드로어 내부에서만 순환해야 합니다.
Escape로 닫기
Escape 키로 드로어를 닫을 수 있어야 합니다.
포커스 관리
드로어 열릴 때 내부 첫 포커스 가능 요소로 포커스 이동, 닫힐 때 트리거로 포커스 복귀해야 합니다.
배경 inert 처리
드로어가 열려 있을 때 배경 콘텐츠에 inert 속성으로 스크린리더가 배경을 읽지 못하게 하세요.
배경 오버레이 클릭으로 닫기
드로어 외부 오버레이를 클릭하면 닫히도록 구현하세요.
포커스 트랩 없이 배경 포커스 허용
드로어가 열린 상태에서 배경 요소에 Tab으로 이동할 수 있으면 스크린리더 사용자가 경계를 파악하기 어렵습니다.
시각적 닫기 버튼 미제공
모바일 사용자는 Escape 키가 없으므로 항상 시각적 닫기 버튼을 제공하세요.
variant="temporary"로 모달 동작
MUI Drawer의 variant="temporary"는 포커스 트랩과 배경 오버레이를 자동으로 처리합니다.