React 기반 웹 접근성 준수 내비게이션의 계층적 상태 제어 설계

Context

복잡한 계층 구조의 내비게이션 컴포넌트에서 하위 리스트의 개별 상태 관리로 인한 일관성 없는 닫힘 동작 발생. 특히 부모 요소 닫힘 시 자식 요소의 상태가 잔존하거나, 포커스 이동 시 불필요한 서브리스트가 유지되는 접근성 결함 존재.

Technical Solution

• Map 객체와 ref를 활용하여 각 서브리스트의 closeSubNavigation 함수를 중앙 집중식으로 저장하는 레지스트리 구조 설계
• 부모 리스트 닫힘 시 관련 자식 요소 배열을 순회하며 dispatchSubListClose를 호출하는 재귀적 상태 초기화 로직 구현
• Top-row 포커스 이동 및 Escape 키 입력 시 전체 컴포넌트 상태를 Inactive로 전환하는 전역 상태 제어 흐름 구축
• 클릭 이벤트 및 포커스 아웃 감지를 통한 컴포넌트 외부 상호작용 시의 자동 Close 트리거 메커니즘 적용
• React 19.x 환경에서 vanilla CSS와 Typescript를 통해 런타임 오버헤드를 최소화한 접근성 제어 계층 구현