Tabs

Comme le Modal, les onglets nécessitent un minimum de JavaScript : il n’existe pas de mécanisme HTML/CSS natif pour piloter aria-selected, hidden et la navigation au clavier entre onglets. Le script fourni suit le pattern WAI-ARIA APG Tabs.

Do / Don’t

✓ Faire

Utiliser pour basculer entre des vues alternatives d’un même contenu
Limiter à 5-6 onglets maximum visibles sans défilement

✗ Éviter

Utiliser des onglets pour une séquence d’étapes (préférer un Stepper)
Mettre des champs de formulaire obligatoires dans un onglet non actif au chargement

Rendu statique (aria-selected/hidden fixés dans le HTML) pour la QA visuelle — l’interaction réelle passe par le script de référence de l’onglet Code.

Ouvrir le terrain de jeu complet →

Onglet actif : soulignement tds-tabs-current-border + texte en gras. Onglets inactifs en tds-tabs-trigger-color (gris neutre), s’assombrissent au survol.

Importation

@import "@tds-tchad/core/components/tabs/tabs.css";

import { tabs } from '@tds-tchad/core/components/tabs';

Exemple

<div class="tds-tabs__list" role="tablist" aria-label="Sections du dossier">
  <button type="button" class="tds-tabs__trigger" role="tab" aria-selected="true" aria-controls="panel-apercu" id="tab-apercu">
    Aperçu
  </button>
  <button type="button" class="tds-tabs__trigger" role="tab" aria-selected="false" aria-controls="panel-documents" id="tab-documents" tabindex="-1">
    Documents
  </button>
</div>
<div class="tds-tabs__panel" role="tabpanel" id="panel-apercu" aria-labelledby="tab-apercu">
  Contenu de l'onglet Aperçu.
</div>
<div class="tds-tabs__panel" role="tabpanel" id="panel-documents" aria-labelledby="tab-documents" hidden>
  Contenu de l'onglet Documents.
</div>

Script de référence

document.querySelectorAll('[role="tablist"]').forEach((tablist) => {
  const tabs = [...tablist.querySelectorAll('[role="tab"]')];

  function selectTab(tab) {
    tabs.forEach((t) => {
      const selected = t === tab;
      t.setAttribute('aria-selected', String(selected));
      t.tabIndex = selected ? 0 : -1;
      document.getElementById(t.getAttribute('aria-controls')).hidden = !selected;
    });
    tab.focus();
  }

  tablist.addEventListener('click', (e) => {
    const tab = e.target.closest('[role="tab"]');
    if (tab) selectTab(tab);
  });

  tablist.addEventListener('keydown', (e) => {
    const i = tabs.indexOf(document.activeElement);
    if (i === -1) return;
    if (e.key === 'ArrowRight') selectTab(tabs[(i + 1) % tabs.length]);
    if (e.key === 'ArrowLeft') selectTab(tabs[(i - 1 + tabs.length) % tabs.length]);
  });
});