Système de Conception de Feuilles de Fond (Bottom Sheet)

Système de Conception de Feuille de Fond (Bottom Sheet)

Objectif

Le Système de Conception de Feuille de Fond fournit un cadre standardisé, mobile-first, pour les feuilles de fond coulissantes, les feuilles d'action et les tiroirs modaux en bas de l'écran sur les interfaces web et les applications web progressives (PWA). Les appareils mobiles modernes avec des rapports d'écran allongés rendent les superpositions positionnées en haut et les popups centrés difficiles à atteindre d'une seule main. Les feuilles de fond ancrent les tâches interactives, les menus contextuels, les contrôles de filtre et les sous-vues détaillées en bas de l'écran, dans la portée naturelle du pouce de l'utilisateur.

Concevoir un système de feuille de fond efficace nécessite d'établir des hauteurs de cran (écrêté/replié, partiel/demi-hauteur, pleine hauteur), des indicateurs de glissement tactiles (poignées de préhension), un assombrissement de l'arrière-plan (scrim/voile), des mécanismes de verrouillage du défilement du corps, des marges de sécurité de la zone d'affichage (env(safe-area-inset-bottom)), et une adaptation responsive transparente sur le bureau (transformation des feuilles de fond en modales centrées ou popovers sur les fenêtres plus larges).

Cas d'utilisation

• Sélecteurs d'options de produits mobiles : Présentation des sélecteurs de taille, couleur, quantité et abonnement sur les pages détaillées des produits e-commerce sans naviguer loin de la page.
• Contrôles de filtres et de tri mobiles : Fourniture d'options de filtrage multi-facettes pour les pages catalogue e-commerce ou les vues de recherche SaaS avec des barres d'actions persistantes en bas "Appliquer les filtres".
• Feuilles d'actions contextuelles : Déclenchement d'actions rapides en 1 tap (Partager, Marquer, Ajouter à la liste, Signaler) sur les flux sociaux, les cartes médias ou les tableaux de données.
• Cartes de détails de localisation & de carte : Affichage des détails de points d'intérêt extensibles ou des chronologies de suivi de livraison qui glissent vers le haut sur les vues cartographiques (cran d'écrêtage à extension pleine hauteur).
• Sous-workflows multi-étapes mobiles : Réalisation de tâches rapides en ligne telles que la sélection du mode de paiement lors du checkout, le choix d'une adresse ou la soumission rapide de commentaires.

Quand ne PAS utiliser

• Routage de navigation global : Pour la navigation principale de l'application entre les sections principales, utilisez système-de-navigation-bas ou système-de-navigation-site.
• Alertes de confirmation destructrices : Pour les actions critiques et irréversibles (par exemple, "Supprimer le compte"), utilisez une boîte de dialogue modale centrée (overlay-and-dialog-system) avec role="alertdialog" qui exige une confirmation explicite.
• Contenu pliable dans la page : Pour activer/désactiver du contenu extensible en ligne dans le flux de la page, utilisez système-d-accordéon-ui ou système-d-onglets-ui.
• Mises en page de bureau grand écran (>1024px) : N'affichez pas de feuilles de fond en pleine largeur sur les écrans de bureau. Adaptez l'interface utilisateur à des boîtes de dialogue modales centrées (overlay-and-dialog-system), des tiroirs latéraux (système-de-mise-en-page-tableau-de-bord) ou des popovers ancrés (système-d-infobulle-et-d-indice).

Entrées

