Des onglets au clavier

const onglets = [...document.querySelectorAll("[role=tab]")];

function activer(onglet) {
  for (const o of onglets) {
    const actif = o === onglet;
    o.setAttribute("aria-selected", String(actif));
    o.tabIndex = actif ? 0 : -1;
    document.getElementById(o.getAttribute("aria-controls")).hidden = !actif;
  }
  onglet.focus();
  console.log("onglet :", onglet.textContent);
}

const liste = document.querySelector("[role=tablist]");
liste.addEventListener("click", (e) => {
  const onglet = e.target.closest("[role=tab]");
  if (onglet) {
    activer(onglet);
  }
});

// Flèches gauche et droite (en boucle), Début et Fin.
liste.addEventListener("keydown", (e) => {
  const i = onglets.indexOf(document.activeElement);
  const n = onglets.length;
  const cibles = { ArrowRight: (i + 1) % n, ArrowLeft: (i - 1 + n) % n, Home: 0, End: n - 1 };
  if (e.key in cibles) {
    e.preventDefault();
    activer(onglets[cibles[e.key]]);
  }
});

On appuie sur Tab (le focus arrive sur l'onglet actif), puis sur flèche gauche, flèche droite et Fin, on clique sur « Sommaire », et l'on appuie sur Tab :

onglet : Avis
onglet : Résumé
onglet : Avis
onglet : Sommaire
focus après Tab : SECTION#p2
panneaux visibles : p2

La flèche gauche depuis le premier onglet boucle sur le dernier. Comme les onglets inactifs ont tabIndex = -1, la touche Tab quitte la liste d'onglets et va directement au panneau affiché (qui porte tabindex="0") : c'est le comportement recommandé pour des onglets accessibles, où les flèches servent à choisir et Tab à avancer.