Composant

Accordéons

Les accordéons permettent d’afficher et de masquer des sections de contenu afin de réduire la longueur visuelle d’une page.

Accordéon simple

Utilisez un accordéon seul pour masquer un contenu secondaire, une explication détaillée ou la réponse à une question.

HTML 
<section class="lumy-accordion">
    <h3 class="lumy-accordion__title">
        <button
            class="lumy-accordion__trigger"
            id="accordion-trigger"
            type="button"
            aria-expanded="false"
            aria-controls="accordion-panel"
        >
            Qu’est-ce que Lumy UI ?
        </button>
    </h3>

    <div
        class="lumy-accordion__panel"
        id="accordion-panel"
        role="region"
        aria-labelledby="accordion-trigger"
        hidden
    >
        <h4>Un design system partagé</h4>

        <p>
            Lumy UI rassemble les fondations, composants et
            comportements utilisés dans les produits Lumy.
        </p>
    </div>
</section>

Ouvert par défaut

Pour afficher le contenu au chargement, définissez aria-expanded="true" et retirez l’attribut hidden du panneau.

Ce contenu est immédiatement visible. Le visiteur peut toujours le refermer avec le bouton de l’accordéon.

HTML 
<section class="lumy-accordion">
    <h3 class="lumy-accordion__title">
        <button
            class="lumy-accordion__trigger"
            id="accordion-trigger"
            type="button"
            aria-expanded="true"
            aria-controls="accordion-panel"
        >
            Accordéon ouvert au chargement
        </button>
    </h3>

    <div
        class="lumy-accordion__panel"
        id="accordion-panel"
        role="region"
        aria-labelledby="accordion-trigger"
    >
        <p>Ce contenu est immédiatement visible.</p>
    </div>
</section>

Groupe d’accordéons

Placez plusieurs composants dans .lumy-accordions. Par défaut, plusieurs accordéons peuvent rester ouverts simultanément.

HTML 
<div class="lumy-accordions">
    <section class="lumy-accordion">
        <h3 class="lumy-accordion__title">
            <button
                class="lumy-accordion__trigger"
                id="accordion-trigger-1"
                type="button"
                aria-expanded="false"
                aria-controls="accordion-panel-1"
            >
                Premier accordéon
            </button>
        </h3>

        <div
            class="lumy-accordion__panel"
            id="accordion-panel-1"
            role="region"
            aria-labelledby="accordion-trigger-1"
            hidden
        >
            <p>Contenu du premier accordéon.</p>
        </div>
    </section>

    <section class="lumy-accordion">
        <h3 class="lumy-accordion__title">
            <button
                class="lumy-accordion__trigger"
                id="accordion-trigger-2"
                type="button"
                aria-expanded="false"
                aria-controls="accordion-panel-2"
            >
                Deuxième accordéon
            </button>
        </h3>

        <div
            class="lumy-accordion__panel"
            id="accordion-panel-2"
            role="region"
            aria-labelledby="accordion-trigger-2"
            hidden
        >
            <p>Contenu du deuxième accordéon.</p>
        </div>
    </section>
</div>

Groupe exclusif

Ajoutez data-lumy-accordion-exclusive au groupe pour n’autoriser qu’un seul élément ouvert à la fois. La variante .lumy-accordions--joined réunit visuellement les éléments.

Gérez votre compte, votre mot de passe et vos méthodes de connexion.

HTML 
<div
    class="lumy-accordions lumy-accordions--joined"
    data-lumy-accordion-exclusive
>
    <section class="lumy-accordion">
        <h3 class="lumy-accordion__title">
            <button
                class="lumy-accordion__trigger"
                id="accordion-trigger-1"
                type="button"
                aria-expanded="true"
                aria-controls="accordion-panel-1"
            >
                Premier accordéon
            </button>
        </h3>

        <div
            class="lumy-accordion__panel"
            id="accordion-panel-1"
            role="region"
            aria-labelledby="accordion-trigger-1"
        >
            <p>Contenu du premier accordéon.</p>
        </div>
    </section>

    <section class="lumy-accordion">
        <h3 class="lumy-accordion__title">
            <button
                class="lumy-accordion__trigger"
                id="accordion-trigger-2"
                type="button"
                aria-expanded="false"
                aria-controls="accordion-panel-2"
            >
                Deuxième accordéon
            </button>
        </h3>

        <div
            class="lumy-accordion__panel"
            id="accordion-panel-2"
            role="region"
            aria-labelledby="accordion-trigger-2"
            hidden
        >
            <p>Contenu du deuxième accordéon.</p>
        </div>
    </section>
</div>

Accessibilité

  • Le déclencheur est un véritable <button type="button">.
  • aria-expanded indique si le panneau est ouvert ou fermé.
  • aria-controls référence l’identifiant unique du panneau associé.
  • Le panneau utilise aria-labelledby pour référencer son déclencheur.
  • Les touches Entrée et Espace ouvrent ou ferment naturellement l’accordéon grâce à l’élément bouton.
  • Dans un groupe, les touches Flèche haut, Flèche bas, Début et Fin déplacent le focus entre les déclencheurs.
  • Chaque valeur d’id doit être unique dans toute la page.