Services Tabbed Panels

<!--
  The real tabs pattern, not a row of buttons that hide divs. Three things make
  it that: only the selected tab is in the tab sequence (roving tabindex), so
  Tab lands on the strip once and the next Tab goes to the panel rather than
  through every tab; arrows move selection inside the strip; and each panel is
  wired to its tab both ways with aria-controls / aria-labelledby.
-->
<section class="svc-tabs" aria-labelledby="svc-tabs-title">
  <h2 class="svc-tabs__title" id="svc-tabs-title">Find the engagement that fits</h2>

  <div class="svc-tabs__strip" role="tablist" aria-label="Service categories">
    <button class="svc-tabs__tab" type="button" role="tab" id="svc-tab-build" aria-controls="svc-panel-build" aria-selected="true" tabindex="0">Build</button>
    <button class="svc-tabs__tab" type="button" role="tab" id="svc-tab-scale" aria-controls="svc-panel-scale" aria-selected="false" tabindex="-1">Scale</button>
    <button class="svc-tabs__tab" type="button" role="tab" id="svc-tab-advise" aria-controls="svc-panel-advise" aria-selected="false" tabindex="-1">Advise</button>
  </div>

  <div class="svc-tabs__panel" role="tabpanel" id="svc-panel-build" aria-labelledby="svc-tab-build" tabindex="0">
    <h3 class="svc-tabs__panel-title">Build</h3>
    <p class="svc-tabs__panel-copy">A cross-functional squad that ships your first production release in twelve weeks.</p>
  </div>
  <div class="svc-tabs__panel" role="tabpanel" id="svc-panel-scale" aria-labelledby="svc-tab-scale" tabindex="0" hidden>
    <h3 class="svc-tabs__panel-title">Scale</h3>
    <p class="svc-tabs__panel-copy">Platform, performance and on-call practice for the traffic you are about to get.</p>
  </div>
  <div class="svc-tabs__panel" role="tabpanel" id="svc-panel-advise" aria-labelledby="svc-tab-advise" tabindex="0" hidden>
    <h3 class="svc-tabs__panel-title">Advise</h3>
    <p class="svc-tabs__panel-copy">Fractional architecture review for teams who need a second opinion, not a supplier.</p>
  </div>
</section>

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

    function select(tab) {
      tabs.forEach(function (item) {
        var selected = item === tab;
        item.setAttribute('aria-selected', String(selected));
        // The roving part: unselected tabs leave the tab sequence entirely.
        item.tabIndex = selected ? 0 : -1;
        var panel = document.getElementById(item.getAttribute('aria-controls'));
        if (panel) panel.hidden = !selected;
      });
    }

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

      tab.addEventListener('keydown', function (event) {
        var index = tabs.indexOf(tab);
        var next = -1;
        if (event.key === 'ArrowRight') next = (index + 1) % tabs.length;
        else if (event.key === 'ArrowLeft') next = (index - 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(tabs[next]);
        tabs[next].focus();
      });
    });
  });
</script>