Bouton d’action flottant du sommaire mobile

Le thème Zer0-Mistakes propose un sommaire mobile repensé avec un motif de bouton d’action flottant (FAB).

Sur les affichages étroits, la barre latérale et le sommaire se replient en panneaux offcanvas ouvrables d’une pression, accessibles depuis ces FAB, afin que les longues pages restent lisibles sur un téléphone.

Aperçu

Sur les appareils mobiles (< 992px), le sommaire est accessible via un bouton flottant positionné dans le coin inférieur droit de l’écran.

Fonctionnalités

• Motif FAB : bouton flottant inspiré du Material Design
• Position fixe : toujours accessible pendant le défilement
• Z-Index adapté : n’entre pas en conflit avec les autres éléments
• Accessibilité : prise en charge complète d’ARIA

Implémentation

Balisage du bouton

<div class="d-lg-none position-fixed bottom-0 end-0 p-3" style="z-index: 1030;">
  <button class="btn btn-primary rounded-circle shadow-lg"
          style="width: 56px; height: 56px;"
          data-bs-toggle="offcanvas"
          data-bs-target="#tocSidebar"
          aria-label="Table of contents">
    <i class="bi bi-list-ul fs-4"></i>
  </button>
</div>

Attributs clés

Dimensionnement

Conformément aux directives du Material Design :

• Largeur : 56px (FAB standard)
• Hauteur : 56px (FAB standard)
• Icône : 24px (fs-4)
• Marge intérieure : 16px autour du bouton (p-3)

Intégration de l’offcanvas

Le bouton ouvre un offcanvas Bootstrap depuis la droite :

<div class="offcanvas offcanvas-end" id="tocSidebar" tabindex="-1">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">On This Page</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <!-- TOC content -->
  </div>
</div>

Personnalisation

Couleur du bouton

/* Use secondary color */
.toc-fab {
  background-color: var(--bs-secondary);
}

/* Use custom color */
.toc-fab {
  background-color: #6366f1;
  border-color: #6366f1;
}

Position

/* Move to bottom-left */
.toc-fab-container {
  left: 0;
  right: auto;
}

/* Adjust spacing */
.toc-fab-container {
  padding: 1.5rem;
}

Icône

<!-- Alternative icons -->
<i class="bi bi-journal-text"></i>
<i class="bi bi-card-list"></i>
<i class="bi bi-menu-button-wide"></i>

Accessibilité

Attributs ARIA

<button aria-label="Open table of contents"
        aria-expanded="false"
        aria-controls="tocSidebar">

Gestion du focus

• Le bouton est focalisable via la touche Tab
• Ouvre l’offcanvas avec Entrée/Espace
• Le focus revient sur le bouton à la fermeture

Lecteurs d’écran

Le bouton annonce :

1. « Ouvrir le sommaire, bouton »
2. À l’ouverture : « Sommaire, boîte de dialogue »

Comportement responsive

Classes CSS

/* Bootstrap responsive utility */
.d-lg-none {
  /* Display: none on lg and up */
}

/* Show only on mobile */
@media (max-width: 991.98px) {
  .toc-fab { display: block; }
}

Bonnes pratiques

À faire

• ✅ Garder le bouton accessible pendant le défilement
• ✅ Utiliser une icône reconnaissable
• ✅ Fournir un retour visuel à la pression
• ✅ Garantir une cible de pression suffisante (44x44px minimum)

À éviter

• ❌ Recouvrir du contenu important
• ❌ Utiliser trop de FAB
• ❌ Rendre le bouton trop petit
• ❌ Oublier les libellés d’accessibilité

Dépannage

Bouton non visible

1. Vérifiez la largeur de la fenêtre (doit être < 992px)
2. Vérifiez que le CSS Bootstrap est chargé
3. Vérifiez les conflits de z-index

L’offcanvas ne s’ouvre pas

1. Vérifiez que le JS Bootstrap est chargé
2. Vérifiez que data-bs-target correspond à l’ID
3. Recherchez les erreurs JavaScript

Problèmes de positionnement

1. Recherchez les éléments position: fixed en conflit
2. Vérifiez l’empilement des z-index
3. Testez sur un véritable appareil mobile

Ressources associées

• Navigation par barre latérale
• Table des matières
• Navigation au clavier

Voir aussi

• [[Features]]
• [[Table of Contents]]
• [[Sidebar Navigation System]]