From 1c2b69eb3ee8b71d5598f20aa0e2a87cb1a843ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9l=C3=A8ne=20Meneuvrier?= <hmeneuvrier@gmail.com>
Date: Tue, 10 Sep 2024 15:10:43 +0200
Subject: [PATCH] keyboard navigation on SignalementFormAddress #2991

---
 .../components/SignalementFormAddress.vue     | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue
index 3dc0524dd..f919631d7 100644
--- a/assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue
+++ b/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
     },