모든 패턴
Popover
버튼으로 트리거하는 대화형 플로팅 패널 컴포넌트
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
Baseline (React)tsx
Loading...
공통 베이스라인
모든 디자인 시스템에 적용Must4
트리거에 aria-expanded 설정
팝오버를 여는 트리거 버튼에 aria-expanded로 열림/닫힘 상태를 표시해야 합니다.
aria-haspopup 또는 aria-controls
트리거에 aria-haspopup="dialog"를 추가하거나 aria-controls로 팝오버 패널 ID를 참조해야 합니다.
포커스 관리
팝오버 열릴 때 첫 번째 포커스 가능한 요소로 포커스 이동, 닫힐 때 트리거로 포커스 복귀해야 합니다.
Escape로 닫기
팝오버가 열려 있을 때 Escape 키로 닫을 수 있어야 합니다.
Should3
role="dialog"와 aria-label
대화형 콘텐츠를 포함하는 팝오버에는 role="dialog"와 aria-label 또는 aria-labelledby를 제공하세요.
배경 클릭으로 닫기
팝오버 외부 영역을 클릭하면 닫히도록 구현하세요.
포커스 트랩
대화형 콘텐츠가 있는 팝오버는 Tab/Shift+Tab이 팝오버 내부에서만 순환하도록 구현하세요.
Avoid2
hover로만 열기
hover로만 팝오버를 열면 키보드 사용자와 터치 사용자가 접근할 수 없습니다.
팝오버에만 중요한 정보 배치
팝오버는 보조 정보용입니다. 필수 액션은 팝오버 없이도 접근할 수 있어야 합니다.
디자인 시스템별 구현
추가 체크포인트
Popover anchorEl로 트리거 연결
MUI Popover는 anchorEl에 트리거 요소를 전달하면 위치가 자동 계산됩니다. aria-controls로도 연결하세요.
코드 샘플
MUI Popovertsx
Loading...
구현 노트
- –MUI Popover는 Escape 키와 배경 클릭으로 자동으로 닫힙니다.
- –aria-describedby로 트리거와 팝오버를 연결하세요.
- –팝오버 내 포커스 관리는 직접 구현해야 합니다.