keyboard navigation on SignalementFormAddress #2991

assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue

@@ -19,7 +19,9 @@
         v-for="(suggestion, index) in suggestions"
         :key="index"
         class="fr-col-12 fr-p-3v fr-text-label--blue-france fr-address-suggestion"
+        tabindex="0"
         @click="handleClickSuggestion(index)"
+        @keyup="handleKeyboardSuggestion($event, index)"
         >
         {{ suggestion.properties.label }}
       </div>
@@ -189,6 +191,24 @@ export default defineComponent({
         }, 200)
       }
     },
+    handleKeyboardSuggestion (event: any, index: number) {
+      if (event.key === 'Enter') {
+        this.handleClickSuggestion(index)
+      } else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        event.preventDefault()
+        const suggestionElements = document.querySelectorAll('.fr-address-suggestion')
+        if (suggestionElements.length > 0) {
+          let newIndex = index
+          if (event.key === 'ArrowUp') {
+            newIndex = (index === 0) ? suggestionElements.length - 1 : index - 1
+          } else if (event.key === 'ArrowDown') {
+            newIndex = (index === suggestionElements.length - 1) ? 0 : index + 1
+          }
+          const nextElement = suggestionElements[newIndex] as HTMLElement
+          nextElement.focus()
+        }
+      }
+    },
     handleAddressFound (requestResponse: any) {
       this.suggestions = requestResponse.features
     },