Boxed Tabs

<!--
  Boxed (folder) tabs. The trick is the seam: the tablist has a bottom border,
  the selected tab pulls itself down 1px (margin-bottom: -1px) and paints its own
  background over that border, so the tab and the panel below read as one sheet
  of paper. Everything else is the same ARIA + roving tabindex machinery.
-->
<div class="tabs-boxed" data-tabs-boxed>
  <div class="tabs-boxed__list" role="tablist" aria-label="Editor view">
    <button class="tabs-boxed__tab" type="button" role="tab" id="box-preview" aria-controls="box-panel-preview" aria-selected="true" tabindex="0">
      Preview
    </button>
    <button class="tabs-boxed__tab" type="button" role="tab" id="box-code" aria-controls="box-panel-code" aria-selected="false" tabindex="-1">
      Code
    </button>
    <button class="tabs-boxed__tab" type="button" role="tab" id="box-console" aria-controls="box-panel-console" aria-selected="false" tabindex="-1">
      Console
    </button>
  </div>

  <div class="tabs-boxed__panel" role="tabpanel" id="box-panel-preview" aria-labelledby="box-preview" tabindex="0">
    <p>The rendered result, refreshed on every save.</p>
  </div>
  <div class="tabs-boxed__panel" role="tabpanel" id="box-panel-code" aria-labelledby="box-code" tabindex="0" hidden>
    <p>142 lines of TypeScript across three modules.</p>
  </div>
  <div class="tabs-boxed__panel" role="tabpanel" id="box-panel-console" aria-labelledby="box-console" tabindex="0" hidden>
    <p>No errors. Two warnings about unused imports.</p>
  </div>
</div>

<script>
  (function () {
    document.querySelectorAll('[data-tabs-boxed]').forEach(function (root) {
      var tabs = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
      var panels = Array.prototype.slice.call(root.querySelectorAll('[role="tabpanel"]'));

      function select(index, setFocus) {
        tabs.forEach(function (tab, i) {
          var isSelected = i === index;
          tab.setAttribute('aria-selected', String(isSelected));
          tab.tabIndex = isSelected ? 0 : -1;
          if (panels[i]) panels[i].hidden = !isSelected;
        });
        if (setFocus) tabs[index].focus();
      }

      tabs.forEach(function (tab, i) {
        tab.addEventListener('click', function () {
          select(i, false);
        });

        tab.addEventListener('keydown', function (event) {
          var next = -1;
          if (event.key === 'ArrowRight') next = (i + 1) % tabs.length;
          else if (event.key === 'ArrowLeft') next = (i - 1 + tabs.length) % tabs.length;
          else if (event.key === 'Home') next = 0;
          else if (event.key === 'End') next = tabs.length - 1;
          else return;

          event.preventDefault();
          select(next, true);
        });
      });
    });
  })();
</script>