DSFRisation du sélecteur de profil

IGNF · Jun 12, 2024 · 9d75ae5 · 9d75ae5
1 parent 29d0936
commit 9d75ae5
Showing 1 changed file with 28 additions and 15 deletions.
diff --git a/_includes/layouts/profil.njk b/_includes/layouts/profil.njk
@@ -6,25 +6,38 @@ sidemenu: false
     <div class="fr-container fr-mt-6w" data-pagefind-body>
         <div class="fr-grid-row">
             <div class="fr-col-4">
-                <p>Je suis</p>
-                <div>
-                <input type="radio" id="developpeur" name="profil" value="developpeur" onclick="document.location.href='../developpeur/'" {% if developpeur %}checked{% endif %} />
-                <label for="developpeur">Développ·eur·euse</label>
-                </div>
-                <div>
-                <input type="radio" id="producteur" name="profil" value="producteur" onclick="document.location.href='../producteur/'" {% if producteur %}checked{% endif %} />
-                <label for="producteur">Product·eur·rice</label>
-                </div>
-                <div>
-                <input type="radio" id="utilisateur" name="profil" value="utilisateur" onclick="document.location.href='../utilisateur/'" {% if utilisateur %}checked{% endif %} />
-                <label for="utilisateur">Utilisat·eur·rice</label>
-                </div>
+                <fieldset class="fr-fieldset" id="profile-hint" aria-labelledby="profile-hint-legend">
+                    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="profile-hint-legend">
+                        Je suis
+                    </legend>
+                    <div class="fr-fieldset__element">
+                        <div class="fr-radio-group">
+                            <input type="radio" id="developpeur" name="profile-hint" value="developpeur" onclick="document.location.href='../developpeur/'" {% if developpeur %}checked{% endif %}/>
+                            <label for="developpeur">
+                                Développ·eur·euse
+                            </label>
+                        </div>
+                    </div>
+                    <div class="fr-fieldset__element">
+                        <div class="fr-radio-group">
+                            <input type="radio" id="producteur" name="profile-hint" value="producteur" onclick="document.location.href='../producteur/'" {% if producteur %}checked{% endif %}/>
+                            <label for="producteur">
+                                Product·eur·rice
+                            </label>
+                        </div>
+                    </div>
+                    <div class="fr-fieldset__element">
+                        <div class="fr-radio-group">
+                            <input type="radio" id="utilisateur" name="profile-hint" value="utilisateur" onclick="document.location.href='../utilisateur/'" {% if utilisateur %}checked{% endif %}/>
+                            <label for="utilisateur">Utilisat·eur·rice</label>
+                        </div>
+                    </div>
+                </fieldset>
             </div>
             <div class="fr-col-8">
                 <h1>{{ title }}</h1>
                 {{ content | safe }}
             </div>
         </div>
     </div>
-</div>
-
+</div>