order buttons #2991

MTES-MCT · Sep 17, 2024 · b1b87bc · b1b87bc
1 parent 2b4a3f4
commit b1b87bc
Show file tree

Hide file tree

Showing 26 changed files with 3,648 additions and 1,853 deletions.
diff --git a/assets/json/Signalement/desordres_profile_occupant.json b/assets/json/Signalement/desordres_profile_occupant.json
diff --git a/assets/json/Signalement/desordres_profile_tiers.json b/assets/json/Signalement/desordres_profile_tiers.json
diff --git a/assets/json/Signalement/questions_profile_bailleur.json b/assets/json/Signalement/questions_profile_bailleur.json
diff --git a/assets/json/Signalement/questions_profile_bailleur_occupant.json b/assets/json/Signalement/questions_profile_bailleur_occupant.json
diff --git a/assets/json/Signalement/questions_profile_locataire.json b/assets/json/Signalement/questions_profile_locataire.json
diff --git a/assets/json/Signalement/questions_profile_service_secours.json b/assets/json/Signalement/questions_profile_service_secours.json
diff --git a/assets/json/Signalement/questions_profile_tiers_particulier.json b/assets/json/Signalement/questions_profile_tiers_particulier.json
diff --git a/assets/json/Signalement/questions_profile_tiers_pro.json b/assets/json/Signalement/questions_profile_tiers_pro.json
diff --git a/assets/json/Signalement/questions_profile_tous.json b/assets/json/Signalement/questions_profile_tous.json
@@ -18,7 +18,8 @@
                 "label": "Je démarre",
                 "slug": "introduction_go",
                 "action": "goto:adresse_logement_intro",
-                "customCss": "fr-btn--icon-left fr-icon-check-line"
+                "customCss": "fr-btn--icon-left fr-icon-check-line",
+                "validOnEnter": true
               },
               {
                 "type": "SignalementFormLink",
@@ -140,18 +141,27 @@
       ],
       "footer": [
         {
-          "type": "SignalementFormButton",
-          "label": "Précédent",
-          "slug": "adresse_logement_previous",
-          "action": "goto:adresse_logement_intro",
-          "customCss": "fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line"
-        },
-        {
-          "type": "SignalementFormButton",
-          "label": "Suivant",
-          "slug": "adresse_logement_next",
-          "action": "goto.checkloc:signalement_concerne",
-          "customCss": "fr-btn--icon-right fr-icon-arrow-right-line"
+          "type": "SignalementFormSubscreen",
+          "slug": "adresse_logement_footer",
+          "customCss": "button-group-responsive-inverted",
+          "components": {
+            "body": [
+              {
+                "type": "SignalementFormButton",
+                "label": "Suivant",
+                "slug": "adresse_logement_next",
+                "action": "goto.checkloc:signalement_concerne",
+                "customCss": "fr-btn--icon-right fr-icon-arrow-right-line"
+              },
+              {
+                "type": "SignalementFormButton",
+                "label": "Précédent",
+                "slug": "adresse_logement_previous",
+                "action": "goto:adresse_logement_intro",
+                "customCss": "fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line"
+              }
+            ]
+          }
         }
       ]
     }
