Accordion
Accordéon
Un accordéon empile des sections dont les titres peuvent ouvrir ou fermer leur propre contenu.
Accordéon
Un accordéon empile des sections dont les titres peuvent ouvrir ou fermer leur propre contenu.
Choisissez-le lorsque
Utilisez-le pour des sections optionnelles, chacune ayant un titre clair et distinct.
Un vrai exemple
Une FAQ montre les questions en premier. On peut ouvrir une réponse sans quitter la page.
Parties principales
- 01Trigger or task context
- 02Primary control surface
- 03Feedback, focus, and dismissal
Utilisez-le lorsque
Utilisez-le pour des sections optionnelles, chacune ayant un titre clair et distinct.
Ne l'utilisez pas lorsque
Ne cachez jamais des informations courtes et essentielles uniquement pour rendre la page plus propre.
Nom utilisé dans le code
<details><summary> Avant d'expédier
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Accordéon (Accordion). User context: Une FAQ montre les questions en premier. On peut ouvrir une réponse sans quitter la page. Recommended pattern: Accordéon (Accordion). Why it fits: Utilisez-le pour des sections optionnelles, chacune ayant un titre clair et distinct. Do not use it when: Ne cachez jamais des informations courtes et essentielles uniquement pour rendre la page plus propre. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): C'est officiel pour cette source. D'autres plateformes ou équipes peuvent utiliser le terme d'une autre manière. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Accordéon (Accordion) is used now. Definition: Un accordéon empile des sections dont les titres peuvent ouvrir ou fermer leur propre contenu. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.