텍스트 입력과 선택 목록이 결합된 자동완성 패턴
관련 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을 지정하세요.