From e88bd99375927d838c68f8cea6d312c4892b418c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9l=C3=A8ne=20Meneuvrier?= <hmeneuvrier@gmail.com>
Date: Fri, 24 May 2024 17:09:42 +0200
Subject: [PATCH] change liste and structure of form #2554

---
 .../TheSignalementAppForm.vue                 |  1 +
 .../components/SignalementFormBreadCrumbs.vue |  2 +-
 .../SignalementFormDisorderOverview.vue       | 25 ++++++++----
 .../components/SignalementFormOverview.vue    | 39 ++++++++++---------
 .../components/SignalementFormPhonefield.vue  |  4 ++
 .../components/SignalementFormScreen.vue      |  3 +-
 .../components/SignalementFormSubscreen.vue   |  2 +-
 .../SignalementFormUploadPhotos.vue           |  2 +-
 templates/footer.html.twig                    |  2 +-
 templates/front/nouveau_formulaire.html.twig  |  7 ++--
 templates/front/statistiques.html.twig        |  2 +-
 11 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/assets/vue/components/signalement-form/TheSignalementAppForm.vue b/assets/vue/components/signalement-form/TheSignalementAppForm.vue
index 1d87480d9..d51139d56 100644
--- a/assets/vue/components/signalement-form/TheSignalementAppForm.vue
+++ b/assets/vue/components/signalement-form/TheSignalementAppForm.vue
@@ -32,6 +32,7 @@
             v-if="formStore.currentScreen.slug !== 'introduction'"
             class="fr-col-12 fr-col-md-4"
             >
+              <h1 class="fr-h6">Mon signalement</h1>
               <SignalementFormBreadCrumbs
                 :clickEvent="saveAndChangeScreenBySlug"
                 />
diff --git a/assets/vue/components/signalement-form/components/SignalementFormBreadCrumbs.vue b/assets/vue/components/signalement-form/components/SignalementFormBreadCrumbs.vue
index 521adfefb..b544ab85e 100644
--- a/assets/vue/components/signalement-form/components/SignalementFormBreadCrumbs.vue
+++ b/assets/vue/components/signalement-form/components/SignalementFormBreadCrumbs.vue
@@ -37,7 +37,7 @@
     <nav class="fr-sidemenu fr-hidden fr-unhidden-md force-height-max" aria-labelledby="fr-sidemenu-title">
       <div class="fr-sidemenu__inner force-height-max">
         <div class="fr-collapse" id="fr-sidemenu-wrapper">
-          <div class="fr-sidemenu__title" id="fr-sidemenu-title">Mon signalement</div>
+          <!-- <div class="fr-sidemenu__title" id="fr-sidemenu-title">Mon signalement</div> -->
           <ul class="fr-sidemenu__list">
             <li
               v-for="menuItem in desktopMenuItems"
diff --git a/assets/vue/components/signalement-form/components/SignalementFormDisorderOverview.vue b/assets/vue/components/signalement-form/components/SignalementFormDisorderOverview.vue
index 47f9d77fd..bcec8c21d 100644
--- a/assets/vue/components/signalement-form/components/SignalementFormDisorderOverview.vue
+++ b/assets/vue/components/signalement-form/components/SignalementFormDisorderOverview.vue
@@ -3,7 +3,8 @@
     <div v-if="formStore.data.categorieDisorders.batiment.length > 0">
       <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
         <div class="fr-col-2 fr-col-md-1"><img :src="icons ? icons[0].src : ''" :alt="icons ? icons[0].alt : ''" class="fr-disorder-overview-image"></div>
-        <div class="fr-col-10 fr-col-md-11 fr-h2 fr-disorder-overview-title">Le bâtiment</div>
+        <h5 v-if="isValidationScreen" class="fr-col-10 fr-col-md-11 fr-h2 fr-disorder-overview-title">Le bâtiment</h5>
+        <h3 v-else class="fr-col-10 fr-col-md-11 fr-h2 fr-disorder-overview-title">Le bâtiment</h3>
       </div>
       <div class="fr-accordions-group">
         <section
