탭

div[role=tablist]  aria-labelledby="제목 id"         ← 탭 묶음 (이름 필요)
├─ button[role=tab]  aria-selected="true"   aria-controls="p1"  tabindex="0"
├─ button[role=tab]  aria-selected="false"  aria-controls="p2"  tabindex="-1"
└─ button[role=tab]  aria-selected="false"  aria-controls="p3"  tabindex="-1"
div[role=tabpanel]#p1  aria-labelledby="탭1 id"  tabindex="0"
div[role=tabpanel]#p2  aria-labelledby="탭2 id"  hidden
div[role=tabpanel]#p3  aria-labelledby="탭3 id"  hidden

<div class="tabs">
  <h3 class="tb-label" id="tabs-label">상품 정보</h3>
  <div role="tablist" aria-labelledby="tabs-label" id="tabs-list">
    <button type="button" role="tab" id="tabs-tab-1" aria-selected="true" aria-controls="tabs-panel-1">개요</button>
    <button type="button" role="tab" id="tabs-tab-2" aria-selected="false" aria-controls="tabs-panel-2" tabindex="-1">사양</button>
    <button type="button" role="tab" id="tabs-tab-3" aria-selected="false" aria-controls="tabs-panel-3" tabindex="-1">리뷰</button>
  </div>
  <div role="tabpanel" id="tabs-panel-1" aria-labelledby="tabs-tab-1" tabindex="0">
    <p>이 상품은 접근성을 고려해 설계한 무선 키보드입니다.</p>
  </div>
  <div role="tabpanel" id="tabs-panel-2" aria-labelledby="tabs-tab-2" tabindex="0" hidden>
    <p>크기 280 × 115 mm, 무게 420 g, 블루투스 5.1을 지원합니다.</p>
  </div>
  <div role="tabpanel" id="tabs-panel-3" aria-labelledby="tabs-tab-3" tabindex="0" hidden>
    <p>평균 별점 4.6점, 리뷰 128개가 있습니다.</p>
  </div>
</div>

// 탭: tablist 하나를 초기화합니다.
// manual = false → 자동 활성화(화살표로 포커스가 가면 바로 패널 전환)
// manual = true  → 수동 활성화(화살표는 포커스만 이동, Enter/Space로 전환)
function initTabs(tablist, manual) {
  var tabs = Array.prototype.slice.call(tablist.querySelectorAll('[role="tab"]'));
  var vertical = tablist.getAttribute('aria-orientation') === 'vertical';

  function select(tab) {
    tabs.forEach(function (t) {
      var on = t === tab;
      t.setAttribute('aria-selected', String(on));
      t.tabIndex = on ? 0 : -1;               // 로빙 tabindex: 선택된 탭만 Tab 순서에
      document.getElementById(t.getAttribute('aria-controls')).hidden = !on;
    });
  }

  function moveFocus(tab) {
    if (manual) {
      // 수동: 포커스만 옮기고, 포커스 받은 탭이 Tab 순서를 이어받습니다.
      tabs.forEach(function (t) { t.tabIndex = t === tab ? 0 : -1; });
    } else {
      select(tab);
    }
    tab.focus();
  }

  tabs.forEach(function (tab, i) {
    // 마우스 클릭, Enter, Space (button 요소라 click 하나로 처리)
    tab.addEventListener('click', function () { select(tab); });

    tab.addEventListener('keydown', function (e) {
      var prev = vertical ? 'ArrowUp' : 'ArrowLeft';
      var next = vertical ? 'ArrowDown' : 'ArrowRight';
      var target = null;
      if (e.key === next) target = tabs[(i + 1) % tabs.length];
      else if (e.key === prev) target = tabs[(i - 1 + tabs.length) % tabs.length];
      else if (e.key === 'Home') target = tabs[0];
      else if (e.key === 'End') target = tabs[tabs.length - 1];
      if (target) {
        e.preventDefault();
        moveFocus(target);
      }
    });
  });

  // 수동 모드에서 포커스가 tablist를 떠나면 Tab 순서를 선택된 탭으로 되돌립니다.
  tablist.addEventListener('focusout', function (e) {
    if (!manual || tablist.contains(e.relatedTarget)) return;
    var selected = tablist.querySelector('[aria-selected="true"]');
    tabs.forEach(function (t) { t.tabIndex = t === selected ? 0 : -1; });
  });
}

// 자동 활성화
initTabs(document.getElementById('tabs-list'), false);
// 수동 활성화
// initTabs(document.getElementById('tabs-list'), true);