From 54b6f2275d965dae5284b38a86367c94d686640a Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Thu, 23 Jan 2025 13:12:39 +0100
Subject: [PATCH 01/12] fix(forms): add description for DS title

---
 src/components/forms/dataset/DatasetPropertiesTextFields.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/forms/dataset/DatasetPropertiesTextFields.vue b/src/components/forms/dataset/DatasetPropertiesTextFields.vue
index ba536f29b..3777f9d58 100644
--- a/src/components/forms/dataset/DatasetPropertiesTextFields.vue
+++ b/src/components/forms/dataset/DatasetPropertiesTextFields.vue
@@ -15,11 +15,16 @@ const { topicsName } = useTopicsConf()
     <label class="fr-label" for="input-title"
       >Libellé du jeu de données (obligatoire)</label
     >
+    <p id="title-description" class="fr-mt-1v fr-mb-2v fr-text--sm">
+      Décrivez l'indicateur ou l'objet géographique correspondant. Par
+      exemple&nbsp;: "&nbsp;Taux d'imperméabilisation des sols&nbsp;"
+    </p>
     <input
       id="input-title"
       v-model="datasetProperties.title"
       class="fr-input"
       type="text"
+      aria-describedby="title-description"
     />
   </div>
   <div class="fr-input-group">

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 02/12] 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/],

From c6c2e194d90dea319c4f7e4321f23207f5628bb6 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Tue, 11 Feb 2025 17:14:25 +0100
Subject: [PATCH 03/12] fix(a11y forms): accessibility fixes for
 DatasetAddToBouquetModal

---
 .../datasets/DatasetAddToBouquetModal.vue     | 112 +++++++++++++++++-
 src/components/forms/SelectTopicGroup.vue     |  16 ++-
 src/components/forms/bouquet/BouquetForm.vue  |   2 +
 .../dataset/DatasetPropertiesTextFields.vue   |  12 +-
 4 files changed, 131 insertions(+), 11 deletions(-)

diff --git a/src/components/datasets/DatasetAddToBouquetModal.vue b/src/components/datasets/DatasetAddToBouquetModal.vue
index 46b9d429a..3b861c9ff 100644
--- a/src/components/datasets/DatasetAddToBouquetModal.vue
+++ b/src/components/datasets/DatasetAddToBouquetModal.vue
@@ -11,6 +11,7 @@ import { useTopicsConf } from '@/utils/config'
 
 import { useExtras } from '@/utils/bouquet'
 import { useGroups } from '@/utils/bouquetGroups'