@@ -14,9 +15,12 @@
           <div
             v-if="hasCategoryFields(disorder)"
             >
-            <h3 class="fr-accordion__title">
+            <h6 v-if="isValidationScreen" class="fr-accordion__title">
               <button class="fr-accordion__btn" aria-expanded="false" :aria-controls="'accordion-disorder-batiment-' + index">{{ dictionaryStore[disorder].default }}</button>
-            </h3>
+            </h6>
+            <h4 v-else  class="fr-accordion__title">
+              <button class="fr-accordion__btn" aria-expanded="false" :aria-controls="'accordion-disorder-batiment-' + index">{{ dictionaryStore[disorder].default }}</button>
+            </h4>
             <div class="fr-collapse" :id="'accordion-disorder-batiment-' + index">
               <div
                 v-for="field in categoryFields(disorder)"
@@ -33,7 +37,8 @@
     <div v-if="formStore.data.categorieDisorders.logement.length > 0">
       <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle">
         <div class="fr-col-2 fr-col-md-1"><img :src="icons ? icons[1].src : ''" :alt="icons ? icons[1].alt : ''" class="fr-disorder-overview-image"></div>
-        <div class="fr-col-10 fr-col-md-11 fr-h2 fr-disorder-overview-title">Le logement</div>
+        <h5 v-if="isValidationScreen" class="fr-col-10 fr-col-md-11 fr-h2 fr-disorder-overview-title">Le logement</h5>
+        <h3 v-else class="fr-col-10 fr-col-md-11 fr-h2 fr-disorder-overview-title">Le logement</h3>
       </div>
       <div class="fr-accordions-group">
         <section
@@ -44,9 +49,12 @@
           <div
             v-if="hasCategoryFields(disorder)"
             >
-            <h3 class="fr-accordion__title">
+            <h6 v-if="isValidationScreen" class="fr-accordion__title">
+              <button class="fr-accordion__btn" aria-expanded="false" :aria-controls="'accordion-disorder-logement-' + index">{{ dictionaryStore[disorder].default }}</button>
+            </h6>
+            <h4 v-else class="fr-accordion__title">
               <button class="fr-accordion__btn" aria-expanded="false" :aria-controls="'accordion-disorder-logement-' + index">{{ dictionaryStore[disorder].default }}</button>
-            </h3>
+            </h4>
             <div class="fr-collapse" :id="'accordion-disorder-logement-' + index">
               <div
                 v-for="field in categoryFields(disorder)"
@@ -77,7 +85,7 @@
     </div>
     <div v-else-if="formStore.currentScreen?.slug === 'validation_signalement' && formStore.data[idMessageAdministration] !== undefined">
       <br>
-      <h3 class="fr-h6">Précisions sur les désordres</h3>
+      <h5 class="fr-h6">Précisions sur les désordres</h5>
       <p class="white-space-pre-line">{{ formStore.data[idMessageAdministration] }}</p>
     </div>
   </div>
