키보드 상호작용
| 키 | 동작 |
|---|---|
| Enter 또는 Space | 트리거에서: 메뉴를 열고 첫 번째 항목으로 이동합니다. 항목에서: 항목을 선택하거나 하위 메뉴를 엽니다. |
| 아래쪽 화살표 | 트리거에서: 메뉴를 열고 첫 번째 항목으로 이동합니다. 메뉴에서: 다음 항목으로 이동합니다. |
| 위쪽 화살표 | 트리거에서: 메뉴를 열고 마지막 항목으로 이동합니다. 메뉴에서: 이전 항목으로 이동합니다. |
| Home / End | 첫 번째 또는 마지막 항목으로 이동합니다. |
| 오른쪽 화살표 | 하위 메뉴를 열고 그 첫 번째 항목으로 이동합니다(오른쪽에서 왼쪽으로 쓰는 언어에서는 왼쪽 화살표). |
| 왼쪽 화살표 | 하위 메뉴를 닫고 상위 항목으로 돌아갑니다(오른쪽에서 왼쪽으로 쓰는 언어에서는 오른쪽 화살표). |
| Esc | 메뉴를 닫고 포커스를 트리거로 되돌립니다. |
| 문자 키 | 입력한 텍스트로 시작하는 레이블을 가진 다음 항목으로 이동합니다. |
접근성 참고 사항
- 트리거에는
aria-haspopup,aria-expanded,aria-controls가 지정되고, 메뉴와 항목에는 Angular Aria가 ARIA 역할을 부여합니다. - 강조 표시된 항목은 텍스트 명도 대비가 4.5:1 이상인 단색 채우기를 사용하며, 포커스 표시기 역할도 합니다. 강제 색상 모드에서는 시스템 강조 색상의 윤곽선이 표시됩니다.
- 체크 가능한 항목은
aria-checked로 상태를 안내합니다. - 항목을 선택하면 메뉴가 닫히고 포커스가 트리거로 돌아갑니다. 포커스가 트리거와 메뉴 밖으로 이동해도 메뉴가 닫힙니다.
- 항목의 높이는 최소 28픽셀로, WCAG 2.2의 최소 타깃 크기보다 큽니다.