manage focus order #2991

MTES-MCT · Sep 18, 2024 · b883628 · b883628
1 parent 59d8e0a
commit b883628
Show file tree

Hide file tree

Showing 26 changed files with 83 additions and 19 deletions.
diff --git a/assets/json/Signalement/questions_profile_locataire.json b/assets/json/Signalement/questions_profile_locataire.json
@@ -19,7 +19,10 @@
               "label": "Monsieur",
               "value": "mr"
             }
-          ]
+          ],
+          "accessibility": {
+            "focus": true
+          }
         },
         {
           "type": "SignalementFormTextfield",
@@ -124,6 +127,9 @@
           "autocomplete": {
             "isAbsoluteLink": false,
             "route": "/bailleurs?postcode={{formStore.data.adresse_logement_adresse_detail_code_postal}}&name={{formStore.data.coordonnees_bailleur_nom_autocomplete_textfield}}&sanitize=true"
+          },
+          "accessibility": {
+            "focus": true
           }
         },
         {

diff --git a/assets/json/Signalement/questions_profile_tous.json b/assets/json/Signalement/questions_profile_tous.json
@@ -174,7 +174,10 @@
           "label": "En savoir plus",
           "slug": "signalement_concerne_savoir_plus",
           "customCss": "fr-btn--sm fr-badge fr-badge--info",
-          "ariaControls": "signalement_concerne_modal"
+          "ariaControls": "signalement_concerne_modal",
+          "accessibility": {
+            "focus": true
+          }
         },
         {
           "type": "SignalementFormOnlyChoice",

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue
@@ -83,7 +83,8 @@ export default defineComponent({
     components: Object,
     handleClickComponent: Function,
     access_name: { type: String, default: undefined },
-    access_autocomplete: { type: String, default: undefined }
+    access_autocomplete: { type: String, default: undefined },
+    access_focus: { type: Boolean, default: false }
   },
   data () {
     const updatedSubscreenData = subscreenManager.generateSubscreenData(this.id, subscreenData.body, this.validate)

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormAutocomplete.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormAutocomplete.vue
@@ -56,6 +56,7 @@ export default defineComponent({
     disabled: { type: Boolean, default: false },
     access_name: { type: String, default: '' },
     access_autocomplete: { 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
@@ -72,6 +73,16 @@ 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,6 +1,7 @@
 <template>
     <div class="signalement-form-button" :id="id">
       <button
+        id="button"
         :type="type"
         :class="[ 'fr-btn', customCss, formStore.lastButtonClicked === id ? 'fr-btn--loading fr-btn--icon-right fr-icon-refresh-line' : '' ]"
         :disabled="formStore.lastButtonClicked !== ''"
@@ -38,6 +39,7 @@ export default defineComponent({
     customCss: { type: String, default: '' },
     ariaControls: { type: String, default: undefined },
     clickEvent: Function,
+    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
@@ -51,6 +53,16 @@ export default defineComponent({
       formStore
     }
   },
+  mounted () {
+    if (this.access_focus) {
+      this.$nextTick(() => {
+        const element = document.querySelector('#button') as HTMLElement
+        if (element) {
+          element.focus()
+        }
+      })
+    }
+  },
   computed: {
     actionType (): string {
       if (this.action.includes(':')) {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormCheckbox.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormCheckbox.vue
@@ -47,7 +47,8 @@ export default defineComponent({
     clickEvent: Function,
     handleClickComponent: Function,
     access_name: { type: String, default: '' },
-    access_autocomplete: { type: String, default: '' }
+    access_autocomplete: { type: String, default: '' },
+    access_focus: { type: Boolean, default: false }
   },
   data () {
     return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormConfirmation.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormConfirmation.vue
@@ -29,7 +29,8 @@ export default defineComponent({
     clickEvent: Function,
     handleClickComponent: Function,
     access_name: { type: String, default: '' },
-    access_autocomplete: { type: String, default: '' }
+    access_autocomplete: { type: String, default: '' },
+    access_focus: { type: Boolean, default: false }
   }
 })
 </script>

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormCounter.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormCounter.vue
@@ -47,7 +47,8 @@ export default defineComponent({
     handleClickComponent: Function,
     clickEvent: Function,
     access_name: { type: String, default: undefined },
-    access_autocomplete: { type: String, default: undefined }
+    access_autocomplete: { type: String, default: undefined },
+    access_focus: { type: Boolean, default: false }
   },
   data () {
     return {
@@ -66,7 +67,7 @@ export default defineComponent({
   },
   methods: {
     updateValue (event: Event) {
-      let value = (event.target as HTMLInputElement).value
+      const value = (event.target as HTMLInputElement).value
       this.$emit('update:modelValue', value)
     }
   },

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormDate.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormDate.vue
@@ -41,7 +41,8 @@ export default defineComponent({
     handleClickComponent: Function,
     clickEvent: Function,
     access_name: { type: String, default: undefined },
-    access_autocomplete: { type: String, default: undefined }
+    access_autocomplete: { type: String, default: undefined },
+    access_focus: { type: Boolean, default: false }
   },
   computed: {
     internalValue: {

diff --git a/...cripts/vue/components/signalement-form/components/SignalementFormDisorderCategoryList.vue b/...cripts/vue/components/signalement-form/components/SignalementFormDisorderCategoryList.vue
@@ -39,7 +39,8 @@ export default defineComponent({
     hasError: { type: Boolean, default: false },
     handleClickComponent: Function,
     access_name: { type: String, default: '' },
-    access_autocomplete: { type: String, default: '' }
+    access_autocomplete: { type: String, default: '' },
+    access_focus: { type: Boolean, default: false }
   },
   data () {
     return {

diff --git a/...ts/scripts/vue/components/signalement-form/components/SignalementFormDisorderOverview.vue b/...ts/scripts/vue/components/signalement-form/components/SignalementFormDisorderOverview.vue
@@ -114,7 +114,8 @@ export default defineComponent({
     clickEvent: Function,
     handleClickComponent: Function,
     access_name: { type: String, default: '' },
-    access_autocomplete: { type: String, default: '' }
+    access_autocomplete: { type: String, default: '' },
+    access_focus: { type: Boolean, default: false }
   },
   data () {
     return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormEmailfield.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormEmailfield.vue
@@ -44,6 +44,7 @@ export default defineComponent({
     error: { type: String, default: '' },
     access_name: { type: String, default: '' },
     access_autocomplete: { 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

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormInfo.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormInfo.vue
@@ -25,7 +25,8 @@ export default defineComponent({
     clickEvent: Function,
     handleClickComponent: Function,
     access_name: { type: String, default: '' },
-    access_autocomplete: { type: String, default: '' }
+    access_autocomplete: { type: String, default: '' },
+    access_focus: { type: Boolean, default: false }
   },
   data () {
     return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormLink.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormLink.vue
@@ -35,7 +35,8 @@ export default defineComponent({
     // et ça soulève des erreurs W3C
     hasError: { type: Boolean, default: undefined },
     access_name: { type: String, default: undefined },
-    access_autocomplete: { type: String, default: undefined }
+    access_autocomplete: { type: String, default: undefined },
+    access_focus: { type: Boolean, default: false }
   },
   methods: {
     handleClick () {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormModal.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormModal.vue
@@ -48,7 +48,8 @@ export default defineComponent({
     clickEvent: Function,
     hasError: { type: Boolean, default: undefined },
     access_name: { type: String, default: undefined },
-    access_autocomplete: { type: String, default: undefined }
+    access_autocomplete: { type: String, default: undefined },
+    access_focus: { type: Boolean, default: false }
   },
   methods: {
     closeModal () {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormOnlyChoice.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormOnlyChoice.vue
@@ -42,6 +42,7 @@ 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
@@ -55,6 +56,16 @@ export default defineComponent({
       variablesReplacer
     }
   },
+  mounted () {
+    if (this.access_focus) {
+      this.$nextTick(() => {
+        const element = document.querySelector('#' + this.id + '_' + this.values[0].value) as HTMLElement
+        if (element) {
+          element.focus()
+        }
+      })
+    }
+  },
   methods: {
     updateValue (event: Event) {
       const value = (event.target as HTMLInputElement).getAttribute('value')

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormOverview.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormOverview.vue
@@ -208,7 +208,8 @@ export default defineComponent({
     hasError: { type: Boolean, default: false },
     handleClickComponent: Function,
     access_name: { type: String, default: '' },
-    access_autocomplete: { type: String, default: '' }
+    access_autocomplete: { type: String, default: '' },
+    access_focus: { type: Boolean, default: false }
   },
   data () {
     return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormPhonefield.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormPhonefield.vue
@@ -128,6 +128,7 @@ export default defineComponent({
     error: { type: String, default: '' },
     access_name: { type: String, default: '' },
     access_autocomplete: { type: String, default: '' },
+    access_focus: { type: Boolean, default: false },
     clickEvent: Function,
     // les propriétés suivantes ne sont pas utilisées,
     // mais si on ne les met pas, elles apparaissent dans le DOM

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormRoomList.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormRoomList.vue
@@ -69,7 +69,8 @@ export default defineComponent({
     // et ça soulève des erreurs W3C
     handleClickComponent: Function,
     access_name: { type: String, default: '' },
-    access_autocomplete: { type: String, default: '' }
+    access_autocomplete: { type: String, default: '' },
+    access_focus: { type: Boolean, default: false }
   },
   data () {
     return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormScreen.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormScreen.vue
@@ -45,6 +45,7 @@
         :handleClickComponent="handleClickComponent"
         :access_name="component.accessibility?.name ?? component.slug"
         :access_autocomplete="component.accessibility?.autocomplete ?? 'off'"
+        :access_focus="component.accessibility?.focus ?? false"
       />
     </div>
   </div>

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormSubscreen.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormSubscreen.vue
@@ -101,6 +101,7 @@ export default defineComponent({
     hasError: { type: Boolean, default: undefined },
     access_name: { type: String, default: undefined },
     access_autocomplete: { type: String, default: undefined },
+    access_focus: { type: Boolean, default: false },
     clickEvent: Function
   },
   data () {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormTextarea.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormTextarea.vue
@@ -49,7 +49,8 @@ export default defineComponent({
     clickEvent: Function,
     handleClickComponent: Function,
     access_name: { type: String, default: '' },
-    access_autocomplete: { type: String, default: '' }
+    access_autocomplete: { type: String, default: '' },
+    access_focus: { type: Boolean, default: false }
   },
   computed: {
     internalValue: {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormTextfield.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormTextfield.vue
@@ -50,6 +50,7 @@ export default defineComponent({
     tagWhenEdit: { type: String, default: '' },
     access_name: { type: String, default: '' },
     access_autocomplete: { 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

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormUpload.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormUpload.vue
@@ -85,7 +85,8 @@ export default defineComponent({
     handleClickComponent: Function,
     clickEvent: Function,
     access_name: { type: String, default: undefined },
-    access_autocomplete: { type: String, default: undefined }
+    access_autocomplete: { type: String, default: undefined },
+    access_focus: { type: Boolean, default: false }
   },
   data () {
     return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormUploadPhotos.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormUploadPhotos.vue
@@ -45,7 +45,8 @@ export default defineComponent({
     handleClickComponent: Function,
     clickEvent: Function,
     access_name: { type: String, default: undefined },
-    access_autocomplete: { type: String, default: undefined }
+    access_autocomplete: { type: String, default: undefined },
+    access_focus: { type: Boolean, default: false }
   },
   data () {
     return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormWarning.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormWarning.vue
@@ -25,7 +25,8 @@ export default defineComponent({
     handleClickComponent: Function,
     clickEvent: Function,
     access_name: { type: String, default: undefined },
-    access_autocomplete: { type: String, default: undefined }
+    access_autocomplete: { type: String, default: undefined },
+    access_focus: { type: Boolean, default: false }
   },
   data () {
     return {