Accessibility 기반 Controlled Component 전환을 통한 모바일 내비게이션 최적화

Context

기존 Uncontrolled 구조의 가로형 내비게이션을 모바일 환경의 세로형 구조로 확장하며 가시성 제어 필요성 대두. 특히 Screen Reader 접근성을 위해 모든 링크를 DOM에 유지하는 설계로 인해, 닫힘 상태에서의 Focus Trap 및 Tab 순서 제어라는 기술적 제약 발생.

Technical Solution

• Parent Component가 상태를 관리하는 Controlled Component 구조 도입을 통한 가시성 및 포커스 제어권 확보
• Navigation 오픈 시 첫 번째 자식 요소로 Focus를 강제 이동시키는 로직 구현으로 사용자 경험 개선
• Escape 키 입력 시 모든 Sublist를 닫고 제어 버튼으로 Focus를 복원하는 Focus Management 설계
• 닫힘 상태에서 Tab/Shift+Tab 입력 시 내비게이션 내부 요소를 건너뛰고 제어 버튼과 외부 요소 간 직접 이동하도록 포커스 흐름 최적화
• Controlled 상태일 때 내부 OutsideEventListener를 비활성화하는 조건부 렌더링으로 중복 이벤트 리스너로 인한 성능 저하 및 충돌 방지
• NavigationWrapper 내 isComponentControlled() 분기 처리를 통한 리스너 로드 최적화