@@ -97,7 +105,8 @@ export default defineComponent({
   },
   props: {
     id: { type: String, default: null },
-    icons: { type: Object }
+    icons: { type: Object },
+    isValidationScreen: { type: Boolean, default: false }
   },
   data () {
     return {
diff --git a/assets/vue/components/signalement-form/components/SignalementFormOverview.vue b/assets/vue/components/signalement-form/components/SignalementFormOverview.vue
index c09699627..f1e758fe7 100644
--- a/assets/vue/components/signalement-form/components/SignalementFormOverview.vue
+++ b/assets/vue/components/signalement-form/components/SignalementFormOverview.vue
@@ -2,13 +2,13 @@
   <div :id="id" class="text-word-break-all">
     <div>
       <br>
-      <h2 class="fr-h4">Récapitulatif</h2>
+      <h3 class="fr-h4">Récapitulatif</h3>
 
       <!-- ADRESSE DU LOGEMENT -->
       <div>
         <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
           <div class="fr-col-8">
-            <h3 class="fr-h6">Adresse du logement</h3>
+            <h4 class="fr-h6">Adresse du logement</h4>
           </div>
           <div class="fr-col-4 fr-text--right">
             <button @click="handleEdit('adresse_logement')" class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line">Editer</button>
@@ -21,7 +21,7 @@
       <div v-if="formStore.data.profil === 'bailleur_occupant' || formStore.data.profil === 'locataire'">
         <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
           <div class="fr-col-8">
-            <h3 class="fr-h6">Vos coordonnées</h3>
+            <h4 class="fr-h6">Vos coordonnées</h4>
           </div>
           <div class="fr-col-4 fr-text--right">
             <button @click="handleEdit('vos_coordonnees_occupant')" class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line">Editer</button>
@@ -34,7 +34,7 @@
       <div v-else>
         <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
           <div class="fr-col-8">
-            <h3 class="fr-h6">Vos coordonnées</h3>
+            <h4 class="fr-h6">Vos coordonnées</h4>
           </div>
           <div class="fr-col-4 fr-text--right">
             <button @click="handleEdit('vos_coordonnees_tiers')"  class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line">Editer</button>
@@ -47,7 +47,7 @@
       <div v-if="formStore.data.profil !== 'bailleur_occupant' && formStore.data.profil !== 'bailleur'">
         <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
           <div class="fr-col-8">
-            <h3 class="fr-h6">Les coordonnées du bailleur</h3>
+            <h4 class="fr-h6">Les coordonnées du bailleur</h4>
           </div>
           <div class="fr-col-4 fr-text--right">
             <button @click="handleEdit('coordonnees_bailleur')" class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line">Editer</button>
@@ -60,7 +60,7 @@
       <div v-if="formStore.data.profil !== 'bailleur_occupant' && formStore.data.profil !== 'locataire' && formStore.data.profil !== 'service_secours'">
         <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
           <div class="fr-col-8">
-            <h3 class="fr-h6">Les coordonnées du foyer</h3>
+            <h4 class="fr-h6">Les coordonnées du foyer</h4>
           </div>
           <div class="fr-col-4 fr-text--right">
             <button @click="handleEdit('coordonnees_occupant')" class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line" >Editer</button>
@@ -73,16 +73,16 @@
       <div>
         <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
           <div class="fr-col-8">
-            <h3 class="fr-h6">Type et composition du logement</h3>
+            <h4 class="fr-h6">Type et composition du logement</h4>
           </div>
           <div class="fr-col-4 fr-text--right">
             <button @click="handleEdit('ecran_intermediaire_type_composition')" class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line">Editer</button>
           </div>
         </div>
         <section class="fr-accordion fr-mb-3w">
-          <h3 class="fr-accordion__title">
+          <h5 class="fr-accordion__title">
             <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-type-composition">Afficher les informations</button>
-          </h3>
+          </h5>
           <div class="fr-collapse" id="accordion-type-composition">
             <p v-html="getFormDataTypeComposition()"></p>
           </div>
@@ -93,17 +93,17 @@
       <div v-if="formStore.data.profil !== 'service_secours'">
         <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
           <div class="fr-col-8">
-            <h3 class="fr-h6" v-if="formStore.data.profil === 'bailleur_occupant' || formStore.data.profil === 'locataire'">Votre situation</h3>
-            <h3 class="fr-h6" v-else>La situation du foyer</h3>
+            <h4 class="fr-h6" v-if="formStore.data.profil === 'bailleur_occupant' || formStore.data.profil === 'locataire'">Votre situation</h4>
+            <h4 class="fr-h6" v-else>La situation du foyer</h4>
           </div>
           <div class="fr-col-4 fr-text--right">
             <button @click="handleEdit('ecran_intermediaire_situation_occupant')" class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line">Editer</button>
           </div>
         </div>
         <section class="fr-accordion fr-mb-3w">
-          <h3 class="fr-accordion__title">
+          <h5 class="fr-accordion__title">
             <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-situation-occupant">Afficher les informations</button>
-          </h3>
+          </h5>
           <div class="fr-collapse" id="accordion-situation-occupant">
             <p v-html="getFormDataSituationOccupant()"></p>
           </div>
@@ -114,7 +114,7 @@
       <div>
         <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
           <div class="fr-col-8">
-            <h3 class="fr-h6">Les désordres</h3>
+            <h4 class="fr-h6">Les désordres</h4>
           </div>
           <div class="fr-col-4 fr-text--right">
             <button @click="handleEdit('ecran_intermediaire_les_desordres')" class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line">Editer</button>
@@ -128,6 +128,7 @@
         <SignalementFormDisorderOverview
           :id="idDisorderOverview"
           :icons="disorderIcons"
+          :isValidationScreen="true"
           />
       </div>
 
@@ -135,16 +136,16 @@
       <div v-if="formStore.data.profil === 'bailleur_occupant' || formStore.data.profil === 'locataire' || formStore.data.profil === 'bailleur'">
         <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
           <div class="fr-col-8">
-            <h3 class="fr-h6">La procédure</h3>
+            <h4 class="fr-h6">La procédure</h4>
           </div>
           <div class="fr-col-4 fr-text--right">
             <button @click="handleEdit('info_procedure')" class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line">Editer</button>
           </div>
         </div>
         <section class="fr-accordion fr-mb-3w">
-          <h3 class="fr-accordion__title">
+          <h5 class="fr-accordion__title">
             <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-procedure">Afficher les informations</button>
-          </h3>
+          </h5>
           <div class="fr-collapse" id="accordion-procedure">
             <p v-html="getFormDataProcedure()"></p>
           </div>
@@ -156,7 +157,7 @@
         <div v-if="hasInformationsComplementaires()">
           <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
             <div class="fr-col-8">
-              <h2 class="fr-h4">Informations complémentaires</h2>
+              <h3 class="fr-h4">Informations complémentaires</h3>
             </div>
             <div class="fr-col-4 fr-text--right">
               <button @click="handleEdit('informations_complementaires')" class="fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line">Editer</button>
@@ -165,7 +166,7 @@
           <p v-html="getFormDataInformationsComplementaires()"></p>
         </div>
         <div v-else>
-          <h2 class="fr-h4">Informations complémentaires</h2>
+          <h3 class="fr-h4">Informations complémentaires</h3>
           <p>
             Plus nous avons d'informations sur la situation,
             mieux nous pouvons vous accompagner.
diff --git a/assets/vue/components/signalement-form/components/SignalementFormPhonefield.vue b/assets/vue/components/signalement-form/components/SignalementFormPhonefield.vue
index 88d7efbf7..a538c0f11 100644
--- a/assets/vue/components/signalement-form/components/SignalementFormPhonefield.vue
+++ b/assets/vue/components/signalement-form/components/SignalementFormPhonefield.vue
@@ -11,6 +11,8 @@
             :id="idCountryCode"
             :name="idCountryCode"
             v-model="formStore.data[idCountryCode]"
+            title="Indicatif national"
+            :aria-describedby="'text-input-error-desc-error-'+id"
             >
             <option
               v-for="countryItem in countryList"
@@ -65,6 +67,8 @@
             :id="idCountryCodeSecond"
             :name="idCountryCodeSecond"
             v-model="formStore.data[idCountryCodeSecond]"
+            title="Indicatif national"
+            :aria-describedby="'text-input-error-desc-error-'+idSecond"
             >
             <option
               v-for="countryItem in countryList"
diff --git a/assets/vue/components/signalement-form/components/SignalementFormScreen.vue b/assets/vue/components/signalement-form/components/SignalementFormScreen.vue
index 4d9d881d7..4015ceaf9 100644
--- a/assets/vue/components/signalement-form/components/SignalementFormScreen.vue
+++ b/assets/vue/components/signalement-form/components/SignalementFormScreen.vue
@@ -6,7 +6,8 @@
       >
       <img :src="icon.src" :alt="icon.alt">
     </div>
-    <h1>{{ label }}</h1>
+    <h1 v-if="formStore.currentScreen?.slug === 'introduction'" >{{ label }}</h1>
+    <h2 v-else-if="label !== ''">{{ label }}</h2>
     <div v-html="variablesReplacer.replace(description)"></div>
     <div
       v-if="components != undefined"
diff --git a/assets/vue/components/signalement-form/components/SignalementFormSubscreen.vue b/assets/vue/components/signalement-form/components/SignalementFormSubscreen.vue
index b827a9cb3..55de05aef 100644
--- a/assets/vue/components/signalement-form/components/SignalementFormSubscreen.vue
+++ b/assets/vue/components/signalement-form/components/SignalementFormSubscreen.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="[ customCss ]" :id="id">
-    <h2 v-if="label">{{ variablesReplacer.replace(label) }}</h2>
+    <h3 v-if="label">{{ variablesReplacer.replace(label) }}</h3>
     <p v-if="description" v-html="variablesReplacer.replace(description)"></p>
     <div
       v-if="components != undefined"
diff --git a/assets/vue/components/signalement-form/components/SignalementFormUploadPhotos.vue b/assets/vue/components/signalement-form/components/SignalementFormUploadPhotos.vue
index c3d6f3056..c8631d621 100644
--- a/assets/vue/components/signalement-form/components/SignalementFormUploadPhotos.vue
+++ b/assets/vue/components/signalement-form/components/SignalementFormUploadPhotos.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="signalement-form-upload-photos" :id="id">
-    <h2 v-if="label">{{ label }}</h2>
+    <h3 v-if="label">{{ label }}</h3>
     <p v-if="description" v-html="description"></p>
     <SignalementFormInfo
       :id="id + '_info'"
diff --git a/templates/footer.html.twig b/templates/footer.html.twig
index f978a3c06..9db193e98 100755
--- a/templates/footer.html.twig
+++ b/templates/footer.html.twig
@@ -35,7 +35,7 @@
             </div>
         </div>
         <div class="fr-footer__partners">
-            <h4 class="fr-footer__partners-title">Nos partenaires</h4>
+            <div class="fr-footer__partners-title">Nos partenaires</div>
             <div class="fr-footer__partners-logos">
                 <div class="fr-footer__partners-main">
                     <a class="fr-footer__partners-link" href="https://beta.gouv.fr/" target="_blank"
diff --git a/templates/front/nouveau_formulaire.html.twig b/templates/front/nouveau_formulaire.html.twig
index 5f465dd21..386544106 100755
--- a/templates/front/nouveau_formulaire.html.twig
+++ b/templates/front/nouveau_formulaire.html.twig
@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block body %}
-  <div class="fr-my-5v">
+  <main class="fr-my-5v">
     <div id="app-signalement-form"
         data-ajaxurl="{{ path('front_signalement') }}"
         data-ajaxurl-dictionary="{{ path('api_dictionary') }}"
@@ -27,6 +27,7 @@
         data-ajaxurl-send-mail-continue-from-draft="{{ path('send_mail_continue_from_draft', {uuid: 'uuid'}) }}"
         data-ajaxurl-send-mail-get-lien-suivi="{{ path('send_mail_get_lien_suivi', {uuid: 'uuid'}) }}"
         data-ajaxurl-archive-draft="{{ path('archive_draft', {uuid: 'uuid'}) }}"
-        ></div>
-  </div>
+        >
+    </div>
+  </main>
 {% endblock %}
diff --git a/templates/front/statistiques.html.twig b/templates/front/statistiques.html.twig
index 1653794d1..90f03eff4 100755
--- a/templates/front/statistiques.html.twig
+++ b/templates/front/statistiques.html.twig
@@ -8,5 +8,5 @@
 {% endblock %}
 
 {% block body %}
-    <div id="app-front-stats" data-ajaxurl="{{ path('front_statistiques_filter') }}"></div>
+    <main id="app-front-stats" data-ajaxurl="{{ path('front_statistiques_filter') }}"></main>
 {% endblock %}
\ No newline at end of file