Les onglets

<div class="tabs">
  <h3 id="tabs-title">Lampe de bureau</h3>
  <!-- Liste d'onglets : masquée tant que le script n'a pas tourné -->
  <div
    class="tabs__list"
    role="tablist"
    aria-labelledby="tabs-title"
    hidden>
    <!-- Onglet sélectionné : le seul arrêt de tabulation de la liste -->
    <button
      id="tab-1"
      type="button"
      role="tab"
      aria-selected="true"
      aria-controls="tabpanel-1">
      Description
    </button>
    <button
      id="tab-2"
      type="button"
      role="tab"
      aria-selected="false"
      aria-controls="tabpanel-2"
      tabindex="-1">
      Dimensions
    </button>
    <!-- Onglets 3 à 5 : même modèle -->
  </div>
  <!-- Panneaux : sans script, ils s'affichent tous, chacun sous son titre -->
  <div id="tabpanel-1" class="tabs__panel">
    <h4 class="tabs__title">Description</h4>
    <p>…</p>
  </div>
  <div id="tabpanel-2" class="tabs__panel">
    <h4 class="tabs__title">CSS</h4>
    <p>…</p>
  </div>
</div>

<script>
  // Activation automatique : l'onglet qui reçoit le focus s'affiche
  const list = document.querySelector('.tabs [role="tablist"]');
  const tabs = [...list.querySelectorAll('[role="tab"]')];
  const panel = (t) => document.getElementById(t.getAttribute('aria-controls'));
  const select = (tab) => {
    for (const t of tabs) {
      t.setAttribute('aria-selected', t === tab);
      t.tabIndex = t === tab ? 0 : -1;
      // until-found : Ctrl+F trouve le texte d'un panneau masqué.
      // aria-hidden retire de l'arbre d'accessibilité le panneau vide.
      if (t === tab) {
        panel(t).removeAttribute('hidden');
        panel(t).removeAttribute('aria-hidden');
        panel(t).tabIndex = 0;
      } else {
        panel(t).setAttribute('hidden', 'until-found');
        panel(t).setAttribute('aria-hidden', 'true');
        panel(t).removeAttribute('tabindex');
      }
    }
  };
  list.addEventListener('click', (e) => {
    const tab = e.target.closest('[role="tab"]');
    if (tab) select(tab);
  });
  list.addEventListener('keydown', (e) => {
    const i = tabs.indexOf(e.target);
    const n = tabs.length;
    const keys = { ArrowLeft: i - 1, ArrowRight: i + 1, Home: 0, End: n - 1 };
    const next = keys[e.key];
    if (next === undefined) return;
    e.preventDefault();
    const tab = tabs[(next + n) % n];
    tab.focus();
    select(tab);
  });
  // Panneaux : rôle et nom. Si Ctrl+F trouve du texte
  // dans un panneau masqué, son onglet s'affiche.
  for (const t of tabs) {
    panel(t).setAttribute('role', 'tabpanel');
    panel(t).setAttribute('aria-labelledby', t.id);
    panel(t).addEventListener('beforematch', () => select(t));
  }
  list.hidden = false;
  select(tabs[0]);
</script>

/* Avec le script, la liste d'onglets remplace les titres des panneaux */
.tabs:has(.tabs__list:not([hidden])) .tabs__title {
  display: none;
}

.tabs__list:not([hidden]) {
  display: flex;
  gap: 4px;
}

/* L'onglet sélectionné : couleur et barre en haut de l'onglet */
.tabs [aria-selected="true"] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 4px 0 var(--highlight);
}

.tabs [role="tab"]:focus-visible,
.tabs [role="tabpanel"]:focus-visible {
  outline: 3px solid var(--highlight);
}