@@ -317,30 +327,39 @@
       ],
       "footer": [
         {
-          "type": "SignalementFormButton",
-          "label": "Précédent",
-          "slug": "signalement_concerne_previous",
-          "action": "goto:adresse_logement",
-          "customCss": "fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line"
-        },
-        {
-          "type": "SignalementFormButton",
-          "label": "Suivant",
-          "slug": "signalement_concerne_next_occupant",
-          "customCss": "fr-btn--icon-right fr-icon-arrow-right-line",
-          "action": "goto.save:vos_coordonnees_occupant",
-          "conditional": {
-            "show": "formStore.data.signalement_concerne_profil === 'logement_occupez'"
-          }
-        },
-        {
-          "type": "SignalementFormButton",
-          "label": "Suivant",
-          "slug": "signalement_concerne_next_tiers",
-          "customCss": "fr-btn--icon-right fr-icon-arrow-right-line",
-          "action": "goto.save:vos_coordonnees_tiers",
-          "conditional": {
-            "show": "formStore.data.signalement_concerne_profil === 'autre_logement'"
+          "type": "SignalementFormSubscreen",
+          "slug": "signalement_concerne_footer",
+          "customCss": "button-group-responsive-inverted",
+          "components": {
+            "body": [
+              {
+                "type": "SignalementFormButton",
+                "label": "Suivant",
+                "slug": "signalement_concerne_next_occupant",
+                "customCss": "fr-btn--icon-right fr-icon-arrow-right-line",
+                "action": "goto.save:vos_coordonnees_occupant",
+                "conditional": {
+                  "show": "formStore.data.signalement_concerne_profil === 'logement_occupez'"
+                }
+              },
+              {
+                "type": "SignalementFormButton",
+                "label": "Suivant",
+                "slug": "signalement_concerne_next_tiers",
+                "customCss": "fr-btn--icon-right fr-icon-arrow-right-line",
+                "action": "goto.save:vos_coordonnees_tiers",
+                "conditional": {
+                  "show": "formStore.data.signalement_concerne_profil === 'autre_logement'"
+                }
+              },
+              {
+                "type": "SignalementFormButton",
+                "label": "Précédent",
+                "slug": "signalement_concerne_previous",
+                "action": "goto:adresse_logement",
+                "customCss": "fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line"
+              }
+            ]
           }
         }
       ]

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue
@@ -19,6 +19,7 @@
         v-for="(suggestion, index) in suggestions"
         :key="index"
         class="fr-col-12 fr-p-3v fr-text-label--blue-france fr-address-suggestion"
+        ref="addressSuggestions"
         tabindex="0"
         @click="handleClickSuggestion(index)"
         @keyup="handleKeyboardSuggestion($event, index)"
@@ -193,12 +194,12 @@ export default defineComponent({
       }
     },
     handleKeyboardSuggestion (event: any, index: number) {
-      if (event.key === 'Enter') {
+      if (event.key === ' ' || event.key === 'Spacebar') {
         this.handleClickSuggestion(index)
       } else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
         event.preventDefault()
-        const suggestionElements = document.querySelectorAll('.fr-address-suggestion')
-        if (suggestionElements.length > 0) {
+        const suggestionElements = this.$refs.addressSuggestions as HTMLElement[]
+        if (suggestionElements && suggestionElements.length > 0) {
           let newIndex = index
           if (event.key === 'ArrowUp') {
             newIndex = (index === 0) ? suggestionElements.length - 1 : index - 1

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormAutocomplete.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormAutocomplete.vue
@@ -10,6 +10,7 @@
         :validate="validate"
         :access_name="access_name"
         :access_autocomplete="access_autocomplete"
+        :access_focus="access_focus"
         :hasError="hasError"
         :error="error"
         @keydown.down.prevent="handleDownSuggestion"
@@ -73,16 +74,6 @@ export default defineComponent({
       selectedSuggestionIndex: -1
     }
   },
-  mounted () {
-    if (this.access_focus) {
-      this.$nextTick(() => {
-        const element = document.querySelector('#' + this.idAutocomplete + '_input') as HTMLElement
-        if (element) {
-          element.focus()
-        }
-      })
-    }
-  },
   created () {
     document.addEventListener('click', this.closeAutocomplete)
     watch(

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormButton.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormButton.vue
@@ -1,7 +1,8 @@
 <template>
-    <div class="signalement-form-button" :id="id">
+    <div class="signalement-form-button" :id="id" ref="button">
       <button
-        id="button"
+        :id="id + '_button'"
+        :ref="id + '_ref'"
         :type="type"
         :class="[ 'fr-btn', customCss, formStore.lastButtonClicked === id ? 'fr-btn--loading fr-btn--icon-right fr-icon-refresh-line' : '' ]"
         :disabled="formStore.lastButtonClicked !== ''"
@@ -40,6 +41,7 @@ export default defineComponent({
     ariaControls: { type: String, default: undefined },
     clickEvent: Function,
     access_focus: { type: Boolean, default: false },
+    validOnEnter: { type: Boolean, default: false },
     // les propriétés suivantes ne sont pas utilisées,
     // mais si on ne les met pas, elles apparaissent dans le DOM
     // et ça soulève des erreurs W3C
@@ -54,13 +56,9 @@ export default defineComponent({
     }
   },
   mounted () {
-    if (this.access_focus) {
-      this.$nextTick(() => {
-        const element = document.querySelector('#button') as HTMLElement
-        if (element) {
-          element.focus()
-        }
-      })
+    const element = this.$refs.button as HTMLElement
+    if (this.access_focus && element && !element.classList.contains('fr-hidden')) {
+      this.focusInput()
     }
   },
   computed: {
@@ -82,6 +80,12 @@ export default defineComponent({
       if (this.clickEvent !== undefined) {
         this.clickEvent(this.actionType, this.actionParam, this.id)
       }
+    },
+    focusInput () {
+      const focusableElement = this.$refs[this.id + '_ref'] as HTMLElement
+      if (focusableElement) {
+        focusableElement.focus()
+      }
     }
   }
 })

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormCheckbox.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormCheckbox.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="fr-fieldset__element signalement-form-checkbox">
+  <div class="fr-fieldset__element signalement-form-checkbox" ref="checkbox">
     <div :class="['fr-checkbox-group', { 'fr-checkbox-group--error': hasError }]" :id="id">
       <input
           type="checkbox"
           :id="idCheckbox"
+          :ref="id + '_ref'"
           :name="idCheckbox"
           :value="modelValue"
           :class="[ customCss ]"
@@ -41,14 +42,14 @@ export default defineComponent({
     validate: { type: Object, default: null },
     hasError: { type: Boolean, default: false },
     error: { type: String, default: '' },
+    access_focus: { type: Boolean, default: false },
     // les propriétés suivantes ne sont pas utilisées,
     // mais si on ne les met pas, elles apparaissent dans le DOM
     // et ça soulève des erreurs W3C
     clickEvent: Function,
     handleClickComponent: Function,
     access_name: { type: String, default: '' },
-    access_autocomplete: { type: String, default: '' },
-    access_focus: { type: Boolean, default: false }
+    access_autocomplete: { type: String, default: '' }
   },
   data () {
     return {
@@ -57,6 +58,12 @@ export default defineComponent({
       idCheckbox: this.id + '_check'
     }
   },
+  mounted () {
+    const element = this.$refs.checkbox as HTMLElement
+    if (this.access_focus && element && !element.classList.contains('fr-hidden')) {
+      this.focusInput()
+    }
+  },
   methods: {
     updateValue (event: Event) {
       const value = (event.target as HTMLInputElement).checked
@@ -68,6 +75,12 @@ export default defineComponent({
           }
         }
       }
+    },
+    focusInput () {
+      const focusableElement = (this.$refs[this.id + '_ref']) as HTMLElement
+      if (focusableElement) {
+        focusableElement.focus()
+      }
     }
   },
   emits: ['update:modelValue']

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormCounter.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormCounter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="fr-input-group" :id="id">
+  <div class="fr-input-group" :id="id" ref="counter">
     <label :class="[ customCss, 'fr-label' ]" :for="id + '_input'">
       {{ variablesReplacer.replace(label) }}
       <span class="fr-hint-text">{{ description }}</span>
@@ -9,6 +9,7 @@
         pattern="[0-9]*"
         inputmode="numeric"
         :id="id + '_input'"
+        :ref="id + '_ref'"
         :name="id"
         :value="internalValue"
         :class="[ customCss, 'fr-input' ]"
@@ -41,14 +42,14 @@ export default defineComponent({
     hasError: { type: Boolean, default: false },
     error: { type: String, default: '' },
     defaultValue: { type: Number, default: null },
+    access_focus: { type: Boolean, default: false },
     // les propriétés suivantes ne sont pas utilisées,
     // mais si on ne les met pas, elles apparaissent dans le DOM
     // et ça soulève des erreurs W3C
     handleClickComponent: Function,
     clickEvent: Function,
     access_name: { type: String, default: undefined },
-    access_autocomplete: { type: String, default: undefined },
-    access_focus: { type: Boolean, default: false }
+    access_autocomplete: { type: String, default: undefined }
   },
   data () {
     return {
@@ -69,13 +70,23 @@ export default defineComponent({
     updateValue (event: Event) {
       const value = (event.target as HTMLInputElement).value
       this.$emit('update:modelValue', value)
+    },
+    focusInput () {
+      const focusableElement = (this.$refs[this.id + '_ref']) as HTMLElement
+      if (focusableElement) {
+        focusableElement.focus()
+      }
     }
   },
   emits: ['update:modelValue'],
   mounted () {
     if (this.modelValue === null) {
       this.$emit('update:modelValue', this.internalValue)
     }
+    const element = this.$refs.counter as HTMLElement
+    if (this.access_focus && element && !element.classList.contains('fr-hidden')) {
+      this.focusInput()
+    }
   }
 })
 </script>
diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormDate.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormDate.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="fr-input-group" :id="id">
+  <div class="fr-input-group" :id="id" ref="date">
     <label :class="[ customCss, 'fr-label' ]" :for="id + '_input'">{{ label }}</label>
     <span v-if="hint !== ''" class="fr-hint-text">{{ hint }}</span>
     <input
       type="date"
       :id="id + '_input'"
+      :ref="id + '_ref'"
       :name="id"
       :value="internalValue"
       :class="[ customCss, 'fr-input' ]"
@@ -34,15 +35,21 @@ export default defineComponent({
     customCss: { type: String, default: '' },
     hasError: { type: Boolean, default: false },
     error: { type: String, default: '' },
+    access_focus: { type: Boolean, default: false },
     // les propriétés suivantes ne sont pas utilisées,
     // mais si on ne les met pas, elles apparaissent dans le DOM
     // et ça soulève des erreurs W3C
     validate: { type: Object, default: null },
     handleClickComponent: Function,
     clickEvent: Function,
     access_name: { type: String, default: undefined },
-    access_autocomplete: { type: String, default: undefined },
-    access_focus: { type: Boolean, default: false }
+    access_autocomplete: { type: String, default: undefined }
+  },
+  mounted () {
+    const element = this.$refs.date as HTMLElement
+    if (this.access_focus && element && !element.classList.contains('fr-hidden')) {
+      this.focusInput()
+    }
   },
   computed: {
     internalValue: {
@@ -58,6 +65,12 @@ export default defineComponent({
     updateValue (event: Event) {
       const value = (event.target as HTMLInputElement).value
       this.$emit('update:modelValue', value)
+    },
+    focusInput () {
+      const focusableElement = (this.$refs[this.id + '_ref']) as HTMLElement
+      if (focusableElement) {
+        focusableElement.focus()
+      }
     }
   },
   emits: ['update:modelValue']