Pill Tabs

<!--
  Pills: the tablist is a tinted track and the selected tab is a filled pill
  inside it. Same roles, same roving tabindex, same arrow keys as every other
  tabs entry - only the paint changes.
-->
<div class="tabs-pills" data-tabs-pills>
  <div class="tabs-pills__list" role="tablist" aria-label="Report range">
    <button class="tabs-pills__tab" type="button" role="tab" id="pill-day" aria-controls="pill-panel-day" aria-selected="true" tabindex="0">
      Day
    </button>
    <button class="tabs-pills__tab" type="button" role="tab" id="pill-week" aria-controls="pill-panel-week" aria-selected="false" tabindex="-1">
      Week
    </button>
    <button class="tabs-pills__tab" type="button" role="tab" id="pill-month" aria-controls="pill-panel-month" aria-selected="false" tabindex="-1">
      Month
    </button>
  </div>

  <div class="tabs-pills__panel" role="tabpanel" id="pill-panel-day" aria-labelledby="pill-day" tabindex="0">
    <p>1,284 requests served today with a median latency of 42ms.</p>
  </div>
  <div class="tabs-pills__panel" role="tabpanel" id="pill-panel-week" aria-labelledby="pill-week" tabindex="0" hidden>
    <p>9,731 requests this week - up 12% on the week before.</p>
  </div>
  <div class="tabs-pills__panel" role="tabpanel" id="pill-panel-month" aria-labelledby="pill-month" tabindex="0" hidden>
    <p>41,208 requests this month, with no incidents recorded.</p>
  </div>
</div>

<script>
  (function () {
    document.querySelectorAll('[data-tabs-pills]').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>