1. Type de tâche et profondeur : Nature du contenu (liste d'actions rapides en 1 tap vs. formulaire multi-champs vs. liste déroulante détaillée).
2. Configuration des crans : Choix des hauteurs d'accrochage (Cran simple : 100% pleine hauteur ; Cran double : 50% moitié et 100% pleine ; Cran triple : 20% écrêté, 50% moitié, 90% pleine).
3. Contexte de déclenchement : Élément ou action utilisateur initiant la feuille (tap sur bouton, appui long, geste de balayage, ou lien profond).
4. Jetons de conception : Couleurs de fond de surface, rayon de bordure, dimensions de la poignée de glissement, ombres d'élévation, opacité du voile et échelle typographique.
5. Stratégie d'adaptation bureau : Transition de mise en page choisie pour les fenêtres ≥1024px (Convertir en modale centrée, Convertir en popover ancré, ou Convertir en tiroir latéral coulissant).

Sorties

1. Spécification d'anatomie de la feuille de fond : Plan de mise en page définissant la barre de poignée de glissement, l'en-tête (titre + bouton de fermeture), le corps déroulant, le pied de page fixe (barre CTA) et le remplissage de la marge de sécurité.
2. Hauteur de cran et matrice de jetons de gestes : Variables CSS et définitions de seuil d'accrochage (--sheet-detent-peek, --sheet-detent-half, --sheet-detent-full) avec règles de rejet par vélocité de glissement.
3. Spécification de voile et d'élévation : Jetons d'opacité du voile, paramètres de filtre de flou du voile, hiérarchie des z-index et règles de verrouillage du défilement du corps (overflow: hidden sur le body).
4. Correspondance ARIA pour clavier et lecteur d'écran : role="dialog", aria-modal="true", aria-labelledby, spécification du piège de focus et définitions du gestionnaire de touche Escape.
5. Plan d'adaptation responsive pour le bureau : Points d'arrêt des media queries transformant les feuilles de fond mobiles en boîtes de dialogue modales centrées ou popovers pour les tablettes et le bureau.

---

Workflow

1. Catégoriser le type de feuille et la structure de cran

Sélectionnez le mode de cran approprié en fonction du volume de contenu et de la fréquence d'interaction :

• Feuille d'action non modale (Écrêté/Ajusté au contenu) : Se redimensionne automatiquement pour s'adapter à un contenu court (2 à 5 actions de menu). Les hauteurs varient généralement entre 180px et 320px. Se ferme lors de la sélection d'une action ou du tap sur le voile.
• Feuille à mi-hauteur / double cran (50% et 90% de la fenêtre) : Utilisée pour les tâches de densité moyenne comme le choix de variations de produits ou le tri. S'ouvre à 50% de hauteur (50vh) ; le glissement vers le haut s'accroche à 90% de hauteur (90vh).
• Feuille pleine hauteur / extensible (90%–100% de la fenêtre) : Utilisée pour les workflows mobiles complexes comme les filtres multi-facettes ou les étapes de checkout. Fournit un en-tête et un pied de page fixes avec un corps déroulant interne.

2. Définir l'anatomie visuelle et la hiérarchie spatiale

Construisez la feuille en utilisant cinq couches anatomiques distinctes :

• Voile (Fond assombri) : Superposition fixe couvrant toute la fenêtre (background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 1000;).
• Conteneur de la feuille : Panneau fixe ancré au bord inférieur de l'écran (position: fixed; bottom: 0; left: 0; right: 0; border-radius: 16px 16px 0 0; background: var(--surface-bg); z-index: 1001;).
• Barre de poignée de glissement (Indicateur) : Pilule visuelle centrée en haut (width: 36px; height: 5px; border-radius: 999px; background: var(--border-neutral); margin: 8px auto; cursor: grab;).
• Couche d'en-tête : Contient le titre de la feuille (h2), un sous-titre optionnel et un bouton de fermeture explicite (<button aria-label="Fermer la feuille">✕</button>).
• Couche du corps déroulant : Conteneur de contenu interne configuré avec overflow-y: auto; -webkit-overflow-scrolling: touch;.
• Couche de pied de page fixe (CTA) : Barre d'actions ancrée en bas avec boutons primaires/secondaires et remplissage de la marge de sécurité (padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px))).

3. Établir les gestes, l'accrochage et les mécanismes de fermeture

Mettez en place des interactions tactiles fluides pour un retour gestuel physique :

• Interaction de glissement : Le glissement vers le bas sur la poignée ou l'en-tête déplace la feuille vers le bas en douceur en utilisant transform: translateY().
• Seuils d'accrochage :
  • Si glissé vers le bas au-delà de 30% de la hauteur actuelle ou balayé vers le bas avec une vélocité > 0.5px/ms, déclencher la fermeture complète.
  • Si glissé entre 30% et 70% en mode double cran, s'accrocher au cran le plus proche (50% ou 90%).
• Collision de verrouillage du défilement : Lors du glissement à l'intérieur de la couche du corps déroulant, n'initier le glissement pour fermer la feuille que si la position de défilement du corps est à scrollTop === 0 et que l'utilisateur balaye vers le bas.
• Verrouillage du défilement du corps : Lorsque la feuille de fond modale est ouverte, appliquez overflow: hidden au document.body pour empêcher les fuites de défilement de la page d'arrière-plan.

4. Implémenter les zones de sécurité de la fenêtre et le contraste de surface

Assurez une intégration visuelle complète avec les découpes d'affichage matériel mobiles et les modes clair/sombre :

• Gestion des marges de sécurité : Appliquez toujours padding-bottom: env(safe-area-inset-bottom, 16px) au conteneur de la feuille ou au pied de page collant afin que le contenu/les boutons ne soient pas couverts par les indicateurs d'accueil iOS.
• Limite de hauteur maximale : Limitez les feuilles pleine hauteur à max-height: calc(100vh - 48px) ou max-height: calc(100dvh - 48px) pour laisser une tranche visible de 48px du contexte de la page parente assombrie en haut.
• Élévation de surface : Utilisez des jetons d'ombre d'élévation profonde (box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15)) pour créer une séparation du contenu de la page d'arrière-plan.

