Cascade Pattern 기반의 접근성 표준 준수 Tab 내비게이션 설계

Context

브라우저 기본 DOM 순서에 의존한 Tab 이동 시 화면 밖 요소로 포커스가 이탈하는 UX 저하 문제 발생. 시각 장애인과 키보드 사용자의 서로 다른 기대 동작을 충족하는 정교한 Focus Management 필요성 증대.

Technical Solution

• Cascade Pattern 도입을 통한 기존 Arrow Key 핸들링 로직의 재사용 및 Tab 전용 예외 처리 분리
• preventDefault()와 stopPropagation()을 활용해 브라우저 기본 탭 동작을 제어하고 Custom Focus Flow 강제
• Top Row 여부 및 Element Index를 판별하여 컴포넌트 내부 이동과 외부 DOM 이동 간의 경계 조건 정의
• useNavigation 훅 내에서 getPreviousByTabButton 등 전용 컨트롤러를 구현하여 상위-하위 리스트 간 계층적 포커스 이동 로직 구축
• TypeScript 기반의 FocusableElementType 정의를 통해 포커스 가능 요소의 타입 안정성 확보