React 19 기반 Vertical Layout 대응 Accessible Navigation 설계

Context

기존 Horizontal Layout 중심의 키보드 핸들링 로직으로 인한 Mobile Vertical 환경의 UX 불일치 발생. 특히 Sublist 자동 닫힘 현상과 방향키 이동 제약으로 인한 Operability 저하 문제 해결 필요.

Technical Solution

• NavigationProvider 내 config 객체에 orientation prop을 저장하여 레이아웃 상태를 전역적으로 관리하는 구조 설계
• isLayoutVertical 콜백 함수를 통한 레이아웃 상태 판별 로직 구현으로 조건별 키보드 이벤트 분기 처리
• Vertical 레이아웃 시 _closeOpenSiblings 호출을 제한하여 Sublist 상태를 유지하는 UX 최적화 적용
• DOWN-ARROW 키 입력 시 현재 리스트의 닫힘 여부와 마지막 요소 도달 여부를 판단하여 Parent Sibling으로 포커스를 이동시키는 순환 탐색 로직 구현
• UP-ARROW 키 입력 시 가시적 리스트의 역순으로 포커스를 이동시켜 Top Row의 첫 번째 자식 요소까지 도달하는 탐색 경로 최적화
• focus 이동 시 브라우저 기본 스크롤 동작을 허용하여 Vertical 뷰포트 내 접근성 확보