Tab

Tab 컴포넌트는 다양한 컨텐츠를 그룹화하여 한 화면에서 전환할 수 있도록 도와주는 UI 요소입니다.
형태(Variants), 스크롤 가능 여부(Scrolling), 콘텐츠 연동형(Combined) 등 여러 방식으로 구현할 수 있습니다.

Variants
is-group
Accessibility
키 동작 설명
Tab 활성 탭 → 다음 포커스 요소로 이동 현재 활성 탭(tabindex="0")에서 패널 내부 등 다음 포커스 가능한 요소로 이동.
다른 탭은 tabindex="-1"라서 Tab으로는 이동 불가.
Shift + Tab 활성 탭 → 이전 포커스 요소로 이동 Tab의 역방향 이동.
ArrowRight 다음 탭으로 포커스 이동 탭 포커스만 이동하며, 패널은 전환되지 않음.
마지막 탭에서 한 번 더 누르면 첫 번째 탭으로 순환.
ArrowLeft 이전 탭으로 포커스 이동 탭 포커스만 이동하며, 패널은 전환되지 않음.
첫 번째 탭에서 한 번 더 누르면 마지막 탭으로 순환.
Enter 또는 Space 현재 포커스된 탭 활성화 aria-selected="true" 적용 후, 연결된 패널(aria-controls) 표시.
화살표 이동 후 Enter/Space로 패널 전환 (수동 활성화 패턴)