Sommaire

Table des matières pour les contenus longs ; le composant BjSummary rend un nav avec titre, liste et liens d’ancre.

Exemple

<nav class="bj-summary" aria-labelledby="sommaire-titre">
  <p class="bj-summary__title" id="sommaire-titre">Dans cette page</p>
  <ul class="bj-summary__list">
    <li><a class="bj-summary__link" href="#s1">Contexte</a></li>
    <li><a class="bj-summary__link" href="#s2">Procédure</a></li>
    <li><a class="bj-summary__link" href="#s3">Contacts</a></li>
  </ul>
</nav>

Structure

Les ancres href="#id" ciblent des id stables dans la page ; la numérotation visuelle repose sur les styles de bj-summary__list / bj-summary__link.

Numérotation

Numérotation CSS automatique sur bj-summary__link lorsque les styles du DS sont chargés.

Classes CSS

ClasseDescription
bj-summaryConteneur <code>nav</code> (sommaire).
bj-summary__titleTitre du bloc (<code>p</code>), référencé par <code>aria-labelledby</code>.
bj-summary__listListe <code>ul</code> des entrées.
bj-summary__linkLien vers une ancre dans la page.

Accessibilité

aria-labelledby pointant vers l’id du titre ; ancres id stables et uniques.