Onglet

Regroupement de panneaux affichés un à la fois, avec barre d’onglets et prise en charge clavier fournie par le script DSBJ.

Exemple

Contenu du premier onglet…

Contenu du deuxième onglet…

Contenu du troisième onglet…

<div class="bj-tabs" data-bj-tabs>
  <div class="bj-tabs__list" role="tablist" aria-label="Exemple">
    <button type="button" class="bj-tabs__tab" data-bj-tab role="tab" aria-selected="true" tabindex="0">Onglet 1</button>
    <button type="button" class="bj-tabs__tab" data-bj-tab role="tab" aria-selected="false" tabindex="-1">Onglet 2</button>
    <button type="button" class="bj-tabs__tab" data-bj-tab role="tab" aria-selected="false" tabindex="-1">Onglet 3</button>
  </div>
  <div class="bj-tabs__panel" data-bj-tab-panel role="tabpanel" data-bj-expanded><p>Contenu du premier onglet…</p></div>
  <div class="bj-tabs__panel" data-bj-tab-panel role="tabpanel"><p>Contenu du deuxième onglet…</p></div>
  <div class="bj-tabs__panel" data-bj-tab-panel role="tabpanel"><p>Contenu du troisième onglet…</p></div>
</div>

Nombreux onglets (défilement)

La liste bj-tabs__list autorise le défilement horizontal lorsque les libellés dépassent la largeur (mobile ou intitulés longs).

Première étape du formulaire multi-onglets.

Étape suivante.

Pièces jointes.

Récapitulatif.

Signature.

Confirmation d’envoi.

<div class="bj-tabs" data-bj-tabs>
  <div class="bj-tabs__list" role="tablist" aria-label="Étapes">
    <button type="button" class="bj-tabs__tab" data-bj-tab role="tab" aria-selected="true" tabindex="0">Étape 1 — Identité</button>
    <button type="button" class="bj-tabs__tab" data-bj-tab role="tab" aria-selected="false" tabindex="-1">Étape 2 — Coordonnées</button>
    <!-- … jusqu’à 6–8 onglets selon le parcours -->
  </div>
  <div class="bj-tabs__panel" data-bj-tab-panel role="tabpanel" data-bj-expanded>…</div>
  …
</div>

Marquage sans script

Sans JavaScript, reproduisez l’état actif avec aria-selected="true" sur l’onglet courant, tabindex="0" / tabindex="-1" sur les autres, et data-bj-expanded sur le panneau affiché. Les classes bj-tabs__tab--active et bj-tabs__panel--active reprennent le même style que le script.

Panneau visible sans data-bj-tabs.

Ce panneau reste masqué par le CSS.

<div class="bj-tabs">
  <div class="bj-tabs__list" role="tablist" aria-label="Sans script">
    <button type="button" class="bj-tabs__tab bj-tabs__tab--active" role="tab" aria-selected="true" tabindex="0">Actif</button>
    <button type="button" class="bj-tabs__tab" role="tab" aria-selected="false" tabindex="-1">Inactif</button>
  </div>
  <div class="bj-tabs__panel bj-tabs__panel--active" role="tabpanel" data-bj-expanded><p>Panneau visible</p></div>
  <div class="bj-tabs__panel" role="tabpanel"><p>Masqué</p></div>
</div>

Navigation clavier

Lorsqu’un onglet a le focus, utilisez Flèche droite et Flèche gauche pour passer à l’onglet suivant ou précédent (le panneau affiché suit la sélection). Début (Home) active le premier onglet, Fin (End) le dernier. Le script repositionne le focus sur l’onglet cible après ces raccourcis.

Classes CSS

Classe / attribut	Description
`bj-tabs + data-bj-tabs`	Conteneur racine du composant.
`bj-tabs__list`	Barre d’onglets (role="tablist").
`bj-tabs__tab + data-bj-tab`	Bouton d’onglet (role="tab").
`bj-tabs__panel + data-bj-tab-panel`	Panneau de contenu (role="tabpanel") ; visibilité pilotée par data-bj-expanded.
`bj-tabs__tab--active`	Modificateur CSS optionnel sur l’onglet sélectionné (équivalent visuel à aria-selected="true").
`bj-tabs__panel--active`	Modificateur CSS optionnel sur le panneau visible (équivalent à data-bj-expanded).