+import { templateRef } from '@vueuse/core'
 
 const props = defineProps({
   show: {
@@ -49,6 +50,38 @@ const bouquetOptions = computed(() => {
   })
 })
 
+const inputErrorMessages = new Map([
+  ['bouquetId', `Veuillez sélectionner un ${topicsName}.`],
+  ['group', `Le groupe est limité à 100 caractères.`],
+  ['title', 'Veuillez renseigner un libellé.'],
+  ['purpose', "La raison d'utilisation ne doit pas être vide."]
+])
+const formErrors: Ref<string[]> = ref([])
+
+const validateFields = () => {
+  if (!datasetProperties.value.title.trim()) {
+    formErrors.value.push('title')
+  }
+  if (!datasetProperties.value.purpose.trim()) {
+    formErrors.value.push('purpose')
+  }
+  if (!selectedBouquetId.value) {
+    formErrors.value.push('bouquetId')
+  }
+  if (
+    datasetProperties.value.group &&
+    datasetProperties.value.group.trim().length > 100
+  ) {
+    formErrors.value.push('group')
+  }
+}
+
+const sortedinputErrors = computed(() =>
+  Array.from(inputErrorMessages.keys()).filter((key) =>
+    formErrors.value.includes(key)
+  )
+)
+
 const isValid = computed(() => {
   if (topicsDatasetEditorialization) {
     return (
@@ -73,12 +106,29 @@ const modalActions = computed(() => {
     },
     {
       label: 'Enregistrer',
-      disabled: !isValid.value,
-      onClick: () => submit()
+      onClick: () => onSubmit()
     }
   ]
 })
 
+const errorStatus = templateRef('errorStatus')
+const isSubmitted: Ref<boolean> = ref(false)
+
+const onSubmit = () => {
+  // reset error fields
+  formErrors.value = []
+  isSubmitted.value = true
+
+  validateFields()
+
+  if (formErrors.value.length > 0) {
+    errorStatus.value.focus()
+  } else if (isValid.value) {
+    isSubmitted.value = false
+    submit()
+  }
+}
+
 const selectedBouquet = computed(() => {
   if (selectedBouquetId.value === null) {
     return null
@@ -142,15 +192,51 @@ onMounted(() => {
     :title="`Ajouter le jeu de données à un de vos ${topicsName}s`"
     :opened="show"
     aria-modal="true"
+    class="form"
     @close="closeModal"
   >
+    <div
+      v-show="formErrors.length"
+      class="fr-my-4w fr-p-2w error-status"
+      role="group"
+      aria-labelledby="error-summary-title"
+    >
+      <h3 id="error-summary-title" ref="errorStatus" tabindex="-1">
+        Il y a {{ sortedinputErrors.length }} erreur<span
+          v-if="formErrors.length > 1"
+          >s</span
+        >
+        de saisie dans le formulaire.
+      </h3>
+      <ol>
+        <li
+          v-for="(error, index) in sortedinputErrors"
+          :key="index"
+          class="error"
+        >
+          <a :href="`#input-${error}`">{{ inputErrorMessages.get(error) }}</a>
+        </li>
+      </ol>
+    </div>
     <DsfrSelect
+      id="input-bouquetId"
       v-model="selectedBouquetId"
       :label="`${capitalize(topicsName)} à associer (obligatoire)`"
       :options="bouquetOptions"
       :default-unselected-text="`Choisissez un ${topicsName}`"
+      :aria-invalid="
+        formErrors.includes('bouquetId') && isSubmitted ? true : undefined
+      "
+      aria-describedby="errors-bouquetId"
+    />
+    <p
+      v-if="formErrors.includes('bouquetId')"
+      id="errors-bouquetId"
+      class="error"
     >
-    </DsfrSelect>
+      <VIconCustom name="error-fill" />
+      {{ inputErrorMessages.get('bouquetId') }}
+    </p>
     <DsfrBadge
       v-if="isDatasetInBouquet"
       type="info"
@@ -161,16 +247,29 @@ onMounted(() => {
     />
     <div class="fr-input-group">
       <SelectTopicGroup
+        id="input-group"
         v-model:properties-model="datasetProperties"
         v-model:groups-model="datasetsGroups"
         label="Regroupement"
         description="Rechercher ou créer un regroupement (100 caractères maximum). Un regroupement contient un ou plusieurs jeux de données."
-      />
+      >
+        <template v-if="formErrors.includes('group')" #errorGroup>
+          {{ inputErrorMessages.get('group') }}
+        </template>
+      </SelectTopicGroup>
     </div>
     <DatasetPropertiesTextFields
       v-if="topicsDatasetEditorialization"
       v-model:dataset-properties-model="datasetProperties"
-    />
+    >
+      <template v-if="formErrors.includes('title')" #errorTitle>
+        {{ inputErrorMessages.get('title') }}
+      </template>
+      <template v-if="formErrors.includes('purpose')" #errorPurpose>
+        {{ inputErrorMessages.get('purpose') }}
+      </template>
+    </DatasetPropertiesTextFields>
+
     <slot name="footer">
       <DsfrButtonGroup
         v-if="modalActions?.length"
@@ -186,4 +285,7 @@ onMounted(() => {
 .fr-select-group:has(+ .fr-badge) {
   margin-bottom: 0.5rem;
 }
+:deep(.fr-select-group:has(+ #errors-name)) {
+  margin-bottom: 0;
+}
 </style>
diff --git a/src/components/forms/SelectTopicGroup.vue b/src/components/forms/SelectTopicGroup.vue
index 9232dc9e3..8d974dfb1 100644
--- a/src/components/forms/SelectTopicGroup.vue
+++ b/src/components/forms/SelectTopicGroup.vue
@@ -26,6 +26,10 @@ defineProps({
   required: {
     type: Boolean,
     default: false
+  },
+  isErrored: {
+    type: Boolean,
+    defautl: false
   }
 })
 
@@ -44,7 +48,7 @@ const trimGroupName = (groupName: string) => {
 </script>
 
 <template>
-  <label for="regroupement-input">
+  <label for="input-group">
     {{ label }}
     (<span v-if="required">obligatoire</span><span v-else>facultatif</span>)
   </label>
@@ -56,7 +60,7 @@ const trimGroupName = (groupName: string) => {
     {{ description }}
   </p>
   <Multiselect
-    id="regroupement-input"
+    id="input-group"
     v-model="datasetProperties.group"
     role="search"
     :options="groupOptions"
@@ -68,11 +72,12 @@ const trimGroupName = (groupName: string) => {
     :create-option="true"
     placeholder=""
     :aria="{
-      'aria-describedby': 'regroupement-description',
+      'aria-describedby': 'errors-group regroupement-description',
       // useless or unsupported https://github.com/vueform/multiselect/issues/436
       'aria-labelledby': null,
       'aria-multiselectable': null,
-      'aria-placeholder': null
+      'aria-placeholder': null,
+      'aria-invalid': `${!!$slots.errorGroup}`
     }"
     @select="trimGroupName"
   >
@@ -96,4 +101,7 @@ const trimGroupName = (groupName: string) => {
       </button>
     </template>
   </Multiselect>
+  <p v-if="$slots.errorGroup" id="errors-group" class="error">
+    <VIconCustom name="error-fill" />&nbsp;<slot name="errorGroup" />
+  </p>
 </template>
diff --git a/src/components/forms/bouquet/BouquetForm.vue b/src/components/forms/bouquet/BouquetForm.vue
index 1029cbd29..797d8317c 100644
--- a/src/components/forms/bouquet/BouquetForm.vue
+++ b/src/components/forms/bouquet/BouquetForm.vue
@@ -119,6 +119,7 @@ onMounted(() => {
   <!-- Title -->
   <div class="fr-input-group">
     <DsfrInput
+      id="input-name"
       v-model="name"
       v-bind="nameAttrs"
       :label="`Sujet du ${topicsName} (obligatoire)`"
@@ -134,6 +135,7 @@ onMounted(() => {
   <!-- Description -->
   <div class="fr-input-group">
     <DsfrInput
+      id="input-description"
       v-model="description"
       v-bind="descriptionAttrs"
       is-textarea
diff --git a/src/components/forms/dataset/DatasetPropertiesTextFields.vue b/src/components/forms/dataset/DatasetPropertiesTextFields.vue
index 3777f9d58..4cb6514e8 100644
--- a/src/components/forms/dataset/DatasetPropertiesTextFields.vue
+++ b/src/components/forms/dataset/DatasetPropertiesTextFields.vue
@@ -24,8 +24,12 @@ const { topicsName } = useTopicsConf()
       v-model="datasetProperties.title"
       class="fr-input"
       type="text"
-      aria-describedby="title-description"
+      aria-describedby="errors-title title-description"
+      :aria-invalid="!!$slots.errorTitle"
     />
+    <p v-if="$slots.errorTitle" id="errors-title" class="error">
+      <VIconCustom name="error-fill" />&nbsp;<slot name="errorTitle" />
+    </p>
   </div>
   <div class="fr-input-group">
     <label class="fr-label" for="input-purpose"
@@ -46,8 +50,12 @@ const { topicsName } = useTopicsConf()
       v-model="datasetProperties.purpose"
       class="fr-input"
       type="text"
-      aria-describedby="purpose-description"
+      aria-describedby="errors-purpose purpose-description"
+      :aria-invalid="!!$slots.errorPurpose"
     />
+    <p v-if="$slots.errorPurpose" id="errors-purpose" class="error">
+      <VIconCustom name="error-fill" />&nbsp;<slot name="errorPurpose" />
+    </p>
   </div>
 </template>
 

From 86e4de4029c3890c00de67f608ff5c8336651e23 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Tue, 11 Feb 2025 17:25:10 +0100
Subject: [PATCH 04/12] fix(a11y forms): clean DatasetAddToBouquetModal

---
 .../datasets/DatasetAddToBouquetModal.vue          | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/datasets/DatasetAddToBouquetModal.vue b/src/components/datasets/DatasetAddToBouquetModal.vue
index 3b861c9ff..5add6d8a8 100644
--- a/src/components/datasets/DatasetAddToBouquetModal.vue
+++ b/src/components/datasets/DatasetAddToBouquetModal.vue
@@ -11,7 +11,6 @@ import { useTopicsConf } from '@/utils/config'
 
 import { useExtras } from '@/utils/bouquet'
 import { useGroups } from '@/utils/bouquetGroups'
-import { templateRef } from '@vueuse/core'
 
 const props = defineProps({
   show: {
@@ -84,14 +83,7 @@ const sortedinputErrors = computed(() =>
 
 const isValid = computed(() => {
   if (topicsDatasetEditorialization) {
-    return (
-      !!datasetProperties.value.title.trim() &&
-      !!datasetProperties.value.purpose.trim() &&
-      !!selectedBouquetId.value &&
-      (datasetProperties.value.group
-        ? datasetProperties.value.group.trim().length < 100
-        : true)
-    )
+    return !formErrors.value.length
   } else {
     return !!selectedBouquetId.value
   }
@@ -111,7 +103,7 @@ const modalActions = computed(() => {
   ]
 })
 
-const errorStatus = templateRef('errorStatus')
+const errorStatus = useTemplateRef('errorStatus')
 const isSubmitted: Ref<boolean> = ref(false)
 
 const onSubmit = () => {
@@ -122,7 +114,7 @@ const onSubmit = () => {
   validateFields()
 
   if (formErrors.value.length > 0) {
-    errorStatus.value.focus()
+    errorStatus.value?.focus()
   } else if (isValid.value) {
     isSubmitted.value = false
     submit()

From 9252d755f515b5a161c7132c820df1226e64c031 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Thu, 13 Feb 2025 14:49:39 +0100
Subject: [PATCH 05/12] fix(a11y forms): fix types

---
 src/components/datasets/DatasetAddToBouquetModal.vue | 3 ++-
 src/components/forms/dataset/DatasetEditModal.vue    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/datasets/DatasetAddToBouquetModal.vue b/src/components/datasets/DatasetAddToBouquetModal.vue
index 5add6d8a8..43370de16 100644
--- a/src/components/datasets/DatasetAddToBouquetModal.vue
+++ b/src/components/datasets/DatasetAddToBouquetModal.vue
@@ -11,6 +11,7 @@ import { useTopicsConf } from '@/utils/config'
 
 import { useExtras } from '@/utils/bouquet'
 import { useGroups } from '@/utils/bouquetGroups'
+import type { DsfrButtonGroupProps } from '@gouvminint/vue-dsfr'
 
 const props = defineProps({
   show: {
@@ -89,7 +90,7 @@ const isValid = computed(() => {
   }
 })
 
-const modalActions = computed(() => {
+const modalActions: Ref<DsfrButtonGroupProps['buttons']> = computed(() => {
   return [
     {
       label: 'Annuler',
diff --git a/src/components/forms/dataset/DatasetEditModal.vue b/src/components/forms/dataset/DatasetEditModal.vue
index 7fafec344..deeb66203 100644
--- a/src/components/forms/dataset/DatasetEditModal.vue
+++ b/src/components/forms/dataset/DatasetEditModal.vue
@@ -11,6 +11,7 @@ import {
 } from '@/model/topic'
 import { useDatasetStore } from '@/store/DatasetStore'
 
+import type { DsfrButtonGroupProps } from '@gouvminint/vue-dsfr'
 import DatasetPropertiesFields from './DatasetPropertiesFields.vue'
 
 export interface DatasetEditModalType {
@@ -37,7 +38,7 @@ const modalData: Ref<DatasetModalData> = ref({
   mode: 'edit'
 })
 
-const modalActions = computed(() => {
+const modalActions: Ref<DsfrButtonGroupProps['buttons']> = computed(() => {
   return [
     {
       label: 'Annuler',

From 13fbab15bf37523a076ae01fe1cc902e781accd5 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Thu, 13 Feb 2025 17:37:47 +0100
Subject: [PATCH 06/12] fix(a11y forms): refactor validation create a
 composable for error handling create a component for error summary

---
 .../datasets/DatasetAddToBouquetModal.vue     | 85 +++++++++----------
 src/components/forms/ErrorSummary.vue         | 41 +++++++++
 src/utils/form.ts                             | 33 +++++++
 3 files changed, 116 insertions(+), 43 deletions(-)
 create mode 100644 src/components/forms/ErrorSummary.vue
 create mode 100644 src/utils/form.ts

diff --git a/src/components/datasets/DatasetAddToBouquetModal.vue b/src/components/datasets/DatasetAddToBouquetModal.vue
index 43370de16..33dcf723e 100644
--- a/src/components/datasets/DatasetAddToBouquetModal.vue
+++ b/src/components/datasets/DatasetAddToBouquetModal.vue
@@ -13,6 +13,8 @@ import { useExtras } from '@/utils/bouquet'
 import { useGroups } from '@/utils/bouquetGroups'
 import type { DsfrButtonGroupProps } from '@gouvminint/vue-dsfr'
 
+import { useForm, type FormErrorMessage } from '@/utils/form'
+
 const props = defineProps({
   show: {
     type: Boolean,
@@ -50,14 +52,25 @@ const bouquetOptions = computed(() => {
   })
 })
 
-const inputErrorMessages = new Map([
-  ['bouquetId', `Veuillez sélectionner un ${topicsName}.`],
-  ['group', `Le groupe est limité à 100 caractères.`],
-  ['title', 'Veuillez renseigner un libellé.'],
-  ['purpose', "La raison d'utilisation ne doit pas être vide."]
-])
+const errorMessages: FormErrorMessage[] = [
+  {
+    inputName: 'bouquetId',
+    message: `Veuillez sélectionner un ${topicsName}.`
+  },
+  { inputName: 'group', message: `Le groupe est limité à 100 caractères.` },
+  { inputName: 'title', message: 'Veuillez renseigner un libellé.' },
+  {
+    inputName: 'purpose',
+    message: "La raison d'utilisation ne doit pas être vide."
+  }
+]
 const formErrors: Ref<string[]> = ref([])
 
+const { formErrorMessagesMap, sortedErrors } = useForm(
+  errorMessages,
+  formErrors
+)
+
 const validateFields = () => {
   if (!datasetProperties.value.title.trim()) {
     formErrors.value.push('title')
@@ -76,12 +89,6 @@ const validateFields = () => {
   }
 }
 
-const sortedinputErrors = computed(() =>
-  Array.from(inputErrorMessages.keys()).filter((key) =>
-    formErrors.value.includes(key)
-  )
-)
-
 const isValid = computed(() => {
   if (topicsDatasetEditorialization) {
     return !formErrors.value.length
@@ -104,19 +111,28 @@ const modalActions: Ref<DsfrButtonGroupProps['buttons']> = computed(() => {
   ]
 })
 
-const errorStatus = useTemplateRef('errorStatus')
+const errorSummary = useTemplateRef('errorSummary')
 const isSubmitted: Ref<boolean> = ref(false)
 
-const onSubmit = () => {
+const onSubmit = async () => {
   // reset error fields
   formErrors.value = []
   isSubmitted.value = true
 
+  // check input fields
   validateFields()
 
+  // handle error summary
   if (formErrors.value.length > 0) {
-    errorStatus.value?.focus()
-  } else if (isValid.value) {
+    const errorSummaryTitle: HTMLHeadingElement | undefined | null =
+      errorSummary.value?.$el.querySelector('#error-summary-title')
+    if (errorSummaryTitle) {
+      await nextTick()
+      errorSummaryTitle.focus()
+    }
+  }
+  // submit if no error
+  else if (isValid.value) {
     isSubmitted.value = false
     submit()
   }
@@ -188,29 +204,13 @@ onMounted(() => {
     class="form"
     @close="closeModal"
   >
-    <div
+    <ErrorSummary
       v-show="formErrors.length"
-      class="fr-my-4w fr-p-2w error-status"
-      role="group"
-      aria-labelledby="error-summary-title"
-    >
-      <h3 id="error-summary-title" ref="errorStatus" tabindex="-1">
-        Il y a {{ sortedinputErrors.length }} erreur<span
-          v-if="formErrors.length > 1"
-          >s</span
-        >
-        de saisie dans le formulaire.
-      </h3>
-      <ol>
-        <li
-          v-for="(error, index) in sortedinputErrors"
-          :key="index"
-          class="error"
-        >
-          <a :href="`#input-${error}`">{{ inputErrorMessages.get(error) }}</a>
-        </li>
-      </ol>
-    </div>
+      ref="errorSummary"
+      :form-error-messages-map
+      :form-errors="sortedErrors"
+      heading-level="h3"
+    />
     <DsfrSelect
       id="input-bouquetId"
       v-model="selectedBouquetId"
@@ -228,7 +228,7 @@ onMounted(() => {
       class="error"
     >
       <VIconCustom name="error-fill" />
-      {{ inputErrorMessages.get('bouquetId') }}
+      {{ formErrorMessagesMap.get('bouquetId') }}
     </p>
     <DsfrBadge
       v-if="isDatasetInBouquet"
@@ -240,14 +240,13 @@ onMounted(() => {
     />
     <div class="fr-input-group">
       <SelectTopicGroup
-        id="input-group"
         v-model:properties-model="datasetProperties"
         v-model:groups-model="datasetsGroups"
         label="Regroupement"
         description="Rechercher ou créer un regroupement (100 caractères maximum). Un regroupement contient un ou plusieurs jeux de données."
       >
         <template v-if="formErrors.includes('group')" #errorGroup>
-          {{ inputErrorMessages.get('group') }}
+          {{ formErrorMessagesMap.get('group') }}
         </template>
       </SelectTopicGroup>
     </div>
@@ -256,10 +255,10 @@ onMounted(() => {
       v-model:dataset-properties-model="datasetProperties"
     >
       <template v-if="formErrors.includes('title')" #errorTitle>
-        {{ inputErrorMessages.get('title') }}
+        {{ formErrorMessagesMap.get('title') }}
       </template>
       <template v-if="formErrors.includes('purpose')" #errorPurpose>
-        {{ inputErrorMessages.get('purpose') }}
+        {{ formErrorMessagesMap.get('purpose') }}
       </template>
     </DatasetPropertiesTextFields>
 
diff --git a/src/components/forms/ErrorSummary.vue b/src/components/forms/ErrorSummary.vue
new file mode 100644
index 000000000..57f94cfec
--- /dev/null
+++ b/src/components/forms/ErrorSummary.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import type { FormErrorMessagesMap } from '@/utils/form'
+
+defineProps({
+  formErrors: {
+    type: Array<string>,
+    required: true
+  },
+  formErrorMessagesMap: {
+    type: Object as () => FormErrorMessagesMap,
+    required: true
+  },
+  headingLevel: {
+    type: String as () => 'h2' | 'h3' | 'h4' | 'h5',
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div
+    v-show="formErrors.length"
+    class="fr-my-4w fr-p-2w error-status"
+    role="group"
+    aria-labelledby="error-summary-title"
+  >
+    <component :is="headingLevel" id="error-summary-title" tabindex="-1">
+      Il y a {{ formErrors.length }} erreur<span v-if="formErrors.length > 1"
+        >s</span
+      >
+      de saisie dans le formulaire.
+    </component>
+    <ol>
+      <li v-for="(error, index) in formErrors" :key="index" class="error">
+        <a :href="`#input-${error}`">{{ formErrorMessagesMap.get(error) }}</a>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/utils/form.ts b/src/utils/form.ts
new file mode 100644
index 000000000..96d9525e1
--- /dev/null
+++ b/src/utils/form.ts
@@ -0,0 +1,33 @@
+import type { ComputedRef, Ref } from 'vue'
+
+export type FormErrorMessage = { inputName: string; message: string }
+
+export type FormErrorMessagesMap = Map<
+  FormErrorMessage['inputName'],
+  FormErrorMessage['message']
+>
+
+export function useForm(
+  formErrorMessages: FormErrorMessage[],
+  formErrors: Ref<string[]>
+): {
+  formErrorMessagesMap: ComputedRef<FormErrorMessagesMap>
+  sortedErrors: ComputedRef<string[]>
+} {
+  const formErrorMessagesMap = computed(() => {
+    return formErrorMessages.reduce(
+      (acc, error) => acc.set(error.inputName, error.message),
+      new Map()
+    )
+  })
+  const sortedErrors = computed(() => {
+    return Array.from(formErrorMessagesMap.value.keys()).filter((key) =>
+      formErrors.value.includes(key)
+    )
+  })
+
+  return {
+    formErrorMessagesMap,
+    sortedErrors
+  }
+}

From c38365eb46ef582258e4ce910f763c1d2b72a1bc Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Mon, 17 Feb 2025 17:31:57 +0100
Subject: [PATCH 07/12] fix(a11y forms): refactor validation Create error
 message component Handle error messages inside composable Handle form
 validation inside DatasetEditModal

---
 .../datasets/DatasetAddToBouquetModal.vue     | 57 +++++----------
 src/components/forms/ErrorMessage.vue         | 37 ++++++++++
 src/components/forms/SelectTopicGroup.vue     | 17 +++--
 .../forms/dataset/DatasetEditModal.vue        | 71 +++++++++++++++++--
 .../forms/dataset/DatasetPropertiesFields.vue | 10 +++
 .../dataset/DatasetPropertiesTextFields.vue   | 31 +++++---
 src/utils/form.ts                             | 38 ++++++++--
 7 files changed, 194 insertions(+), 67 deletions(-)
 create mode 100644 src/components/forms/ErrorMessage.vue

diff --git a/src/components/datasets/DatasetAddToBouquetModal.vue b/src/components/datasets/DatasetAddToBouquetModal.vue
index 33dcf723e..60b508077 100644
--- a/src/components/datasets/DatasetAddToBouquetModal.vue
+++ b/src/components/datasets/DatasetAddToBouquetModal.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { DatasetV2 } from '@datagouv/components'
-import { capitalize, computed, onMounted, ref } from 'vue'
+import { capitalize, computed, onMounted, ref, type Ref } from 'vue'
 import { useLoading } from 'vue-loading-overlay'
 import { toast } from 'vue3-toastify'
 
+import ErrorMessage from '@/components/forms/ErrorMessage.vue'
 import DatasetPropertiesTextFields from '@/components/forms/dataset/DatasetPropertiesTextFields.vue'
 import { Availability, type DatasetProperties } from '@/model/topic'
 import { useTopicStore } from '@/store/TopicStore'
@@ -13,7 +14,7 @@ import { useExtras } from '@/utils/bouquet'
 import { useGroups } from '@/utils/bouquetGroups'
 import type { DsfrButtonGroupProps } from '@gouvminint/vue-dsfr'
 
-import { useForm, type FormErrorMessage } from '@/utils/form'
+import { useForm } from '@/utils/form'
 
 const props = defineProps({
   show: {
@@ -52,24 +53,10 @@ const bouquetOptions = computed(() => {
   })
 })
 
-const errorMessages: FormErrorMessage[] = [
-  {
-    inputName: 'bouquetId',
-    message: `Veuillez sélectionner un ${topicsName}.`
-  },
-  { inputName: 'group', message: `Le groupe est limité à 100 caractères.` },
-  { inputName: 'title', message: 'Veuillez renseigner un libellé.' },
-  {
-    inputName: 'purpose',
-    message: "La raison d'utilisation ne doit pas être vide."
-  }
-]
 const formErrors: Ref<string[]> = ref([])
 
-const { formErrorMessagesMap, sortedErrors } = useForm(
-  errorMessages,
-  formErrors
-)
+const { formErrorMessagesMap, sortedErrors, getErrorMessage } =
+  useForm(formErrors)
 
 const validateFields = () => {
   if (!datasetProperties.value.title.trim()) {
@@ -222,14 +209,12 @@ onMounted(() => {
       "
       aria-describedby="errors-bouquetId"
     />
-    <p
-      v-if="formErrors.includes('bouquetId')"
-      id="errors-bouquetId"
-      class="error"
-    >
-      <VIconCustom name="error-fill" />
-      {{ formErrorMessagesMap.get('bouquetId') }}
-    </p>
+    <ErrorMessage
+      v-if="!!getErrorMessage('bouquetId')"
+      input-name="bouquetId"
+      :error-message="getErrorMessage('bouquetId')"
+    />
+
     <DsfrBadge
       v-if="isDatasetInBouquet"
       type="info"
@@ -244,23 +229,15 @@ onMounted(() => {
         v-model:groups-model="datasetsGroups"
         label="Regroupement"
         description="Rechercher ou créer un regroupement (100 caractères maximum). Un regroupement contient un ou plusieurs jeux de données."
-      >
-        <template v-if="formErrors.includes('group')" #errorGroup>
-          {{ formErrorMessagesMap.get('group') }}
-        </template>
-      </SelectTopicGroup>
+        :error-message="getErrorMessage('group')"
+      />
     </div>
     <DatasetPropertiesTextFields
       v-if="topicsDatasetEditorialization"
       v-model:dataset-properties-model="datasetProperties"
-    >
-      <template v-if="formErrors.includes('title')" #errorTitle>
-        {{ formErrorMessagesMap.get('title') }}
-      </template>
-      <template v-if="formErrors.includes('purpose')" #errorPurpose>
-        {{ formErrorMessagesMap.get('purpose') }}
-      </template>
-    </DatasetPropertiesTextFields>
+      :error-title="getErrorMessage('title')"
+      :error-purpose="getErrorMessage('purpose')"
+    />
 
     <slot name="footer">
       <DsfrButtonGroup
@@ -277,7 +254,7 @@ onMounted(() => {
 .fr-select-group:has(+ .fr-badge) {
   margin-bottom: 0.5rem;
 }
-:deep(.fr-select-group:has(+ #errors-name)) {
+:deep(.fr-select-group:has(+ #errors-bouquetId)) {
   margin-bottom: 0;
 }
 </style>
diff --git a/src/components/forms/ErrorMessage.vue b/src/components/forms/ErrorMessage.vue
new file mode 100644
index 000000000..f28daa27b
--- /dev/null
+++ b/src/components/forms/ErrorMessage.vue
@@ -0,0 +1,37 @@
+<script lang="ts">
+/**
+ * Use a non-null assertion operator if the prop might be null or undefined.
+ * Only use this with a `v-if`
+ *
+ * @example
+ * ```vue
+ * <ErrorMessage
+      v-if="!!getErrorMessage('bouquetId')"
+      input-name="bouquetId"
+      :error-message="getErrorMessage('bouquetId')!"
+    />
+  * ```
+  */
+export default {}
+</script>
+<script lang="ts" setup>
+/*
+To keep things simple, we can use TypeScript's non-null assertion operator (!) when calling this component and passing the 'errorMessage' prop.
+We need the prop to be required so it can't be undefined but sometimes the function to get the error message from the parent might return undefined. This is mitigated with the v-ifs (on the component or here on the template) but typescript does not care.
+https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-
+*/
+
+export interface CustomProps {
+  inputName: string
+  errorMessage: string
+}
+
+defineProps<CustomProps>()
+</script>
+
+<template v-if="errorMessage">
+  <p :id="`errors-${inputName}`" class="error">
+    <VIconCustom name="error-fill" />
+    {{ errorMessage }}
+  </p>
+</template>
diff --git a/src/components/forms/SelectTopicGroup.vue b/src/components/forms/SelectTopicGroup.vue
index 8d974dfb1..0ab646c07 100644
--- a/src/components/forms/SelectTopicGroup.vue
+++ b/src/components/forms/SelectTopicGroup.vue
@@ -3,6 +3,7 @@ import type { DatasetProperties, DatasetsGroups } from '@/model/topic'
 
 import Multiselect from '@vueform/multiselect'
 import '@vueform/multiselect/themes/default.css'
+import ErrorMessage from './ErrorMessage.vue'
 
 const datasetProperties = defineModel('properties-model', {
   type: Object as () => DatasetProperties,
@@ -27,9 +28,9 @@ defineProps({
     type: Boolean,
     default: false
   },
-  isErrored: {
-    type: Boolean,
-    defautl: false
+  errorMessage: {
+    type: String,
+    default: ''
   }
 })
 
@@ -77,7 +78,7 @@ const trimGroupName = (groupName: string) => {
       'aria-labelledby': null,
       'aria-multiselectable': null,
       'aria-placeholder': null,
-      'aria-invalid': `${!!$slots.errorGroup}`
+      'aria-invalid': `${!!errorMessage}`
     }"
     @select="trimGroupName"
   >
@@ -101,7 +102,9 @@ const trimGroupName = (groupName: string) => {
       </button>
     </template>
   </Multiselect>
-  <p v-if="$slots.errorGroup" id="errors-group" class="error">
-    <VIconCustom name="error-fill" />&nbsp;<slot name="errorGroup" />
-  </p>
+  <ErrorMessage
+    v-if="errorMessage"
+    input-name="group"
+    :error-message="errorMessage"
+  />
 </template>
diff --git a/src/components/forms/dataset/DatasetEditModal.vue b/src/components/forms/dataset/DatasetEditModal.vue
index deeb66203..134cfc2f9 100644
--- a/src/components/forms/dataset/DatasetEditModal.vue
+++ b/src/components/forms/dataset/DatasetEditModal.vue
@@ -11,6 +11,7 @@ import {
 } from '@/model/topic'
 import { useDatasetStore } from '@/store/DatasetStore'
 
+import { useForm } from '@/utils/form'
 import type { DsfrButtonGroupProps } from '@gouvminint/vue-dsfr'
 import DatasetPropertiesFields from './DatasetPropertiesFields.vue'
 
@@ -38,6 +39,25 @@ const modalData: Ref<DatasetModalData> = ref({
   mode: 'edit'
 })
 
+const formErrors: Ref<string[]> = ref([])
+
+const { formErrorMessagesMap, sortedErrors } = useForm(formErrors)
+
+const validateFields = () => {
+  if (!modalData.value.dataset?.title.trim()) {
+    formErrors.value.push('title')
+  }
+  if (!modalData.value.dataset?.purpose.trim()) {
+    formErrors.value.push('purpose')
+  }
+  if (
+    modalData.value.dataset?.group &&
+    modalData.value.dataset?.group.trim().length > 100
+  ) {
+    formErrors.value.push('group')
+  }
+}
+
 const modalActions: Ref<DsfrButtonGroupProps['buttons']> = computed(() => {
   return [
     {
@@ -45,22 +65,55 @@ const modalActions: Ref<DsfrButtonGroupProps['buttons']> = computed(() => {
       type: 'button',
       secondary: true,
       onClick: () => {
-        closeModal()
+        onCancel()
       }
     },
     {
       label: 'Enregistrer',
       type: 'button',
-      disabled: !modalData.value.isValid,
       onClick: ($event: MouseEvent) => {
         $event.preventDefault()
-        submitModal(modalData.value)
-        closeModal()
+        onSubmit()
       }
     }
   ]
 })
 
+const errorSummary = useTemplateRef('errorSummary')
+const isSubmitted: Ref<boolean> = ref(false)
+
+const onCancel = () => {
+  // reset error fields
+  formErrors.value = []
+  isSubmitted.value = false
+  closeModal()
+}
+
+const onSubmit = async () => {
+  // reset error fields
+  formErrors.value = []
+  isSubmitted.value = true
+
+  // check input fields
+  validateFields()
+
+  // handle error summary
+  if (formErrors.value.length > 0) {
+    const errorSummaryTitle: HTMLHeadingElement | undefined | null =
+      errorSummary.value?.$el.querySelector('#error-summary-title')
+    if (errorSummaryTitle) {
+      await nextTick()
+      errorSummaryTitle.focus()
+    }
+  }
+  // submit if no error
+  else {
+    isSubmitted.value = false
+    submitModal(modalData.value)
+    closeModal()
+  }
+}
+
 const editDataset = (dataset: DatasetProperties, index: number) => {
   // clone the object to enable cancellation
   modalData.value = {
@@ -144,7 +197,7 @@ defineExpose({ addDataset, editDataset })
   <DsfrModal
     v-if="isModalOpen && modalData.dataset"
     size="lg"
-    class="bouquet-dataset-modal"
+    class="bouquet-dataset-modal form"
     :title="
       modalData.mode === 'edit'
         ? 'Éditer le jeu de données'
@@ -154,10 +207,18 @@ defineExpose({ addDataset, editDataset })
     aria-modal="true"
     @close="closeModal"
   >
+    <ErrorSummary
+      v-show="formErrors.length"
+      ref="errorSummary"
+      :form-error-messages-map
+      :form-errors="sortedErrors"
+      heading-level="h3"
+    />
     <form novalidate>
       <DatasetPropertiesFields
         v-model="modalData.dataset"
         v-model:groups-model="datasetsGroups"
+        v-model:errors-model="formErrors"
         :already-selected-datasets="datasets"
         @update-validation="(isValid: boolean) => (modalData.isValid = isValid)"
       />
diff --git a/src/components/forms/dataset/DatasetPropertiesFields.vue b/src/components/forms/dataset/DatasetPropertiesFields.vue
index fed42e354..65063bdbd 100644
--- a/src/components/forms/dataset/DatasetPropertiesFields.vue
+++ b/src/components/forms/dataset/DatasetPropertiesFields.vue
@@ -10,6 +10,7 @@ import {
 } from '@/model/topic'
 import { useDatasetStore } from '@/store/DatasetStore'
 import { useTopicsConf } from '@/utils/config'
+import { useForm } from '@/utils/form'
 
 import DatasetPropertiesTextFields from './DatasetPropertiesTextFields.vue'
 import SelectDataset from './SelectDataset.vue'
@@ -26,6 +27,11 @@ const datasetsGroups = defineModel('groups-model', {
   default: []
 })
 
+const formErrors = defineModel('errors-model', {
+  type: Array<string>,
+  default: []
+})
+
 defineProps({
   alreadySelectedDatasets: {
     type: Array<DatasetProperties>,
@@ -36,6 +42,7 @@ defineProps({
 const router = useRouter()
 const datasetStore = useDatasetStore()
 const { topicsDatasetEditorialization } = useTopicsConf()
+const { getErrorMessage } = useForm(formErrors)
 
 const selectedDataset: Ref<DatasetV2 | undefined> = ref(undefined)
 
@@ -126,6 +133,8 @@ onMounted(() => {
   <DatasetPropertiesTextFields
     v-if="topicsDatasetEditorialization"
     v-model:dataset-properties-model="datasetProperties"
+    :error-title="getErrorMessage('title')"
+    :error-purpose="getErrorMessage('purpose')"
   />
   <div class="fr-mt-1w fr-mb-4w">
     <SelectDataset
@@ -183,6 +192,7 @@ onMounted(() => {
       v-model:groups-model="datasetsGroups"
       label="Regroupement"
       description="Rechercher ou créer un regroupement (100 caractères maximum). Un regroupement contient un ou plusieurs jeux de données."
+      :error-message="getErrorMessage('group')"
     />
   </div>
 </template>
diff --git a/src/components/forms/dataset/DatasetPropertiesTextFields.vue b/src/components/forms/dataset/DatasetPropertiesTextFields.vue
index 4cb6514e8..5fbfa5ce0 100644
--- a/src/components/forms/dataset/DatasetPropertiesTextFields.vue
+++ b/src/components/forms/dataset/DatasetPropertiesTextFields.vue
@@ -7,6 +7,17 @@ const datasetProperties = defineModel('datasetProperties-model', {
   default: {}
 })
 
+defineProps({
+  errorTitle: {
+    type: String,
+    default: ''
+  },
+  errorPurpose: {
+    type: String,
+    default: ''
+  }
+})
+
 const { topicsName } = useTopicsConf()
 </script>
 
@@ -25,11 +36,13 @@ const { topicsName } = useTopicsConf()
       class="fr-input"
       type="text"
       aria-describedby="errors-title title-description"
-      :aria-invalid="!!$slots.errorTitle"
+      :aria-invalid="!!errorTitle"
+    />
+    <ErrorMessage
+      v-if="errorTitle"
+      input-name="title"
+      :error-message="errorTitle"
     />
-    <p v-if="$slots.errorTitle" id="errors-title" class="error">
-      <VIconCustom name="error-fill" />&nbsp;<slot name="errorTitle" />
-    </p>
   </div>
   <div class="fr-input-group">
     <label class="fr-label" for="input-purpose"
@@ -51,11 +64,13 @@ const { topicsName } = useTopicsConf()
       class="fr-input"
       type="text"
       aria-describedby="errors-purpose purpose-description"
-      :aria-invalid="!!$slots.errorPurpose"
+      :aria-invalid="!!errorPurpose"
+    />
+    <ErrorMessage
+      v-if="errorPurpose"
+      input-name="purpose"
+      :error-message="errorPurpose"
     />
-    <p v-if="$slots.errorPurpose" id="errors-purpose" class="error">
-      <VIconCustom name="error-fill" />&nbsp;<slot name="errorPurpose" />
-    </p>
   </div>
 </template>
 
diff --git a/src/utils/form.ts b/src/utils/form.ts
index 96d9525e1..ede260f30 100644
--- a/src/utils/form.ts
+++ b/src/utils/form.ts
@@ -1,21 +1,39 @@
 import type { ComputedRef, Ref } from 'vue'
+import { useTopicsConf } from './config'
 
-export type FormErrorMessage = { inputName: string; message: string }
+type FormErrorMessage = { inputName: string; message: string }
+
+const { topicsName } = useTopicsConf()
 
 export type FormErrorMessagesMap = Map<
   FormErrorMessage['inputName'],
   FormErrorMessage['message']
 >
 
-export function useForm(
-  formErrorMessages: FormErrorMessage[],
-  formErrors: Ref<string[]>
-): {
+// define error messages for all inputs here
+const errorMessages = [
+  {
+    inputName: 'bouquetId',
+    message: `Veuillez sélectionner un ${topicsName}.`
+  },
+  { inputName: 'group', message: `Le groupe est limité à 100 caractères.` },
+  { inputName: 'title', message: 'Veuillez renseigner un libellé.' },
+  {
+    inputName: 'purpose',
+    message: "La raison d'utilisation ne doit pas être vide."
+  }
+] as const
+
+// create a union type of available input errors
+export type AllowedInput = (typeof errorMessages)[number]['inputName']
+
+export function useForm(formErrors: Ref<string[]>): {
   formErrorMessagesMap: ComputedRef<FormErrorMessagesMap>
   sortedErrors: ComputedRef<string[]>
+  getErrorMessage: (inputName: AllowedInput) => string
 } {
   const formErrorMessagesMap = computed(() => {
-    return formErrorMessages.reduce(
+    return errorMessages.reduce(
       (acc, error) => acc.set(error.inputName, error.message),
       new Map()
     )
@@ -25,9 +43,15 @@ export function useForm(
       formErrors.value.includes(key)
     )
   })
+  const getErrorMessage = (inputName: AllowedInput): string => {
+    if (formErrors.value.includes(inputName))
+      return formErrorMessagesMap.value.get(inputName)
+    return ''
+  }
 
   return {
     formErrorMessagesMap,
-    sortedErrors
+    sortedErrors,
+    getErrorMessage
   }
 }

From 6b1d28f22b3d2844e0e07692efde22287bbf16a6 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Tue, 18 Feb 2025 11:08:34 +0100
Subject: [PATCH 08/12] fix(a11y forms): remove comments

---
 src/components/forms/ErrorMessage.vue | 32 ++++-----------------------
 1 file changed, 4 insertions(+), 28 deletions(-)

diff --git a/src/components/forms/ErrorMessage.vue b/src/components/forms/ErrorMessage.vue
index f28daa27b..7398ce3b7 100644
--- a/src/components/forms/ErrorMessage.vue
+++ b/src/components/forms/ErrorMessage.vue
@@ -1,32 +1,8 @@
-<script lang="ts">
-/**
- * Use a non-null assertion operator if the prop might be null or undefined.
- * Only use this with a `v-if`
- *
- * @example
- * ```vue
- * <ErrorMessage
-      v-if="!!getErrorMessage('bouquetId')"
-      input-name="bouquetId"
-      :error-message="getErrorMessage('bouquetId')!"
-    />
-  * ```
-  */
-export default {}
-</script>
 <script lang="ts" setup>
-/*
-To keep things simple, we can use TypeScript's non-null assertion operator (!) when calling this component and passing the 'errorMessage' prop.
-We need the prop to be required so it can't be undefined but sometimes the function to get the error message from the parent might return undefined. This is mitigated with the v-ifs (on the component or here on the template) but typescript does not care.
-https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-
-*/
-
-export interface CustomProps {
-  inputName: string
-  errorMessage: string
-}
-
-defineProps<CustomProps>()
+defineProps({
+  inputName: { type: String, required: true },
+  errorMessage: { type: String, required: true }
+})
 </script>
 
 <template v-if="errorMessage">

From 0d454ce63eff56b4754e59621ac5f28ceca93133 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Wed, 19 Feb 2025 15:52:45 +0100
Subject: [PATCH 09/12] fix(a11y forms): refactor onSubmit

---
 .../datasets/DatasetAddToBouquetModal.vue     | 43 ++++++----------
 .../forms/dataset/DatasetEditModal.vue        | 40 ++++-----------
 src/utils/form.ts                             | 50 ++++++++++++++++++-
 3 files changed, 72 insertions(+), 61 deletions(-)

diff --git a/src/components/datasets/DatasetAddToBouquetModal.vue b/src/components/datasets/DatasetAddToBouquetModal.vue
index 60b508077..56bea7479 100644
--- a/src/components/datasets/DatasetAddToBouquetModal.vue
+++ b/src/components/datasets/DatasetAddToBouquetModal.vue
@@ -55,9 +55,6 @@ const bouquetOptions = computed(() => {
 
 const formErrors: Ref<string[]> = ref([])
 
-const { formErrorMessagesMap, sortedErrors, getErrorMessage } =
-  useForm(formErrors)
-
 const validateFields = () => {
   if (!datasetProperties.value.title.trim()) {
     formErrors.value.push('title')
@@ -93,37 +90,12 @@ const modalActions: Ref<DsfrButtonGroupProps['buttons']> = computed(() => {
     },
     {
       label: 'Enregistrer',
-      onClick: () => onSubmit()
+      onClick: () => handleSubmit()
     }
   ]
 })
 
 const errorSummary = useTemplateRef('errorSummary')
-const isSubmitted: Ref<boolean> = ref(false)
-
-const onSubmit = async () => {
-  // reset error fields
-  formErrors.value = []
-  isSubmitted.value = true
-
-  // check input fields
-  validateFields()
-
-  // handle error summary
-  if (formErrors.value.length > 0) {
-    const errorSummaryTitle: HTMLHeadingElement | undefined | null =
-      errorSummary.value?.$el.querySelector('#error-summary-title')
-    if (errorSummaryTitle) {
-      await nextTick()
-      errorSummaryTitle.focus()
-    }
-  }
-  // submit if no error
-  else if (isValid.value) {
-    isSubmitted.value = false
-    submit()
-  }
-}
 
 const selectedBouquet = computed(() => {
   if (selectedBouquetId.value === null) {
@@ -171,6 +143,19 @@ const submit = async () => {
   closeModal()
 }
 
+const {
+  formErrorMessagesMap,
+  sortedErrors,
+  getErrorMessage,
+  isSubmitted,
+  handleSubmit
+} = useForm(formErrors, {
+  validateFields,
+  onSuccess: submit,
+  errorSummaryRef: errorSummary,
+  isValid
+})
+
 const closeModal = () => {
   emit('update:show', false)
 }
diff --git a/src/components/forms/dataset/DatasetEditModal.vue b/src/components/forms/dataset/DatasetEditModal.vue
index 134cfc2f9..a95f7125b 100644
--- a/src/components/forms/dataset/DatasetEditModal.vue
+++ b/src/components/forms/dataset/DatasetEditModal.vue
@@ -41,8 +41,6 @@ const modalData: Ref<DatasetModalData> = ref({
 
 const formErrors: Ref<string[]> = ref([])
 
-const { formErrorMessagesMap, sortedErrors } = useForm(formErrors)
-
 const validateFields = () => {
   if (!modalData.value.dataset?.title.trim()) {
     formErrors.value.push('title')
@@ -73,14 +71,13 @@ const modalActions: Ref<DsfrButtonGroupProps['buttons']> = computed(() => {
       type: 'button',
       onClick: ($event: MouseEvent) => {
         $event.preventDefault()
-        onSubmit()
+        handleSubmit()
       }
     }
   ]
 })
 
 const errorSummary = useTemplateRef('errorSummary')
-const isSubmitted: Ref<boolean> = ref(false)
 
 const onCancel = () => {
   // reset error fields
@@ -89,31 +86,6 @@ const onCancel = () => {
   closeModal()
 }
 
-const onSubmit = async () => {
-  // reset error fields
-  formErrors.value = []
-  isSubmitted.value = true
-
-  // check input fields
-  validateFields()
-
-  // handle error summary
-  if (formErrors.value.length > 0) {
-    const errorSummaryTitle: HTMLHeadingElement | undefined | null =
-      errorSummary.value?.$el.querySelector('#error-summary-title')
-    if (errorSummaryTitle) {
-      await nextTick()
-      errorSummaryTitle.focus()
-    }
-  }
-  // submit if no error
-  else {
-    isSubmitted.value = false
-    submitModal(modalData.value)
-    closeModal()
-  }
-}
-
 const editDataset = (dataset: DatasetProperties, index: number) => {
   // clone the object to enable cancellation
   modalData.value = {
@@ -141,7 +113,7 @@ const addDataset = () => {
   isModalOpen.value = true
 }
 
-const submitModal = async (modalData: DatasetModalData) => {
+const submit = async (modalData: DatasetModalData) => {
   if (modalData.dataset !== undefined) {
     // check if data.gouv.fr URL and update metadata if needed
     if (
@@ -184,8 +156,16 @@ const submitModal = async (modalData: DatasetModalData) => {
     }
   }
   emits('submitModal')
+  closeModal()
 }
 
+const { formErrorMessagesMap, sortedErrors, isSubmitted, handleSubmit } =
+  useForm(formErrors, {
+    validateFields,
+    onSuccess: () => submit(modalData.value),
+    errorSummaryRef: errorSummary
+  })
+
 const closeModal = () => {
   isModalOpen.value = false
 }
diff --git a/src/utils/form.ts b/src/utils/form.ts
index ede260f30..ea2bf641c 100644
--- a/src/utils/form.ts
+++ b/src/utils/form.ts
@@ -27,31 +27,77 @@ const errorMessages = [
 // create a union type of available input errors
 export type AllowedInput = (typeof errorMessages)[number]['inputName']
 
-export function useForm(formErrors: Ref<string[]>): {
+interface UseFormOptions {
+  validateFields: () => void
+  onSuccess: () => void | Promise<void>
+  errorSummaryRef?: Ref<{ $el: HTMLElement } | null>
+  isValid?: Ref<boolean>
+}
+
+export function useForm(
+  formErrors: Ref<string[]>,
+  options?: UseFormOptions
+): {
   formErrorMessagesMap: ComputedRef<FormErrorMessagesMap>
   sortedErrors: ComputedRef<string[]>
   getErrorMessage: (inputName: AllowedInput) => string
+  isSubmitted: Ref<boolean>
+  handleSubmit: () => void
 } {
+  const isSubmitted = ref(false)
+
   const formErrorMessagesMap = computed(() => {
     return errorMessages.reduce(
       (acc, error) => acc.set(error.inputName, error.message),
       new Map()
     )
   })
+
   const sortedErrors = computed(() => {
     return Array.from(formErrorMessagesMap.value.keys()).filter((key) =>
       formErrors.value.includes(key)
     )
   })
+
   const getErrorMessage = (inputName: AllowedInput): string => {
     if (formErrors.value.includes(inputName))
       return formErrorMessagesMap.value.get(inputName)
     return ''
   }
 
+  const handleSubmit = async () => {
+    // reset error fields
+    formErrors.value = []
+    isSubmitted.value = true
+
+    // check input fields
+    options?.validateFields()
+
+    // handle error summary
+    if (formErrors.value.length > 0 && options?.errorSummaryRef?.value) {
+      const errorSummaryTitle = options.errorSummaryRef.value.$el.querySelector(
+        '#error-summary-title'
+      ) as HTMLHeadingElement | null
+
+      if (errorSummaryTitle) {
+        await nextTick()
+        errorSummaryTitle.focus()
+      }
+      return
+    }
+    if (options?.isValid !== undefined && !options.isValid.value) {
+      return
+    }
+    // submit if no error
+    isSubmitted.value = false
+    await options?.onSuccess()
+  }
+
   return {
     formErrorMessagesMap,
     sortedErrors,
-    getErrorMessage
+    getErrorMessage,
+    isSubmitted,
+    handleSubmit
   }
 }

From 8ee711d3ba60e2fb77b82dc94d0f73aff97e143e Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Thu, 20 Feb 2025 14:01:14 +0100
Subject: [PATCH 10/12] fix(a11y forms): merge main + update vite config

---
 vite.config.mts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite.config.mts b/vite.config.mts
index 7bb06598f..3e2f6da8a 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -34,6 +34,7 @@ export default defineConfig(({ mode }) => {
   return {
     base: '/',
     plugins: [
+      vueDevTools(),
       vue({
         template: {
           compilerOptions: {
@@ -41,7 +42,6 @@ export default defineConfig(({ mode }) => {
           }
         }
       }),
-      vueDevTools(),
       AutoImport({
         include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
         imports: [

From e5044649c01ec51ee9101b0059e8ecafa86c9c05 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Thu, 20 Feb 2025 15:51:26 +0100
Subject: [PATCH 11/12] fix(a11y forms): validation add validation rules for
 dataset availability use aria-errormessage where relevant harmonize error
 messages editorial tone

---
 .../datasets/DatasetAddToBouquetModal.vue     |  2 +-
 src/components/forms/ErrorSummary.vue         |  2 --
 src/components/forms/SelectTopicGroup.vue     |  3 +-
 src/components/forms/bouquet/BouquetForm.vue  | 11 ++----
 .../forms/dataset/DatasetEditModal.vue        | 18 ++++++++--
 .../forms/dataset/DatasetPropertiesFields.vue | 36 +++++++++++++++----
 .../dataset/DatasetPropertiesTextFields.vue   |  8 +++--
 src/utils/form.ts                             | 15 ++++++--
 8 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/src/components/datasets/DatasetAddToBouquetModal.vue b/src/components/datasets/DatasetAddToBouquetModal.vue
index 56bea7479..dd175db3e 100644
--- a/src/components/datasets/DatasetAddToBouquetModal.vue
+++ b/src/components/datasets/DatasetAddToBouquetModal.vue
@@ -192,7 +192,7 @@ onMounted(() => {
       :aria-invalid="
         formErrors.includes('bouquetId') && isSubmitted ? true : undefined
       "
-      aria-describedby="errors-bouquetId"
+      aria-errormessage="errors-bouquetId"
     />
     <ErrorMessage
       v-if="!!getErrorMessage('bouquetId')"
diff --git a/src/components/forms/ErrorSummary.vue b/src/components/forms/ErrorSummary.vue
index 57f94cfec..5704615f6 100644
--- a/src/components/forms/ErrorSummary.vue
+++ b/src/components/forms/ErrorSummary.vue
@@ -37,5 +37,3 @@ defineProps({
     </ol>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/src/components/forms/SelectTopicGroup.vue b/src/components/forms/SelectTopicGroup.vue
index 0ab646c07..dc1337523 100644
--- a/src/components/forms/SelectTopicGroup.vue
+++ b/src/components/forms/SelectTopicGroup.vue
@@ -73,7 +73,8 @@ const trimGroupName = (groupName: string) => {
     :create-option="true"
     placeholder=""
     :aria="{
-      'aria-describedby': 'errors-group regroupement-description',
+      'aria-describedby': 'regroupement-description',
+      'aria-errormessage': 'errors-group',
       // useless or unsupported https://github.com/vueform/multiselect/issues/436
       'aria-labelledby': null,
       'aria-multiselectable': null,
diff --git a/src/components/forms/bouquet/BouquetForm.vue b/src/components/forms/bouquet/BouquetForm.vue
index 797d8317c..7cb4587a2 100644
--- a/src/components/forms/bouquet/BouquetForm.vue
+++ b/src/components/forms/bouquet/BouquetForm.vue
@@ -179,9 +179,7 @@ onMounted(() => {
       v-bind="themeAttrs"
       class="fr-select"
       :aria-invalid="errors.theme && isSubmitted ? true : undefined"
-      :aria-describedby="
-        errors.theme && isSubmitted ? 'errors-theme' : undefined
-      "
+      aria-errormessage="errors-theme"
       @change="subtheme = ''"
     >
       <option value="" selected disabled hidden>
@@ -214,11 +212,8 @@ onMounted(() => {
       :disabled="!values.theme ? true : undefined"
       class="fr-select"
       :aria-invalid="errors.subtheme && isSubmitted ? true : undefined"
-      :aria-describedby="
-        errors.subtheme && isSubmitted
-          ? 'errors-subtheme subtheme-instructions'
-          : 'subtheme-instructions'
-      "
+      aria-describedby="subtheme-instructions"
+      aria-errormessage="errors-subtheme"
     >
       <option value="" selected disabled hidden>
         Choisir un {{ topicsSecondaryTheme }}
diff --git a/src/components/forms/dataset/DatasetEditModal.vue b/src/components/forms/dataset/DatasetEditModal.vue
index a95f7125b..636f20076 100644
--- a/src/components/forms/dataset/DatasetEditModal.vue
+++ b/src/components/forms/dataset/DatasetEditModal.vue
@@ -11,7 +11,7 @@ import {
 } from '@/model/topic'
 import { useDatasetStore } from '@/store/DatasetStore'
 
-import { useForm } from '@/utils/form'
+import { useForm, type AllowedInput } from '@/utils/form'
 import type { DsfrButtonGroupProps } from '@gouvminint/vue-dsfr'
 import DatasetPropertiesFields from './DatasetPropertiesFields.vue'
 
@@ -39,7 +39,7 @@ const modalData: Ref<DatasetModalData> = ref({
   mode: 'edit'
 })
 
-const formErrors: Ref<string[]> = ref([])
+const formErrors: Ref<AllowedInput[]> = ref([])
 
 const validateFields = () => {
   if (!modalData.value.dataset?.title.trim()) {
@@ -54,6 +54,18 @@ const validateFields = () => {
   ) {
     formErrors.value.push('group')
   }
+  if (
+    !modalData.value.dataset?.uri &&
+    modalData.value.dataset?.availability === Availability.LOCAL_AVAILABLE
+  ) {
+    formErrors.value.push('availability')
+  }
+  if (
+    !modalData.value.dataset?.uri &&
+    modalData.value.dataset?.availability === Availability.URL_AVAILABLE
+  ) {
+    formErrors.value.push('availabilityUrl')
+  }
 }
 
 const modalActions: Ref<DsfrButtonGroupProps['buttons']> = computed(() => {
@@ -185,7 +197,7 @@ defineExpose({ addDataset, editDataset })
     "
     :opened="isModalOpen"
     aria-modal="true"
-    @close="closeModal"
+    @close="onCancel"
   >
     <ErrorSummary
       v-show="formErrors.length"
diff --git a/src/components/forms/dataset/DatasetPropertiesFields.vue b/src/components/forms/dataset/DatasetPropertiesFields.vue
index 65063bdbd..67e449464 100644
--- a/src/components/forms/dataset/DatasetPropertiesFields.vue
+++ b/src/components/forms/dataset/DatasetPropertiesFields.vue
@@ -147,11 +147,15 @@ onMounted(() => {
     v-if="!selectedDataset && topicsDatasetEditorialization"
     class="fr-mt-4w"
   >
-    <fieldset id="alt-source" class="fr-fieldset">
-      <legend
-        class="fr-fieldset__legend fr-fieldset__legend--regular"
-        for="alt-source"
-      >
+    <fieldset
+      id="input-availability"
+      tabindex="-1"
+      class="fr-fieldset"
+      role="radiogroup"
+      aria-errormessage="errors-availability"
+      :aria-invalid="formErrors.includes('availability') ? true : undefined"
+    >
+      <legend class="fr-fieldset__legend fr-fieldset__legend--regular">
         Vous ne trouvez pas le jeu de données dans data.gouv.fr&nbsp;?
       </legend>
       <DsfrRadioButton
@@ -165,11 +169,20 @@ onMounted(() => {
         class="fr-mb-4w fr-fieldset__element"
       >
         <DsfrInput
-          id="alt-link"
+          id="input-availabilityUrl"
           v-model="datasetProperties.uri"
           label="Url vers le jeu de données souhaité (obligatoire)"
           :label-visible="true"
           class="fr-mb-md-1w fr-input"
+          aria-errormessage="errors-availabilityUrl"
+          :aria-invalid="
+            formErrors.includes('availabilityUrl') ? true : undefined
+          "
+        />
+        <ErrorMessage
+          v-if="!!getErrorMessage('availabilityUrl')"
+          input-name="availabilityUrl"
+          :error-message="getErrorMessage('availabilityUrl')"
         />
       </div>
       <DsfrRadioButton
@@ -184,6 +197,11 @@ onMounted(() => {
         :value="Availability.NOT_AVAILABLE"
         label="Je n'ai pas cherché la donnée"
       />
+      <ErrorMessage
+        v-if="!!getErrorMessage('availability')"
+        :error-message="getErrorMessage('availability')"
+        input-name="availability"
+      />
     </fieldset>
   </div>
   <div class="fr-input-group">
@@ -201,6 +219,12 @@ onMounted(() => {
 .fr-fieldset {
   margin: 30px 0;
 }
+.fr-fieldset:focus {
+  outline-style: solid;
+}
+fieldset legend {
+  inline-size: fit-content;
+}
 textarea {
   height: 150px;
 }
diff --git a/src/components/forms/dataset/DatasetPropertiesTextFields.vue b/src/components/forms/dataset/DatasetPropertiesTextFields.vue
index 5fbfa5ce0..25d74de7b 100644
--- a/src/components/forms/dataset/DatasetPropertiesTextFields.vue
+++ b/src/components/forms/dataset/DatasetPropertiesTextFields.vue
@@ -28,14 +28,15 @@ const { topicsName } = useTopicsConf()
     >
     <p id="title-description" class="fr-mt-1v fr-mb-2v fr-text--sm">
       Décrivez l'indicateur ou l'objet géographique correspondant. Par
-      exemple&nbsp;: "&nbsp;Taux d'imperméabilisation des sols&nbsp;"
+      exemple&nbsp;: «&nbsp;Taux d'imperméabilisation des sols&nbsp;»
     </p>
     <input
       id="input-title"
       v-model="datasetProperties.title"
       class="fr-input"
       type="text"
-      aria-describedby="errors-title title-description"
+      aria-describedby="title-description"
+      aria-errormessage="errors-title"
       :aria-invalid="!!errorTitle"
     />
     <ErrorMessage
@@ -63,7 +64,8 @@ const { topicsName } = useTopicsConf()
       v-model="datasetProperties.purpose"
       class="fr-input"
       type="text"
-      aria-describedby="errors-purpose purpose-description"
+      aria-describedby="purpose-description"
+      aria-errormessage="errors-purpose"
       :aria-invalid="!!errorPurpose"
     />
     <ErrorMessage
diff --git a/src/utils/form.ts b/src/utils/form.ts
index ea2bf641c..c46234a6a 100644
--- a/src/utils/form.ts
+++ b/src/utils/form.ts
@@ -16,11 +16,22 @@ const errorMessages = [
     inputName: 'bouquetId',
     message: `Veuillez sélectionner un ${topicsName}.`
   },
-  { inputName: 'group', message: `Le groupe est limité à 100 caractères.` },
-  { inputName: 'title', message: 'Veuillez renseigner un libellé.' },
+  {
+    inputName: 'group',
+    message: 'Le nom du regroupement est limité à 100 caractères.'
+  },
+  { inputName: 'title', message: 'Le libellé doit être renseigné.' },
   {
     inputName: 'purpose',
     message: "La raison d'utilisation ne doit pas être vide."
+  },
+  {
+    inputName: 'availability',
+    message: 'La disponibilité doit être renseignée.'
+  },
+  {
+    inputName: 'availabilityUrl',
+    message: 'Une URL doit être renseignée.'
   }
 ] as const
 

From 6e4a90abd63d5710ce06e8421a8579ae1d67a225 Mon Sep 17 00:00:00 2001
From: nico <contact@nardu.in>
Date: Thu, 20 Feb 2025 17:20:28 +0100
Subject: [PATCH 12/12] fix(a11y forms): dataset availability

---
 .../forms/dataset/DatasetPropertiesFields.vue | 133 +++++++++---------
 .../forms/dataset/SelectDataset.vue           |  10 ++
 src/utils/form.ts                             |   2 +-
 3 files changed, 80 insertions(+), 65 deletions(-)

diff --git a/src/components/forms/dataset/DatasetPropertiesFields.vue b/src/components/forms/dataset/DatasetPropertiesFields.vue
index 67e449464..821e5e361 100644
--- a/src/components/forms/dataset/DatasetPropertiesFields.vue
+++ b/src/components/forms/dataset/DatasetPropertiesFields.vue
@@ -136,73 +136,74 @@ onMounted(() => {
     :error-title="getErrorMessage('title')"
     :error-purpose="getErrorMessage('purpose')"
   />
-  <div class="fr-mt-1w fr-mb-4w">
-    <SelectDataset
-      v-model="selectedDataset"
-      :already-selected-datasets="alreadySelectedDatasets"
-      @update:model-value="onSelectDataset"
-    />
-  </div>
-  <div
-    v-if="!selectedDataset && topicsDatasetEditorialization"
-    class="fr-mt-4w"
-  >
-    <fieldset
-      id="input-availability"
-      tabindex="-1"
-      class="fr-fieldset"
-      role="radiogroup"
-      aria-errormessage="errors-availability"
-      :aria-invalid="formErrors.includes('availability') ? true : undefined"
-    >
-      <legend class="fr-fieldset__legend fr-fieldset__legend--regular">
-        Vous ne trouvez pas le jeu de données dans data.gouv.fr&nbsp;?
-      </legend>
-      <DsfrRadioButton
-        v-model="datasetProperties.availability"
-        name="source"
-        :value="Availability.URL_AVAILABLE"
-        label="J'ajoute l'URL"
+  <div id="input-availability" tabindex="-1">
+    <div class="fr-mt-1w fr-mb-4w">
+      <SelectDataset
+        v-model="selectedDataset"
+        :already-selected-datasets="alreadySelectedDatasets"
+        :is-invalid="formErrors.includes('availability')"
+        @update:model-value="onSelectDataset"
       />
-      <div
-        v-if="datasetProperties.availability === Availability.URL_AVAILABLE"
-        class="fr-mb-4w fr-fieldset__element"
+    </div>
+    <div
+      v-if="!selectedDataset && topicsDatasetEditorialization"
+      class="fr-mt-4w"
+    >
+      <fieldset
+        class="fr-fieldset availability"
+        role="radiogroup"
+        aria-errormessage="errors-availability"
+        :aria-invalid="formErrors.includes('availability') ? true : undefined"
       >
-        <DsfrInput
-          id="input-availabilityUrl"
-          v-model="datasetProperties.uri"
-          label="Url vers le jeu de données souhaité (obligatoire)"
-          :label-visible="true"
-          class="fr-mb-md-1w fr-input"
-          aria-errormessage="errors-availabilityUrl"
-          :aria-invalid="
-            formErrors.includes('availabilityUrl') ? true : undefined
-          "
+        <legend class="fr-fieldset__legend fr-fieldset__legend--regular">
+          Vous ne trouvez pas le jeu de données dans data.gouv.fr&nbsp;?
+        </legend>
+        <DsfrRadioButton
+          v-model="datasetProperties.availability"
+          name="source"
+          :value="Availability.URL_AVAILABLE"
+          label="J'ajoute l'URL"
         />
-        <ErrorMessage
-          v-if="!!getErrorMessage('availabilityUrl')"
-          input-name="availabilityUrl"
-          :error-message="getErrorMessage('availabilityUrl')"
+        <div
+          v-if="datasetProperties.availability === Availability.URL_AVAILABLE"
+          class="fr-mb-4w fr-fieldset__element"
+        >
+          <DsfrInput
+            id="input-availabilityUrl"
+            v-model="datasetProperties.uri"
+            label="Url vers le jeu de données souhaité (obligatoire)"
+            :label-visible="true"
+            class="fr-mb-md-1w fr-input"
+            aria-errormessage="errors-availabilityUrl"
+            :aria-invalid="
+              formErrors.includes('availabilityUrl') ? true : undefined
+            "
+          />
+          <ErrorMessage
+            v-if="!!getErrorMessage('availabilityUrl')"
+            input-name="availabilityUrl"
+            :error-message="getErrorMessage('availabilityUrl')"
+          />
+        </div>
+        <DsfrRadioButton
+          v-model="datasetProperties.availability"
+          name="source"
+          :value="Availability.MISSING"
+          label="Je n'ai pas trouvé la donnée"
         />
-      </div>
-      <DsfrRadioButton
-        v-model="datasetProperties.availability"
-        name="source"
-        :value="Availability.MISSING"
-        label="Je n'ai pas trouvé la donnée"
-      />
-      <DsfrRadioButton
-        v-model="datasetProperties.availability"
-        name="source"
-        :value="Availability.NOT_AVAILABLE"
-        label="Je n'ai pas cherché la donnée"
-      />
-      <ErrorMessage
-        v-if="!!getErrorMessage('availability')"
-        :error-message="getErrorMessage('availability')"
-        input-name="availability"
-      />
-    </fieldset>
+        <DsfrRadioButton
+          v-model="datasetProperties.availability"
+          name="source"
+          :value="Availability.NOT_AVAILABLE"
+          label="Je n'ai pas cherché la donnée"
+        />
+      </fieldset>
+    </div>
+    <ErrorMessage
+      v-if="!!getErrorMessage('availability')"
+      :error-message="getErrorMessage('availability')"
+      input-name="availability"
+    />
   </div>
   <div class="fr-input-group">
     <SelectTopicGroup
@@ -219,7 +220,11 @@ onMounted(() => {
 .fr-fieldset {
   margin: 30px 0;
 }
-.fr-fieldset:focus {
+.fr-fieldset.availability[aria-invalid='true'] {
+  border: none;
+  outline: 2px solid var(--border-plain-error);
+}
+#input-availability:focus {
   outline-style: solid;
 }
 fieldset legend {
diff --git a/src/components/forms/dataset/SelectDataset.vue b/src/components/forms/dataset/SelectDataset.vue
index 34ec5d8fe..1fd7ec923 100644
--- a/src/components/forms/dataset/SelectDataset.vue
+++ b/src/components/forms/dataset/SelectDataset.vue
@@ -20,6 +20,14 @@ const props = defineProps({
   alreadySelectedDatasets: {
     type: Array<DatasetProperties>,
     default: []
+  },
+  isInvalid: {
+    type: Boolean,
+    default: false
+  },
+  errorMessageId: {
+    type: String,
+    default: 'errors-availability'
   }
 })
 
@@ -85,6 +93,8 @@ const clear = () => {
     no-options-text="Aucun jeu de données trouvé, précisez ou élargissez votre recherche."
     :aria="{
       'aria-describedby': 'dataset-description',
+      'aria-errormessage': `${errorMessageId}`,
+      'aria-invalid': `${isInvalid ? true : undefined}`,
       // useless or unsupported https://github.com/vueform/multiselect/issues/436
       'aria-labelledby': null,
       'aria-multiselectable': null,
diff --git a/src/utils/form.ts b/src/utils/form.ts
index c46234a6a..ba127a8a5 100644
--- a/src/utils/form.ts
+++ b/src/utils/form.ts
@@ -27,7 +27,7 @@ const errorMessages = [
   },
   {
     inputName: 'availability',
-    message: 'La disponibilité doit être renseignée.'
+    message: 'Un jeu de données ou une disponibilité doit être sélectionné.'
   },
   {
     inputName: 'availabilityUrl',