Tiroir (Drawer)
Panneau latéral glissant depuis le bord de l'écran, idéal pour la navigation, les filtres ou le contenu complémentaire. Overlay, fermeture Échap, piège de focus et restauration du focus sur l'élément déclencheur.
Exemples
<button type="button" class="bj-btn" data-bj-drawer-open="my-drawer">
Ouvrir le tiroir
</button>
<div class="bj-drawer" id="my-drawer" role="dialog" aria-modal="true" aria-labelledby="my-drawer-t">
<div class="bj-drawer__overlay" data-bj-drawer-close></div>
<div class="bj-drawer__panel">
<header class="bj-drawer__header">
<h2 class="bj-drawer__title" id="my-drawer-t">Titre du tiroir</h2>
<button type="button" class="bj-drawer__close" data-bj-drawer-close aria-label="Fermer">
<i class="ri-close-line" aria-hidden="true"></i>
</button>
</header>
<div class="bj-drawer__body">
<p>Contenu du tiroir.</p>
</div>
<footer class="bj-drawer__footer">
<button type="button" class="bj-btn bj-btn--tertiary" data-bj-drawer-close>Annuler</button>
<button type="button" class="bj-btn">Valider</button>
</footer>
</div>
</div>Positions
<div class="bj-drawer bj-drawer--right" id="drawer-right" ...>
...
</div>Tailles
<!-- Petit -->
<div class="bj-drawer bj-drawer--sm" ...>...</div>
<!-- Grand -->
<div class="bj-drawer bj-drawer--lg" ...>...</div>
<!-- Pleine largeur -->
<div class="bj-drawer bj-drawer--full" ...>...</div>Classes CSS
| Classe | Description |
|---|---|
.bj-drawer | Conteneur principal du tiroir |
.bj-drawer__overlay | Fond semi-transparent derrière le panneau |
.bj-drawer__panel | Panneau glissant contenant le contenu |
.bj-drawer__header | En-tête avec titre et bouton de fermeture |
.bj-drawer__title | Titre du tiroir |
.bj-drawer__close | Bouton de fermeture |
.bj-drawer__body | Zone de contenu défilable |
.bj-drawer__footer | Pied de panneau avec actions |
.bj-drawer--right | Glisse depuis la droite |
.bj-drawer--sm | Panneau étroit (18 rem) |
.bj-drawer--lg | Panneau large (36 rem) |
.bj-drawer--full | Panneau pleine largeur |
Accessibilité
Le conteneur doit exposer role="dialog", aria-modal="true" et aria-labelledby vers l'identifiant du titre du tiroir, afin d'associer un nom accessible au panneau.
Avec le script DSBJ ou les composants BjDrawer Vue/React, le focus est piégé dans le tiroir ouvert : Tab et Maj+Tab parcourent uniquement les éléments focalisables à l'intérieur du panneau, sans retourner à la page de fond. À la fermeture, le focus est restauré sur l'élément qui a ouvert le tiroir (sélecteur data-bj-drawer-open en HTML pur).
La touche Échap ferme le tiroir lorsque le comportement clavier est actif. Pour le bouton de fermeture à icône seule, fournissez un libellé accessible (aria-label en HTML) ; les composants Vue et React exposent la prop closeLabel pour l'internationalisation.
Raccourcis clavier
Tab: élément focalisable suivant dans le tiroir.Maj+Tab: élément focalisable précédent ; le cycle reste dans le panneau.Échap: fermeture (script DSBJ ou composants).