Tab

Tabs Pattern

• 탭은 한 번에 하나의 콘텐츠 패널을 표시하는 탭 패널(Tab Panel)이라고 하는 계층화된 콘텐츠 섹션 집합.
• 탭 요소 목록은 현재 표시된 패널의 한쪽 가장자리(일반적으로는 위쪽 가장자리)를 따라 정렬된다.
• 탭 인터페이스가 초기화되면 하나의 탭 패널이 표시되고, 활성 상태임을 나타내도록 해당 탭의 스타일이 지정되게 된다.
• 크게 두 가지 방법으로 구현이 가능
  • 탭에 포커스가 가는 순간 해당 탭을 활성화 시키는 방법
  • 탭의 포커스와 별도로 추가적인 입력을 통해 특정 탭을 활성화 시키는 방법

Keyboard Interaction

• Tab
  • 탭 자체에 포커스가 이동하게 된 경우, 현재 활성화 된 탭 요소에 포커스가 되어야 한다.
• Left Arrow / Right Arrow
  • 각각 이전 탭과 다음 탭으로 이동하며, 요구사항에 따라 바로 탭을 활성화시킬 것인지 아니면 사용자의 입력(Space 또는 Enter)을 전달받아 활성화할지 구현할 수 있다.
  • 각각 첫번째 탭 그리고 마지막 탭에서 입력한 경우 마지막 탭 그리고 첫번째 탭으로 이동시킬 수 있어야 한다.
• Space(Enter)
  • 현재 포커스가 되어 있는 요소가 위와 같이 바로 활성화되는 형태로 구현되어 있지 않다면 Space 또는 Enter가 입력되었을 때 활성화시켜 주어야 한다.
• Home / End (Optional)
  • 입력 시 각각 첫번째 탭과 마지막 탭으로 이동시킬 수 있어야 한다.

Automatic Activation vs. Manual Activation

패널에 노출하기 위한 데이터가 모두 준비되어 있는 경우에는 이러한 자동 활성화 구현을 패널에 노출하기 위한 데이터를 비동기적으로 불러와야 하는 경우에는 수동 활성화 구현을 고려하는 것이 권장된다.

WAI-ARIA

• role=tab
• aria-selected="true"
• tabindex

  현재 활성화 된 탭을 제외하고는 명시적으로 -1로 설정하여 포커스가 이동되지 않도록 방지

• role="tabpanel"

  해당 요소가 탭 패널의 컨테이너 역할을 수행함을 표현하며, 연결되어 있는 탭 컨트롤이 활성화 상태가 아닌 경우에는 숨겨진다.

• aria-controls={id}

  role="tabpanel" 요소를 참조