Accordéon non fonctionnel avec l'En-tête

n-langle commented 1 year ago

Description

Si le composant en-tête est inclus avec le composant accordéon, ce dernier ne fonctionne pas pour les écrans supérieur ou égal à 992px

Les étapes pour reproduire le bug

Reprendre le code html suivant en ajoutant les fichiers dsfr.css dsfr.nomodule.js de la version 1.10.1 :

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="dsfr.css" />
</head>
<body>
<header role="banner" class="fr-header">
    <div class="fr-header__body">
        <div class="fr-container">
            <div class="fr-header__body-row">
                <div class="fr-header__brand fr-enlarge-link">
                    <div class="fr-header__brand-top">
                        <div class="fr-header__logo"> <a href="/" title="Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)">
                                <p class="fr-logo"> Intitulé <br>officiel </p>
                            </a> </div>
                        <div class="fr-header__navbar"> <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-491" aria-haspopup="menu" id="button-492" title="Menu"> Menu </button> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fr-header__menu fr-modal" id="modal-491" aria-labelledby="button-492">
        <div class="fr-container"> <button class="fr-btn--close fr-btn" aria-controls="modal-491" title="Fermer"> Fermer </button>
            <div class="fr-header__menu-links"> </div>
            <nav class="fr-nav" id="navigation-494" role="navigation" aria-label="Menu principal">
                <ul class="fr-nav__list">
                    <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li>
                    <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li>
                    <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li>
                    <li class="fr-nav__item"> <a class="fr-nav__link" href="#" target="_self">accès direct</a> </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<section class="fr-accordion">
    <h3 class="fr-accordion__title">
        <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-106">Intitulé accordéon</button>
    </h3>
    <div class="fr-collapse" id="accordion-106">
        <p>test</p>
    </div>
</section>

<script src="dsfr.nomodule.js"></script>
</body>
</html>

Cliquer sur le bouton '.fr-accodion__btn' dans une résolution supérieure ou égale à 992px

Comportement attendu

L'accordéon devrait s'ouvrir mais il reste fermé.

Configuration et système utilisé

Version du DSFR : 1.10.1 ou 1.10.0
Appareil (mobile, tablette, desktop) : Mac Book Pro
Système d’exploitation : Catalina 10.15.7
Navigateur et version : Firefox 117.0 (64 bits) et Chrome 116.0.5845.179 (Build officiel) (x86_64)

lab9fr commented 1 year ago

Bonjour @n-langle,

En implémentant le code html fourni dans une page avec la css et le js, nous ne reproduisons pas l'erreur.

Pouvez-vous nous fournir un codepen reproduisant l'erreur afin que l'on puisse voir d'où peut provenir le problème ?

Merci Bertrand, pour l'équipe DSFR

n-langle commented 1 year ago

Bien sûr @lab9fr : https://codepen.io/n-langle/pen/eYbgEvy La vidéo : https://github.com/GouvernementFR/dsfr/assets/28226882/1989b8be-230b-4fe7-aaf9-c790544fdecd

En desktop, la variable isEnable du composant collapse est égale à false :

lab9fr commented 1 year ago

Merci pour ce retour, problème très étrange. Nous allons étudier la problématique Bertrand, pour l'équipe DSFR

n-langle commented 11 months ago

Bonjour @lab9fr,

Pour info, il existe le même genre de problème avec le composant Onglet. Si deux blocs onglet sont ajoutés dans une page avec un header, l'instantiation devient chaotique :

https://codepen.io/n-langle/full/NWemyoz

lab9fr commented 11 months ago

Bonsoir,

Je viens de réétudier le premier problème, il s'agit d'un souci à la minimisation, le problème n'existe pas en non minimisé et n'a pas lieu d'être. Nous allons continuer à chercher plus loin pour voir où la compilation pose problème. Concernant le second problème, je n'arrive pas à le reproduire, même avec le codepen. Mais il s'agit sans doute du même problème.

Merci pour ces rapports, nous allons voir comment les solutionner. Bertrand, pour l'équipe DSFR

n-langle commented 11 months ago

Bonjour @lab9fr,

Merci de votre retour. Malheureusement, je pense que le problème se situe ailleurs. Nos développements se font exclusivement avec les versions non minifiées.

n-langle commented 11 months ago

@lab9fr,

Comme pour le bug de l'accordéon, celui ci ne se produit qu’en desktop :

https://github.com/GouvernementFR/dsfr/assets/28226882/d18f3cc7-a3c9-4595-9728-4215a1a1e895

lab9fr commented 11 months ago

@n-langle,

En mettant le code non minifié, tout marche correctement : https://codepen.io/lab9/pen/KKbjXPN

J'imagine que vous partez effectivement du code non minifié, mais qu'il doit passer par un compilateur via un webpack ou quelque chose dans le genre. Je crois qu'il y a une particularité de code qui passe mal le processus de minification, j'arrive à une incohérence entre la variable locale de l'accordion _isEnabled qui est à true, alors que le getter, qui renvoie normalement la valeur _isEnabled, renvoie false. Hors, c'est la modale qui devrait renvoyer false vu qu'elle est désactivée en desktop. Nous allons continuer à explorer la problématique.

En attendant, je vous conseillerai de paramétrer votre compilateur pour le rendre moins aggressif que les paramètres normaux.

Bonne journée Bertrand

n-langle commented 11 months ago

@lab9fr,

C'est la version nomodule.js qui est problèmatique, dans votre code pen vous avez utilisé la version module.js. Dans notre projet, les fichiers du DSFR sont exploités tel quel. Il ne passe par notre stack.

keryanS commented 2 months ago

Bonjour,

Le problème est-il toujours d'actualité en v1.12 ?

Keryan, Pour l'équipe du DSFR

n-langle commented 2 months ago

Bonjour @keryanS,

Je n'ai pas testé le fichier dsfr.nomodule.js dans la version 1.12

GouvernementFR / dsfr