Composants
Les composants sont les éléments réutilisables du Design System, conçus pour composer des interfaces cohérentes et accessibles.
Summary
Section repliable avec titre, description courte et contenu associé.
Aperçu
Le modèle par défaut utilise un h2 pour porter le niveau de section principal.
Titre de section
Description courte de la section.
Titre de section
Description courte de la section.Contenu associé à la section.
<details class="app-summary">Usage
Utiliser le summary pour regrouper une zone éditable, une famille de paramètres ou une section de contenu que l’utilisateur peut ouvrir et fermer.
- Utiliser un seul titre dans le déclencheur, avec une description courte si elle aide à comprendre la section.
- Choisir le niveau de titre selon la hiérarchie réelle de la page.
- Placer le contenu détaillé dans
.app-summary-content. - Le radius et le fond suivent les tokens des cartes :
--app-card-radiuset--app-card-background. - Éviter de répéter le même titre dans le contenu ouvert.
Variantes de titres
Le composant accepte un titre en h2, h3 ou h4 selon son contexte. La classe typographique doit correspondre au niveau HTML choisi.
| Niveau | Balise | Classe à utiliser |
|---|---|---|
| Section principale | h2 |
app-heading-2 app-summary-heading |
| Sous-section | h3 |
app-heading-3 app-summary-heading |
| Groupe local | h4 |
app-heading-4 app-summary-heading |
Sous-section
Description courte de la sous-section.
Sous-section
Description courte de la sous-section.Contenu associé à la sous-section.
Groupe local
Description courte du groupe.
Groupe local
Description courte du groupe.Contenu associé au groupe.
Accessibilité
Le composant repose sur les éléments natifs details et summary, ce qui conserve l’ouverture au clavier et l’état replié natif.
- Conserver un titre explicite dans le déclencheur.
- Ne pas dupliquer le même titre dans le contenu ouvert.
- Respecter l’ordre des niveaux de titres dans la page.
- Ne pas ajouter d’
aria-labelau chevron : l’icône est décorative, générée par CSS, et lesummarynatif porte déjà le nom accessible et l’état ouvert/fermé. - Éviter de placer des contrôles complexes directement dans le déclencheur.