Tabs
여러 콘텐츠 영역을 효율적으로 구성하고 전환할 수 있는 탭 네비게이션 컴포넌트입니다.
개요
Tabs는 관련된 콘텐츠를 여러 패널로 나누어 공간을 효율적으로 활용하는 네비게이션 컴포넌트입니다. ARIA 자동화, 키보드 네비게이션, 포커스 관리를 기본 지원합니다.
개요 콘텐츠
이것은 개요 탭의 콘텐츠입니다.
설치
사용법
예제
Pills 스타일
둥근 배경으로 선택된 탭을 강조합니다.
계정 설정 콘텐츠...
크기 (Size)
size prop으로 탭의 크기를 조절합니다.
Default (56px)
Small (40px)
제어 모드
value와 onValueChange props로 탭 상태를 외부에서 제어합니다.
스크롤 가능한 탭
탭이 많아 한 줄에 표시하기 어려운 경우, scrollable prop으로 좌우 스크롤 버튼을 활성화합니다.
Tab 5 콘텐츠
Tab 5 콘텐츠
접근성
WCAG 2.1 / KWCAG 2.2 AA 레벨을 준수합니다.
- ARIA 자동화: role="tablist", role="tab", role="tabpanel"이 자동으로 적용됩니다.
- 선택 상태: aria-selected, aria-controls, aria-labelledby가 자동으로 연결됩니다.
- 키보드 네비게이션: Arrow Left/Right로 탭 간 이동, Home/End로 첫/마지막 탭 이동이 가능합니다.
- 포커스 가시성: WCAG 2.1 Focus Visible (AA) 기준을 충족하는 명확한 포커스 표시를 제공합니다.
- 색상 독립성: 선택 상태를 색상만으로 구별하지 않고 밑줄, 배경 등 시각적 요소를 추가합니다.
키보드 단축키
| 키 | 동작 |
|---|---|
Tab | 탭 리스트로 포커스 진입 |
Enter | 포커스된 탭 선택 및 패널 전환 |
← / → | 이전/다음 탭으로 포커스 이동 (순환) |
Home | 첫 번째 탭으로 포커스 이동 |
End | 마지막 탭으로 포커스 이동 |