5. Configurer l'accessibilité et la navigation clavier

Assurez la conformité complète avec les normes WCAG 2.1 / 2.2 AA :

• Rôles ARIA : Le conteneur doit utiliser role="dialog" ou role="region" (pour les feuilles d'écrêtage non modales), aria-modal="true", et aria-labelledby="sheet-title-id".
• Gestion du focus :
  • À l'ouverture, déplacez programmatiquement le focus vers le premier élément focusable à l'intérieur de la feuille ou le bouton de fermeture.
  • Implémentez un piège de focus empêchant Tab ou Shift+Tab de sortir de la feuille vers l'arrière-plan inerte.
  • À la fermeture, restorez le focus sur l'élément déclencheur qui a ouvert la feuille.
• Contrôles clavier : Appuyer sur Escape doit immédiatement fermer la feuille.
• Annonces du lecteur d'écran : Les changements de contenu dynamique à l'intérieur de la feuille doivent utiliser des régions aria-live="polite".

6. Concevoir l'adaptation responsive pour le bureau

Les feuilles de fond semblent peu soignées lorsqu'elles sont étirées en pleine largeur sur les moniteurs de bureau (≥1024px). Implémentez des règles de transformation responsive explicites :

• Mode modale bureau (Par défaut) : Sur les fenêtres ≥1024px, transformez la feuille de fond en une boîte de dialogue modale centrée (width: 100%; max-width: 540px; border-radius: 16px; margin: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);).
• Mode popover bureau (Menus contextuels) : Pour les feuilles d'actions rapides, transformez la feuille en un popover ancré positionné à côté du bouton déclencheur.
• Mode tiroir latéral bureau (Formulaires/Filtres complexes) : Pour les filtres multi-facettes profonds ou les flux multi-étapes, transformez en un tiroir latéral coulissant aligné à droite (width: 400px; height: 100vh; top: 0; right: 0; border-radius: 16px 0 0 16px;).

---

Règles de décision

Matrice de sélection des crans

