From b0ce262e59ee62d9d6834a0ef4db8b70ef4b118f Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Tue, 11 Feb 2025 13:02:51 +0100
Subject: [PATCH] fix(a11y forms): better form accessibility add search role or
 tag fix type on pages with search (not always form related)

---
 src/components/SearchComponent.vue      | 28 +++++++++++++------------
 src/store/SearchStore.js                |  2 +-
 src/views/bouquets/BouquetsListView.vue |  1 -
 src/views/datasets/DatasetsListView.vue |  8 +++----
 vite.config.mts                         |  8 ++++++-
 5 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index 508c6dded..27c454e5f 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -90,19 +90,21 @@ const clear = () => {
 </script>
 
 <template>
-  <DsfrInputGroup
-    v-if="isFilter"
-    :id="id"
-    v-model="selectedQuery"
-    :label="searchLabel"
-    class="filter-input"
-    :label-visible="labelVisible"
-    :placeholder="!labelVisible ? searchLabel : undefined"
-  >
-    <template #before-input>
-      <VIconCustom name="search-line" class="search-icon" />
-    </template>
-  </DsfrInputGroup>
+  <search v-if="isFilter">
+    <DsfrInputGroup
+      :id="id"
+      v-model="selectedQuery"
+      :label="searchLabel"
+      class="filter-input"
+      type="search"
+      :label-visible="labelVisible"
+      :placeholder="!labelVisible ? searchLabel : undefined"
+    >
+      <template #before-input>
+        <VIconCustom name="search-line" class="search-icon" />
+      </template>
+    </DsfrInputGroup>
+  </search>
 
   <DsfrSearchBar
     v-else-if="!dropdown.length"
diff --git a/src/store/SearchStore.js b/src/store/SearchStore.js
index 01013823a..660e15c3b 100644
--- a/src/store/SearchStore.js
+++ b/src/store/SearchStore.js
@@ -28,7 +28,7 @@ export const useSearchStore = defineStore('search', {
       ].map((page) => {
         page += 1
         return {
-          label: page,
+          label: page.toString(),
           href: '#',
           title: `Page ${page}`
         }
diff --git a/src/views/bouquets/BouquetsListView.vue b/src/views/bouquets/BouquetsListView.vue
index 3f67df986..4e5b1a597 100644
--- a/src/views/bouquets/BouquetsListView.vue
+++ b/src/views/bouquets/BouquetsListView.vue
@@ -169,7 +169,6 @@ watch(
         v-model="selectedQuery"
         :is-filter="true"
         :search-label="`Filtrer les ${topicsName}s`"
-        :label="`Filtrer les ${topicsName}s`"
         :search-endpoint="router.resolve({ name: topicsSlug }).href"
         @update:model-value="search"
       />
diff --git a/src/views/datasets/DatasetsListView.vue b/src/views/datasets/DatasetsListView.vue
index e594decc2..d4a9d78fd 100644
--- a/src/views/datasets/DatasetsListView.vue
+++ b/src/views/datasets/DatasetsListView.vue
@@ -122,7 +122,7 @@ const computeUrlQuery = (
   }
 }
 
-const onSelectTopic = (topicId: string) => {
+const onSelectTopic = (topicId: string | number) => {
   router.push({
     path: '/datasets',
     query: computeUrlQuery({
@@ -132,7 +132,7 @@ const onSelectTopic = (topicId: string) => {
   })
 }
 
-const onSelectOrganization = (orgId: string) => {
+const onSelectOrganization = (orgId: string | number) => {
   router.push({
     path: '/datasets',
     query: computeUrlQuery({
@@ -259,14 +259,12 @@ onMounted(() => {
     </p>
     <div class="fr-col-md-12 fr-mb-2w">
       <SearchComponent
-        id="search-bouquet"
+        id="search-datasets"
         v-model="localQuery"
         :is-filter="true"
         search-label="Filtrer des données"
-        label="Filtrer des données"
         :search-endpoint="router.resolve({ name: 'datasets' }).href"
         @update:model-value="search()"
-        @search="$emit('search', $event)"
       />
     </div>
     <div v-if="topicItems" class="fr-col-md-12 fr-mb-2w">
diff --git a/vite.config.mts b/vite.config.mts
index 89c7e93b0..7bb06598f 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -34,7 +34,13 @@ export default defineConfig(({ mode }) => {
   return {
     base: '/',
     plugins: [
-      vue(),
+      vue({
+        template: {
+          compilerOptions: {
+            isCustomElement: (tag) => ['search'].includes(tag)
+          }
+        }
+      }),
       vueDevTools(),
       AutoImport({
         include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],