탭 컨테이너

tab-container는 내부의 [role="tab"] 요소들을 탭으로 인식하고, active-index로 활성 탭을 관리하는 웹 컴포넌트입니다. Swiper가 있으면 슬라이드 탭과 동기화되어 스크롤·중앙 정렬 등 향상된 UX를 제공합니다. 접근성: 컨테이너는 role="tablist", 각 탭은 aria-selected와 roving tabindex, 키보드(Arrow/Enter/Space)를 지원합니다.

기본 사용법

<script type="module">
  if (!window.customElements.get("tab-container")) {
    import("/ui/element/tab-container.js");
  }
</script>

<tab-container active-index="0">
  <div role="tablist">
    <button type="button" role="tab" aria-controls="panel-1" id="tab-1">탭1</button>
    <button type="button" role="tab" aria-controls="panel-2" id="tab-2">탭2</button>
  </div>
  <div id="panel-1" role="tabpanel">패널 1</div>
  <div id="panel-2" role="tabpanel">패널 2</div>
</tab-container>

Swiper와 함께 사용할 때는 swiper-container / swiper-slide 안에 탭 버튼을 넣습니다:

<tab-container active-index="0">
  <swiper-container>
    <swiper-slide><button role="tab" aria-controls="panel-1" id="tab-1">탭1</button></swiper-slide>
    <swiper-slide><button role="tab" aria-controls="panel-2" id="tab-2">탭2</button></swiper-slide>
  </swiper-container>
</tab-container>

속성 (Attributes)

속성	타입	기본값	설명
active-index	Number	0	현재 활성 탭 인덱스. -1이면 활성 탭 없음.

마크업 요구사항

• 탭 버튼/요소에 role="tab" 지정.
• aria-controls로 해당 패널 id 연결.
• 패널에 role="tabpanel" 및 탭의 aria-controls와 일치하는 id 권장.

이벤트

이벤트	설명
tabchanged	활성 탭이 변경될 때 발생. detail: { tab: HTMLElement, index: number }

프로퍼티

• activeIndex: get/set — 활성 탭 인덱스 (attribute active-index와 동기화).
• tabs: get — [role="tab"] 요소 배열 (컴포넌트가 찾은 탭 목록).

키보드

• Arrow Left/Right: 포커스·선택 이동.
• Enter / Space: 해당 탭 활성화.
• 탭 목록은 roving tabindex로 한 번에 하나의 탭만 tabindex="0"을 갖습니다.