Type de feuille	Configuration des crans	Volume de contenu	Cas d'utilisation idéal
Feuille d'action	Ajusté au contenu (Cran simple)	2 à 6 liens/éléments d'action	Partage rapide, menu contextuel, changement d'option simple.
Feuille de sélection	Double cran (50vh initial, 90vh étendu)	5 à 15 éléments déroulants	Sélecteur de taille/couleur de produit, sélecteur d'adresse, mode de paiement.
Tiroir interactif	Triple cran (120px écrêté, 50vh, 90vh)	Données spatiales/de carte complexes	Cartes de suivi de livraison, arrêts de transport en commun en direct, détails de covoiturage.
Feuille de flux complet	Cran simple (90vh - 100vh fixe)	Formulaire/filtres multi-sections	Filtres multi-catalogue, étape de checkout mobile, workflow d'enquête.

Choix de transformation bureau

• Utiliser une modale centrée : Lorsque la feuille contient des formulaires structurés, des sélecteurs de variations ou des options de checkout.
• Utiliser un popover ancré : Lorsque la feuille contient des actions contextuelles courtes (Partager, Modifier, Supprimer).
• Utiliser un tiroir latéral : Lorsque la feuille contient des contrôles de filtre ou des panneaux d'édition sur des tableaux de bord et des tableaux de données.

---

Contraintes

• Accessibilité (WCAG 2.1 / 2.2 AA) :
  • Doit fournir un piège de focus explicite lorsque aria-modal="true" est actif.
  • Les cibles tactiles pour tous les éléments internes et les boutons de fermeture doivent mesurer au moins 44x44px (WCAG 2.5.8 / 2.5.5).
  • Le contenu d'arrière-plan derrière les feuilles de fond modales doit être marqué inert ou masqué pour les technologies d'assistance.
• Dimensions tactiles et gestuelles :
  • La zone de contact de la poignée de glissement doit être agrandie avec un remplissage invisible (min-height: 24px, min-width: 60px) même si la poignée visuelle est de 36x5px.
• Unités dynamiques de la fenêtre :
  • Utilisez dvh (hauteur de fenêtre dynamique) là où c'est pris en charge (height: 90dvh), en revenant à vh pour s'adapter aux expansions et réductions dynamiques de la barre d'adresse mobile.

---

Modèles d'échec courants

• Le remplissage de marge de sécurité manquant : Omission de env(safe-area-inset-bottom), ce qui fait que les boutons d'action du pied de page primaire chevauchent les barres de gestes iOS.
• Feuilles de bureau étirées en pleine largeur : Permettre à une feuille de fond mobile de s'étendre jusqu'à 1920px de largeur sur les moniteurs de bureau.
• Blocage du détournement de défilement : Échec de la séparation entre le défilement du contenu et les gestes de glissement pour fermer la feuille, ce qui provoque l'effondrement de la feuille lorsqu'un utilisateur tente de faire défiler le texte vers le bas.
• Gestionnaire de touche Escape manquant : Omission de l'écouteur d'événement de la touche Escape, piégeant les utilisateurs de clavier de bureau à l'intérieur de la superposition de la feuille modale.
• Fuite de focus vers l'arrière-plan : Laisser les éléments de la page d'arrière-plan accessibles via la touche Tab lorsqu'une feuille de fond modale est ouverte.

---

Critères de validation

• La mise en page de la feuille comprend un indicateur visuel de glissement explicite, un en-tête avec titre, un corps déroulant et un pied de page collant.
• La marge de sécurité (padding-bottom: env(safe-area-inset-bottom)) est implémentée sur le pied de page collant et le conteneur de la feuille.
• La zone de contact de la poignée de glissement respecte une hauteur minimale de 44px pour l'accessibilité tactile.
• La feuille utilise role="dialog", aria-modal="true", aria-labelledby, et piège le focus lorsqu'elle est active.
• Appuyer sur Escape ou tapoter le voile ferme la feuille modale et restore le focus sur le bouton déclencheur.
• Le défilement du corps d'arrière-plan est verrouillé (overflow: hidden) lorsque la feuille modale est ouverte.
• Les fenêtres ≥1024px transforment proprement la feuille de fond en une boîte de dialogue modale centrée, un popover ou un tiroir latéral.