From ac83b33d596a89971e580509729769405cfdbee8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9l=C3=A8ne=20Meneuvrier?= Date: Fri, 17 May 2024 16:42:15 +0200 Subject: [PATCH 1/3] initiate autocomplete on form #2236 --- .../questions_profile_locataire.json | 8 ++++++ .../TheSignalementAppForm.vue | 26 +++++++++++++------ .../components/SignalementFormAddress.vue | 2 ++ .../components/SignalementFormEmailfield.vue | 3 ++- .../components/SignalementFormPhonefield.vue | 3 ++- .../components/SignalementFormScreen.vue | 2 ++ .../components/SignalementFormTextfield.vue | 7 +++-- 7 files changed, 39 insertions(+), 12 deletions(-) diff --git a/assets/json/Signalement/questions_profile_locataire.json b/assets/json/Signalement/questions_profile_locataire.json index 3998628d6..9b92bc558 100644 --- a/assets/json/Signalement/questions_profile_locataire.json +++ b/assets/json/Signalement/questions_profile_locataire.json @@ -27,6 +27,10 @@ "slug": "vos_coordonnees_occupant_nom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -35,6 +39,10 @@ "slug": "vos_coordonnees_occupant_prenom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { diff --git a/assets/vue/components/signalement-form/TheSignalementAppForm.vue b/assets/vue/components/signalement-form/TheSignalementAppForm.vue index 1d87480d9..5e3d5177e 100644 --- a/assets/vue/components/signalement-form/TheSignalementAppForm.vue +++ b/assets/vue/components/signalement-form/TheSignalementAppForm.vue @@ -37,14 +37,17 @@ />
- +
+ + +
{ window.scrollTo(0, 0) }, 50) + }, + handleSubmit () { + // Vous pouvez gérer la soumission du formulaire ici + console.log('Form submitted!') } } }) @@ -265,4 +272,7 @@ export default defineComponent({ .signalement-form { background-color: white; } + .hidden-submit { + display: none; + } diff --git a/assets/vue/components/signalement-form/components/SignalementFormAddress.vue b/assets/vue/components/signalement-form/components/SignalementFormAddress.vue index e6e6b7e75..5ede22d4b 100644 --- a/assets/vue/components/signalement-form/components/SignalementFormAddress.vue +++ b/assets/vue/components/signalement-form/components/SignalementFormAddress.vue @@ -10,6 +10,8 @@ v-model="formStore.data[idAddress]" :hasError="hasError" :error="error" + access_name="address" + access_autocomplete="address-line1" />
diff --git a/assets/vue/components/signalement-form/components/SignalementFormEmailfield.vue b/assets/vue/components/signalement-form/components/SignalementFormEmailfield.vue index edd24e961..b43bd605f 100644 --- a/assets/vue/components/signalement-form/components/SignalementFormEmailfield.vue +++ b/assets/vue/components/signalement-form/components/SignalementFormEmailfield.vue @@ -8,12 +8,13 @@
diff --git a/assets/vue/components/signalement-form/components/SignalementFormScreen.vue b/assets/vue/components/signalement-form/components/SignalementFormScreen.vue index 4d9d881d7..283e5384d 100644 --- a/assets/vue/components/signalement-form/components/SignalementFormScreen.vue +++ b/assets/vue/components/signalement-form/components/SignalementFormScreen.vue @@ -43,6 +43,8 @@ :autocomplete="component.autocomplete" :clickEvent="handleClickComponent" :handleClickComponent="handleClickComponent" + :access_name="component.accessibility?.name" + :access_autocomplete="component.accessibility?.autocomplete" /> diff --git a/assets/vue/components/signalement-form/components/SignalementFormTextfield.vue b/assets/vue/components/signalement-form/components/SignalementFormTextfield.vue index eded816e9..7f909298b 100644 --- a/assets/vue/components/signalement-form/components/SignalementFormTextfield.vue +++ b/assets/vue/components/signalement-form/components/SignalementFormTextfield.vue @@ -8,7 +8,7 @@
Date: Tue, 21 May 2024 15:32:21 +0200 Subject: [PATCH 2/3] add autocomplete on fields #2236 --- .../questions_profile_bailleur.json | 40 ++++++++++++- .../questions_profile_bailleur_occupant.json | 24 +++++++- .../questions_profile_locataire.json | 28 ++++++++- .../questions_profile_service_secours.json | 56 +++++++++++++++++- .../questions_profile_tiers_particulier.json | 52 ++++++++++++++++- .../questions_profile_tiers_pro.json | 58 ++++++++++++++++++- .../TheSignalementAppForm.vue | 2 +- .../components/SignalementFormEmailfield.vue | 8 ++- .../components/SignalementFormPhonefield.vue | 7 ++- .../components/SignalementFormScreen.vue | 4 +- .../components/SignalementFormTextfield.vue | 2 +- 11 files changed, 259 insertions(+), 22 deletions(-) diff --git a/assets/json/Signalement/questions_profile_bailleur.json b/assets/json/Signalement/questions_profile_bailleur.json index 992fd7d39..6f7f0d0b1 100644 --- a/assets/json/Signalement/questions_profile_bailleur.json +++ b/assets/json/Signalement/questions_profile_bailleur.json @@ -12,6 +12,10 @@ "slug": "vos_coordonnees_tiers_nom_organisme", "conditional": { "show": "formStore.data.signalement_concerne_profil_detail_bailleur_bailleur === 'organisme_societe'" + }, + "accessibility": { + "name": "organizationName", + "autocomplete": "organization" } }, { @@ -20,6 +24,10 @@ "slug": "vos_coordonnees_tiers_nom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -28,17 +36,29 @@ "slug": "vos_coordonnees_tiers_prenom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { "type": "SignalementFormEmailfield", "label": "Adresse e-mail", - "slug": "vos_coordonnees_tiers_email" + "slug": "vos_coordonnees_tiers_email", + "accessibility": { + "name": "mail", + "autocomplete": "email" + } }, { "type": "SignalementFormPhonefield", "label": "Téléphone", - "slug": "vos_coordonnees_tiers_tel" + "slug": "vos_coordonnees_tiers_tel", + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" + } } ], "footer": [ @@ -72,6 +92,10 @@ "slug": "coordonnees_occupant_nom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -80,6 +104,10 @@ "slug": "coordonnees_occupant_prenom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { @@ -88,6 +116,10 @@ "slug": "coordonnees_occupant_email", "validate": { "required": false + }, + "accessibility": { + "name": "mail", + "autocomplete": "email" } }, { @@ -96,6 +128,10 @@ "slug": "coordonnees_occupant_tel", "validate": { "required": false + }, + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" } } ], diff --git a/assets/json/Signalement/questions_profile_bailleur_occupant.json b/assets/json/Signalement/questions_profile_bailleur_occupant.json index ffeb2195c..c0cc86732 100644 --- a/assets/json/Signalement/questions_profile_bailleur_occupant.json +++ b/assets/json/Signalement/questions_profile_bailleur_occupant.json @@ -30,6 +30,10 @@ "slug": "vos_coordonnees_occupant_nom_organisme", "conditional": { "show": "formStore.data.signalement_concerne_profil_detail_bailleur_proprietaire === 'organisme_societe'" + }, + "accessibility": { + "name": "organizationName", + "autocomplete": "organization" } }, { @@ -38,6 +42,10 @@ "slug": "vos_coordonnees_occupant_nom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -46,17 +54,29 @@ "slug": "vos_coordonnees_occupant_prenom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { "type": "SignalementFormEmailfield", "label": "Adresse e-mail", - "slug": "vos_coordonnees_occupant_email" + "slug": "vos_coordonnees_occupant_email", + "accessibility": { + "name": "mail", + "autocomplete": "email" + } }, { "type": "SignalementFormPhonefield", "label": "Téléphone", - "slug": "vos_coordonnees_occupant_tel" + "slug": "vos_coordonnees_occupant_tel", + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" + } } ], "footer": [ diff --git a/assets/json/Signalement/questions_profile_locataire.json b/assets/json/Signalement/questions_profile_locataire.json index 9b92bc558..47824fd82 100644 --- a/assets/json/Signalement/questions_profile_locataire.json +++ b/assets/json/Signalement/questions_profile_locataire.json @@ -48,12 +48,20 @@ { "type": "SignalementFormEmailfield", "label": "Adresse e-mail", - "slug": "vos_coordonnees_occupant_email" + "slug": "vos_coordonnees_occupant_email", + "accessibility": { + "name": "mail", + "autocomplete": "email" + } }, { "type": "SignalementFormPhonefield", "label": "Téléphone", - "slug": "vos_coordonnees_occupant_tel" + "slug": "vos_coordonnees_occupant_tel", + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" + } } ], "footer": [ @@ -95,6 +103,10 @@ }, "conditional": { "show": "formStore.data.signalement_concerne_logement_social_autre_tiers === 'non'" + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -121,6 +133,10 @@ "validate": { "required": false, "maxLength": 255 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { @@ -129,6 +145,10 @@ "slug": "coordonnees_bailleur_email", "validate": { "required": false + }, + "accessibility": { + "name": "mail", + "autocomplete": "email" } }, { @@ -137,6 +157,10 @@ "slug": "coordonnees_bailleur_tel", "validate": { "required": false + }, + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" } }, { diff --git a/assets/json/Signalement/questions_profile_service_secours.json b/assets/json/Signalement/questions_profile_service_secours.json index 68af0e3ce..b6cdb9d07 100644 --- a/assets/json/Signalement/questions_profile_service_secours.json +++ b/assets/json/Signalement/questions_profile_service_secours.json @@ -12,6 +12,10 @@ "slug": "vos_coordonnees_tiers_nom_organisme", "conditional": { "show": "formStore.data.signalement_concerne_profil_detail_tiers === 'service_secours'" + }, + "accessibility": { + "name": "organizationName", + "autocomplete": "organization" } }, { @@ -20,6 +24,10 @@ "slug": "vos_coordonnees_tiers_nom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -28,17 +36,29 @@ "slug": "vos_coordonnees_tiers_prenom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { "type": "SignalementFormEmailfield", "label": "Adresse e-mail", - "slug": "vos_coordonnees_tiers_email" + "slug": "vos_coordonnees_tiers_email", + "accessibility": { + "name": "mail", + "autocomplete": "email" + } }, { "type": "SignalementFormPhonefield", "label": "Téléphone", - "slug": "vos_coordonnees_tiers_tel" + "slug": "vos_coordonnees_tiers_tel", + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" + } } ], "footer": [ @@ -73,6 +93,10 @@ "validate": { "required": false, "maxLength": 50 + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -82,6 +106,10 @@ "validate": { "required": false, "maxLength": 50 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { @@ -91,6 +119,10 @@ "validate": { "required": false, "maxLength": 255 + }, + "accessibility": { + "name": "mail", + "autocomplete": "email" } }, { @@ -99,6 +131,10 @@ "slug": "coordonnees_occupant_tel", "validate": { "required": false + }, + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" } } ], @@ -137,6 +173,10 @@ }, "conditional": { "show": "formStore.data.signalement_concerne_logement_social_service_secours === 'non'" + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -164,6 +204,10 @@ "validate": { "required": false, "maxLength": 255 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { @@ -173,6 +217,10 @@ "validate": { "required": false, "maxLength": 255 + }, + "accessibility": { + "name": "mail", + "autocomplete": "email" } }, { @@ -181,6 +229,10 @@ "slug": "coordonnees_bailleur_tel", "validate": { "required": false + }, + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" } }, { diff --git a/assets/json/Signalement/questions_profile_tiers_particulier.json b/assets/json/Signalement/questions_profile_tiers_particulier.json index e65a05631..fa2a30b5f 100644 --- a/assets/json/Signalement/questions_profile_tiers_particulier.json +++ b/assets/json/Signalement/questions_profile_tiers_particulier.json @@ -34,6 +34,10 @@ "slug": "vos_coordonnees_tiers_nom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -42,17 +46,29 @@ "slug": "vos_coordonnees_tiers_prenom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { "type": "SignalementFormEmailfield", "label": "Adresse e-mail", - "slug": "vos_coordonnees_tiers_email" + "slug": "vos_coordonnees_tiers_email", + "accessibility": { + "name": "mail", + "autocomplete": "email" + } }, { "type": "SignalementFormPhonefield", "label": "Téléphone", - "slug": "vos_coordonnees_tiers_tel" + "slug": "vos_coordonnees_tiers_tel", + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" + } } ], "footer": [ @@ -86,6 +102,10 @@ "slug": "coordonnees_occupant_nom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -94,6 +114,10 @@ "slug": "coordonnees_occupant_prenom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { @@ -102,6 +126,10 @@ "slug": "coordonnees_occupant_email", "validate": { "required": false + }, + "accessibility": { + "name": "mail", + "autocomplete": "email" } }, { @@ -110,6 +138,10 @@ "slug": "coordonnees_occupant_tel", "validate": { "required": false + }, + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" } } ], @@ -147,6 +179,10 @@ }, "conditional": { "show": "formStore.data.signalement_concerne_logement_social_autre_tiers === 'non'" + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -173,6 +209,10 @@ "validate": { "required": false, "maxLength": 255 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { @@ -181,6 +221,10 @@ "slug": "coordonnees_bailleur_email", "validate": { "required": false + }, + "accessibility": { + "name": "mail", + "autocomplete": "email" } }, { @@ -189,6 +233,10 @@ "slug": "coordonnees_bailleur_tel", "validate": { "required": false + }, + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" } }, { diff --git a/assets/json/Signalement/questions_profile_tiers_pro.json b/assets/json/Signalement/questions_profile_tiers_pro.json index 342594d56..8a709d9a6 100644 --- a/assets/json/Signalement/questions_profile_tiers_pro.json +++ b/assets/json/Signalement/questions_profile_tiers_pro.json @@ -9,7 +9,11 @@ { "type": "SignalementFormTextfield", "label": "Structure", - "slug": "vos_coordonnees_tiers_nom_organisme" + "slug": "vos_coordonnees_tiers_nom_organisme", + "accessibility": { + "name": "organizationName", + "autocomplete": "organization" + } }, { "type": "SignalementFormTextfield", @@ -17,6 +21,10 @@ "slug": "vos_coordonnees_tiers_nom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -25,17 +33,29 @@ "slug": "vos_coordonnees_tiers_prenom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { "type": "SignalementFormEmailfield", "label": "Adresse e-mail", - "slug": "vos_coordonnees_tiers_email" + "slug": "vos_coordonnees_tiers_email", + "accessibility": { + "name": "mail", + "autocomplete": "email" + } }, { "type": "SignalementFormPhonefield", "label": "Téléphone", - "slug": "vos_coordonnees_tiers_tel" + "slug": "vos_coordonnees_tiers_tel", + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" + } } ], "footer": [ @@ -69,6 +89,10 @@ "slug": "coordonnees_occupant_nom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -77,6 +101,10 @@ "slug": "coordonnees_occupant_prenom", "validate": { "maxLength": 50 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { @@ -85,6 +113,10 @@ "slug": "coordonnees_occupant_email", "validate": { "required": false + }, + "accessibility": { + "name": "mail", + "autocomplete": "email" } }, { @@ -93,6 +125,10 @@ "slug": "coordonnees_occupant_tel", "validate": { "required": false + }, + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" } } ], @@ -130,6 +166,10 @@ }, "conditional": { "show": "formStore.data.signalement_concerne_logement_social_autre_tiers === 'non'" + }, + "accessibility": { + "name": "lastName", + "autocomplete": "family-name" } }, { @@ -156,6 +196,10 @@ "validate": { "required": false, "maxLength": 255 + }, + "accessibility": { + "name": "firstName", + "autocomplete": "given-name" } }, { @@ -164,6 +208,10 @@ "slug": "coordonnees_bailleur_email", "validate": { "required": false + }, + "accessibility": { + "name": "mail", + "autocomplete": "email" } }, { @@ -172,6 +220,10 @@ "slug": "coordonnees_bailleur_tel", "validate": { "required": false + }, + "accessibility": { + "name": "telephone", + "autocomplete": "tel-national" } }, { diff --git a/assets/vue/components/signalement-form/TheSignalementAppForm.vue b/assets/vue/components/signalement-form/TheSignalementAppForm.vue index 5e3d5177e..65f8b54bd 100644 --- a/assets/vue/components/signalement-form/TheSignalementAppForm.vue +++ b/assets/vue/components/signalement-form/TheSignalementAppForm.vue @@ -37,7 +37,7 @@ />
-
+
@@ -85,6 +85,7 @@ v-model="formStore.data[idSecond]" class="fr-input" :aria-describedby="'text-input-error-desc-error-'+idSecond" + :autocomplete="access_autocomplete" > @@ -121,6 +122,8 @@ export default defineComponent({ validate: { type: Object, default: null }, hasError: { type: Boolean, default: false }, error: { type: String, default: '' }, + access_name: { type: String, default: '' }, + access_autocomplete: { type: String, default: '' }, clickEvent: Function }, data () { diff --git a/assets/vue/components/signalement-form/components/SignalementFormScreen.vue b/assets/vue/components/signalement-form/components/SignalementFormScreen.vue index 283e5384d..d0904bec7 100644 --- a/assets/vue/components/signalement-form/components/SignalementFormScreen.vue +++ b/assets/vue/components/signalement-form/components/SignalementFormScreen.vue @@ -43,8 +43,8 @@ :autocomplete="component.autocomplete" :clickEvent="handleClickComponent" :handleClickComponent="handleClickComponent" - :access_name="component.accessibility?.name" - :access_autocomplete="component.accessibility?.autocomplete" + :access_name="component.accessibility?.name ?? component.slug" + :access_autocomplete="component.accessibility?.autocomplete ?? 'off'" /> diff --git a/assets/vue/components/signalement-form/components/SignalementFormTextfield.vue b/assets/vue/components/signalement-form/components/SignalementFormTextfield.vue index 7f909298b..08f439feb 100644 --- a/assets/vue/components/signalement-form/components/SignalementFormTextfield.vue +++ b/assets/vue/components/signalement-form/components/SignalementFormTextfield.vue @@ -9,6 +9,7 @@ type="text" :id="id + '_input'" :name="access_name" + :autocomplete="access_autocomplete" :value="internalValue" :placeholder="placeholder" :class="[ customCss, 'fr-input' ]" @@ -16,7 +17,6 @@ aria-describedby="text-input-error-desc-error" :disabled="disabled" :maxlength="validate?.maxLength" - :autocomplete="access_autocomplete" >
Date: Thu, 23 May 2024 14:57:27 +0200 Subject: [PATCH 3/3] changes based on comments #2236 --- .../vue/components/signalement-form/TheSignalementAppForm.vue | 3 +-- .../signalement-form/components/SignalementFormSubscreen.vue | 2 ++ 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/assets/vue/components/signalement-form/TheSignalementAppForm.vue b/assets/vue/components/signalement-form/TheSignalementAppForm.vue index 65f8b54bd..334435bb8 100644 --- a/assets/vue/components/signalement-form/TheSignalementAppForm.vue +++ b/assets/vue/components/signalement-form/TheSignalementAppForm.vue @@ -253,8 +253,7 @@ export default defineComponent({ }, 50) }, handleSubmit () { - // Vous pouvez gérer la soumission du formulaire ici - console.log('Form submitted!') + // il ne se passe rien, ce bouton ne sert que pour gérer l'accessibilité et l'autocomplete } } }) diff --git a/assets/vue/components/signalement-form/components/SignalementFormSubscreen.vue b/assets/vue/components/signalement-form/components/SignalementFormSubscreen.vue index b827a9cb3..32e206970 100644 --- a/assets/vue/components/signalement-form/components/SignalementFormSubscreen.vue +++ b/assets/vue/components/signalement-form/components/SignalementFormSubscreen.vue @@ -10,6 +10,8 @@ :is="component.type" v-bind:key="component.slug" :id="component.slug" + :access_name="component.accessibility?.name ?? component.slug" + :access_autocomplete="component.accessibility?.autocomplete ?? 'off'" :label="component.label" :hint="component.hint" :labelInfo="component.labelInfo"