WAI-ARIA 기반의 고밀도 접근성 설계를 통한 Custom Combobox 구현 전략

Context

Native select 요소의 스타일링 및 기능 확장 한계로 인한 Custom Dropdown 구현 수요 증가. 단순 UI 재현 과정에서 발생하는 Keyboard Navigation 단절과 Screen Reader 인식 오류라는 접근성 병목 지점 발생.

Technical Solution

• WAI-ARIA role 체계(combobox, listbox, option)를 적용하여 컴포넌트의 시맨틱 구조 정의
• aria-expanded 및 aria-controls 속성을 통한 트리거와 리스트 간의 상태 동기화 메커니즘 구축
• aria-activedescendant를 활용하여 DOM Focus를 트리거에 유지한 채 활성 옵션만 가상으로 추적하는 Focus Management 설계
• Typeahead 및 Home/End/Escape 등 표준 Keyboard Interaction 패턴 구현을 통한 조작성 확보
• aria-live 영역의 중복 사용을 배제하고 속성 기반의 상태 알림을 통한 Screen Reader 노이즈 최소화
• Blur 및 Outside Click 이벤트를 통한 리스트box의 자동 닫힘 및 포커스 복구 로직 구현