Onglets

<div class="tabs">
  <h3>Liste d'onglets activables au clavier</h3>
  <div role="tablist" aria-labelledby="tablist-1" class="manual">
      <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
          <span>Premier onglet</span>
      </button>
      <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2">
          <span>Deuxième onglet</span>
      </button>
      <button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3">
          <span>Troisième onglet</span>
      </button>
  </div>
  <div id="tabpanel-1" role="tabpanel" aria-labelledby="tab-1">
      <p>
          Sunt veniam ad reprehenderit exercitation non dolore exercitation labore deserunt laboris deserunt.
          Amet irure nulla eu nisi esse. Voluptate incididunt in Lorem cillum ut dolore enim qui magna. Dolore
          reprehenderit enim amet eu magna duis.
      </p>
      <p>
          Aute dolore culpa minim id in est dolore officia enim adipisicing. Elit deserunt reprehenderit
          dolore aute duis ex. Culpa tempor esse non nostrud fugiat nisi deserunt magna amet.
      </p>
      <p>Commodo ex id non consectetur laboris excepteur reprehenderit excepteur in velit veniam ex culpa.
          Occaecat excepteur in magna tempor. Et exercitation incididunt culpa reprehenderit irure.</p>
  </div>
  <div id="tabpanel-2" role="tabpanel" aria-labelledby="tab-2" class="is-hidden">
      <p>
          Laboris esse id id consequat cillum eiusmod esse dolore. Dolor non ullamco aliqua cupidatat fugiat
          non. Amet enim aliquip veniam cillum consequat reprehenderit pariatur velit magna consectetur
          ullamco fugiat deserunt. Aliquip in pariatur veniam eiusmod magna laboris deserunt ea adipisicing
          proident laborum. Eiusmod consequat esse occaecat mollit. Commodo quis ea aute aliquip.
      </p>
      <p>Excepteur pariatur ut velit in do occaecat consectetur adipisicing labore ex. Reprehenderit qui non
          ipsum irure exercitation magna amet pariatur consectetur pariatur tempor ut ex. Sint dolore sit
          dolore ut eu sit dolor irure adipisicing pariatur elit dolore aliqua adipisicing. Non veniam magna
          eu irure ad non qui labore reprehenderit est. Occaecat veniam consequat velit Lorem ad aliqua
          excepteur labore mollit in.</p>
  </div>
  <div id="tabpanel-3" role="tabpanel" aria-labelledby="tab-3" class="is-hidden">
      <p>
          Ad laborum est minim est anim ea nisi sit. Duis fugiat mollit labore culpa duis. Sint Lorem mollit
          non ut sit reprehenderit proident cupidatat.
      </p>
      <p>Excepteur pariatur irure nulla anim laboris. Labore anim cupidatat veniam adipisicing cupidatat.
          Laboris ad culpa laboris culpa dolore nostrud laboris est. Eu ipsum laborum magna irure duis et in
          nulla et in velit est ut.</p>
  </div>
</div>

:root {
  --min-width: 640px;
  --max-height: 640px;
  --items-padding: 5px;
  --text-padding: 1em;

  --border-color: #b7b7b8;
  --background-color: #edeff3;
  --background-selected-color: #fbfcfe;
  --border-selected-color: #320075;
}

[role="tablist"] {
  min-width: var(--min-width);
}
[role="tablist"] button {
  padding: 0.25em;
}
[role="tab"],
[role="tab"]:focus,
[role="tab"]:hover {
  position: relative;
  z-index: 2;
  top: 2px;
  margin: 0;
  margin-top: 5px;
  border: 1px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
  border-radius: 5px 5px 0 0;
  overflow: visible;
  background: var(--background-color);
  outline: none;
  font-weight: bold;
}

[role="tab"]:focus,
[role="tab"]:hover {
  border-top-color: var(--border-selected-color);
  border-bottom-color: var(--background-selected-color);
  background: var(--background-selected-color);
  box-shadow: inset 0 0.25em 0.15em var(--border-selected-color);
}

