fix(a11y forms): better form accessibility

add search role or tag fix type on pages with search (not always form related)
opendatateam · Feb 11, 2025 · b0ce262 · b0ce262
1 parent 54b6f22
commit b0ce262
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/],