기본 코드 예시
공통 베이스라인
트리거에 aria-expanded 설정
팝오버를 여는 트리거 버튼에 aria-expanded로 열림/닫힘 상태를 표시해야 합니다.
aria-haspopup 또는 aria-controls
트리거에 aria-haspopup="dialog"를 추가하거나 aria-controls로 팝오버 패널 ID를 참조해야 합니다.
포커스 관리
팝오버 열릴 때 첫 번째 포커스 가능한 요소로 포커스 이동, 닫힐 때 트리거로 포커스 복귀해야 합니다.
Escape로 닫기
팝오버가 열려 있을 때 Escape 키로 닫을 수 있어야 합니다.
role="dialog"와 aria-label
대화형 콘텐츠를 포함하는 팝오버에는 role="dialog"와 aria-label 또는 aria-labelledby를 제공하세요.
배경 클릭으로 닫기
팝오버 외부 영역을 클릭하면 닫히도록 구현하세요.
포커스 트랩
대화형 콘텐츠가 있는 팝오버는 Tab/Shift+Tab이 팝오버 내부에서만 순환하도록 구현하세요.
hover로만 열기
hover로만 팝오버를 열면 키보드 사용자와 터치 사용자가 접근할 수 없습니다.
팝오버에만 중요한 정보 배치
팝오버는 보조 정보용입니다. 필수 액션은 팝오버 없이도 접근할 수 있어야 합니다.
디자인 시스템별 구현
추가 체크포인트
aria-describedby로 트리거와 팝오버 연결
팝오버가 열릴 때 트리거 버튼에 aria-describedby={id}를 설정하고 Popover에 동일한 id를 부여해 스크린리더가 연결 관계를 파악하도록 하세요.
팝오버 내 포커스 관리는 직접 구현
MUI Popover는 Modal과 달리 포커스 트랩을 제공하지 않습니다. 대화형 콘텐츠가 있다면 열릴 때 포커스를 팝오버 내부로 이동하세요.
코드 샘플
구현 노트
- –MUI Popover는 Escape 키와 배경 클릭으로 자동으로 닫히며 트리거로 포커스가 복원됩니다.
- –aria-describedby는 팝오버가 열릴 때만 설정(open ? id : undefined)하여 닫혔을 때 불필요한 참조를 방지하세요.
- –대화형 콘텐츠를 포함한 팝오버는 role="dialog"와 aria-label을 Popover 내부 컨테이너에 추가하세요.
- –MUI Popover는 포커스 트랩을 제공하지 않으므로 필요한 경우 직접 구현하거나 Dialog 컴포넌트를 사용하세요.