React 기반 Accessibility 내비게이션의 Focus Trap 제거 및 계층적 상태 관리 설계

Context

React 19 기반의 메인 내비게이션 컴포넌트 구현 중 Shift+Tab 진입 시 발생하는 Keyboard Trap 현상 식별. 닫혀 있는 Sublist 내의 요소에 포커스가 도달할 때 시각적 Focus Outline이 사라지는 Accessibility 결함 해결 필요.

Technical Solution

• onFocus 이벤트 리스너를 통한 Focus 상태 실시간 감지 및 handleLinkFocus 로직으로의 위임 구조 설계
• 컴포넌트 내 마지막 요소 판별 로직(_isLastElementInComponent)을 통해 포커스 대상이 Closed Sublist 내에 있는지 검증
• 조건 충족 시 shiftFocus 함수를 호출하여 최상위 Top-row Parent 버튼으로 포커스를 강제 이동시키는 포커스 리디렉션 메커니즘 구현
• NavigationProvider 내에 dispatchSubListClose 함수를 주입하여 각 내비게이션 아이템이 독립적으로 상태를 제어하는 구조 채택
• registerButtonAsParent 함수와 Map 객체를 활용하여 Parent Element와 Close Function을 매핑하는 상태 등록 체계 구축
• useEffect를 통한 컴포넌트 마운트 시점의 자동 등록 프로세스로 Sublist 닫힘 동작을 위한 인프라스트럭처 완성