[role="tab"][aria-selected="true"] {
  margin-top: 0;
  border-width: 2px;
  border-top-width: 6px;
  border-top-color: var(--border-selected-color);
  border-bottom-color: var(--background-selected-color);
  background: var(--background-selected-color);
  text-transform: uppercase;
}

[role="tab"][aria-selected="false"] {
  border-bottom: 1px solid var(--border-color);
}

[role="tabpanel"] {
  padding: var(--text-padding);
  border: 2px solid var(--border-color);
  border-radius: 0 5px 5px;
  background: var(--background-selected-color);
  min-height: 10em;
  min-width: var(--min-width);
  overflow: auto;
}

[role="tabpanel"].is-hidden {
  display: none;
}

[role="tabpanel"] p {
  margin: 0;
}
@media screen and (width <=768px) {
  [role="tab"] {
    font-size: 0.9em;
  }
}
@media screen and (width <=576px) {
  :root {
    --min-width: 500px;
  }
}

@media screen and (width <=576px) {
  :root {
    --min-width: 300px;
  }
  [role="tablist"] button span {
    display: none;
  }
}

"use strict";

class TabsManual {
  constructor(groupNode) {
    this.tablistNode = groupNode;

    this.tabs = [];

    this.firstTab = null;
    this.lastTab = null;

    this.tabs = Array.from(this.tablistNode.querySelectorAll("[role=tab]"));
    this.tabpanels = [];

    for (var i = 0; i < this.tabs.length; i += 1) {
      var tab = this.tabs[i];
      var tabpanel = document.getElementById(tab.getAttribute("aria-controls"));

      tab.tabIndex = -1;
      tab.setAttribute("aria-selected", "false");
      this.tabpanels.push(tabpanel);

      tab.addEventListener("keydown", this.onKeydown.bind(this));
      tab.addEventListener("click", this.onClick.bind(this));

      if (!this.firstTab) {
        this.firstTab = tab;
      }
      this.lastTab = tab;
    }

    this.setSelectedTab(this.firstTab);
  }

  setSelectedTab(currentTab) {
    for (var i = 0; i < this.tabs.length; i += 1) {
      var tab = this.tabs[i];
      if (currentTab === tab) {
        tab.setAttribute("aria-selected", "true");
        tab.removeAttribute("tabindex");
        this.tabpanels[i].classList.remove("is-hidden");
      } else {
        tab.setAttribute("aria-selected", "false");
        tab.tabIndex = -1;
        this.tabpanels[i].classList.add("is-hidden");
      }
    }
  }

  moveFocusToTab(currentTab) {
    currentTab.focus();
  }

  moveFocusToPreviousTab(currentTab) {
    var index;

    if (currentTab === this.firstTab) {
      this.moveFocusToTab(this.lastTab);
    } else {
      index = this.tabs.indexOf(currentTab);
      this.moveFocusToTab(this.tabs[index - 1]);
    }
  }

  moveFocusToNextTab(currentTab) {
    var index;

    if (currentTab === this.lastTab) {
      this.moveFocusToTab(this.firstTab);
    } else {
      index = this.tabs.indexOf(currentTab);
      this.moveFocusToTab(this.tabs[index + 1]);
    }
  }

  /* EVENT HANDLERS */

  onKeydown(event) {
    var tgt = event.currentTarget,
      flag = false;

    switch (event.key) {
      case "ArrowLeft":
        this.moveFocusToPreviousTab(tgt);
        flag = true;
        break;

      case "ArrowRight":
        this.moveFocusToNextTab(tgt);
        flag = true;
        break;

      case "Home":
        this.moveFocusToTab(this.firstTab);
        flag = true;
        break;

      case "End":
        this.moveFocusToTab(this.lastTab);
        flag = true;
        break;

      default:
        break;
    }

    if (flag) {
      event.stopPropagation();
      event.preventDefault();
    }
  }

  // Since this example uses buttons for the tabs, the click onr also is activated
  // with the space and enter keys
  onClick(event) {
    this.setSelectedTab(event.currentTarget);
  }
}

// Initialize tablist

window.addEventListener("load", function () {
  var tablists = document.querySelectorAll("[role=tablist].manual");
  for (var i = 0; i < tablists.length; i++) {
    new TabsManual(tablists[i]);
  }
});