Combobox
텍스트 입력과 선택 목록이 결합된 자동완성 패턴
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
공통 베이스라인
모든 디자인 시스템에 적용input에 combobox 역할
텍스트 입력 요소에 role="combobox"가 있어야 합니다.
aria-expanded로 팝업 상태 반영
팝업이 열릴 때 aria-expanded="true", 닫힐 때 aria-expanded="false"여야 합니다.
팝업 참조
aria-controls로 listbox 또는 팝업 요소의 id를 가리켜야 합니다.
자동완성 동작 선언
aria-autocomplete를 none/list/inline/both 중 하나로 설정해야 합니다.
화살표 키로 팝업 탐색
아래 화살표로 팝업을 열고 첫 옵션으로 이동, 위/아래 화살표로 옵션 간 이동이 가능해야 합니다.
Escape로 팝업 닫기
Escape 키로 팝업을 닫되 입력값은 변경하지 않아야 합니다.
aria-activedescendant 사용
포커스가 입력창에 있을 때 aria-activedescendant로 현재 강조된 옵션의 id를 설정하세요.
Enter로 옵션 선택
Enter 키로 강조된 옵션을 선택하고 팝업을 닫아야 합니다.
가시적 레이블
<label> 요소 또는 aria-label로 목적을 명시하세요.
마우스 전용 팝업 금지
팝업 열기와 옵션 선택을 마우스 클릭만으로 가능하게 만들지 마세요.
팝업 내 포커스 트랩 금지
Tab 키가 팝업을 닫고 다음 요소로 이동해야 합니다. 포커스를 listbox에 가두지 마세요.
추가 체크포인트
Autocomplete 레이블 연결
MUI Autocomplete에 id와 getOptionLabel을 설정하고 renderInput의 label을 지정하세요.
코드 샘플
구현 노트
- –MUI Autocomplete는 combobox 역할과 aria-expanded를 자동으로 처리합니다.
- –freeSolo prop 사용 시 사용자 입력값 처리 방식을 스크린리더에 안내하세요.