@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/FileList/FileList.stories.ts

@@ -42,8 +42,12 @@ const meta = {
 					detail: `{
 	optionalDocument: 'Document facultatif',
 	see: 'Voir',
+	import: 'Importer',
 	delete: 'Supprimer',
 	uploading: 'En cours',
+	importLabel: (title: string) => string,
+	seeLabel: (title: string) => string,
+	deleteLabel: (title: string) => string,
 	success: 'Téléchargé',
 	error: 'Erreur',
 	errorOccurred: 'Une erreur est survenue pendant le téléchargement.',
@@ -157,6 +161,44 @@ const meta = {
 				},
 			},
 		},
+		'seeLabel': {
+			description: 'Label du bouton de prévisualisation',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'Voir le fichier',
+				},
+			},
+		},
+		'deleteLabel': {
+			description: 'Label du bouton de suppression',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: { summary: 'string',
+				},
+				defaultValue: {
+					summary: 'Supprimer le fichier',
+				},
+			},
+		},
+		'importLabel': {
+			description: 'Label du bouton d\'upload',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'Importer le fichier',
+				},
+			},
+		},
 	},
 	parameters: {
 		controls: {
@@ -193,6 +235,9 @@ export const Default: Story = {
 		onPreview: fn(),
 	},
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -263,7 +308,7 @@ export const States: Story = {
 	},
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -335,6 +380,9 @@ export const OptionalDocument: Story = {
 		onPreview: fn(),
 	},
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -411,6 +459,9 @@ export const Actions: Story = {
 		onPreview: fn(),
 	},
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -508,6 +559,9 @@ export const Customization: Story = {
 		`,
 	}),
 	parameters: {
+		a11y: {
+			disable: false,
+		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -32,6 +32,9 @@
 		showPreviewBtn?: boolean
 		tag?: string
 		locales?: typeof defaultLocales
+		seeLabel?: string
+		deleteLabel?: string
+		importLabel?: string
 	}>(), {
 		fileName: undefined,
 		message: undefined,
@@ -43,6 +46,9 @@
 		showPreviewBtn: false,
 		tag: 'div',
 		locales: () => defaultLocales,
+		seeLabel: defaultLocales.see,
+		deleteLabel: defaultLocales.delete,
+		importLabel: defaultLocales.import,
 	})
 
 	defineSlots<{
@@ -118,10 +124,12 @@
 						{{ message ?? locales.optionalDocument }}
 					</div>
 					<div
-						v-if="state === 'error'"
 						class="file-item__error-message text-error"
+						role="status"
 					>
-						{{ locales.error }}
+						<div v-if="state === 'error'">
+							{{ locales.error }}
+						</div>
 					</div>
 				</div>
 			</div>
@@ -130,9 +138,10 @@
 					v-if="(state === 'initial' || state == 'error') && showUploadBtn"
 					class="file-item__action file-item__action-upload text-primary"
 					variant="text"
+					:aria-label="`${locales.import} ${title}`"
 					@click="$emit('upload', itemId)"
 				>
-					<span>Importer</span>
+					<span>{{ importLabel }}</span>
 					<template #prepend>
 						<SyIcon
 							color="primary"
@@ -145,9 +154,10 @@
 					v-if="state === 'success' && showPreviewBtn"
 					class="file-item__action file-item__action-preview text-primary"
 					variant="text"
+					:aria-label="`${locales.see} ${fileName}`"
 					@click="$emit('preview', itemId)"
 				>
-					<span>{{ locales.see }}</span>
+					<span>{{ seeLabel }}</span>
 					<template #prepend>
 						<SyIcon
 							color="primary"
@@ -160,9 +170,10 @@
 					v-if="state === 'success' && showDeleteBtn"
 					class="file-item__action file-item__action-delete text-error"
 					variant="text"
+					:aria-label="`${locales.delete} ${fileName}`"
 					@click="$emit('delete', itemId)"
 				>
-					<span>{{ locales.delete }}</span>
+					<span>{{ deleteLabel }}</span>
 					<template #prepend>
 						<SyIcon
 							color="error"
@@ -188,6 +199,7 @@
 				height="7"
 				color="primary"
 				rounded="true"
+				:aria-label="title ? `Chargement de ${title}` : 'Chargement en cours'"
 			/>
 		</div>
 	</component>

package/src/components/FileList/UploadItem/locales.ts

@@ -1,7 +1,8 @@
 export const locales = {
 	optionalDocument: 'Document facultatif',
-	see: 'Voir',
-	delete: 'Supprimer',
+	see: 'Voir le fichier',
+	delete: 'Supprimer le fichier',
+	import: 'Importer le fichier',
 	uploading: 'En cours',
 	success: 'Téléchargé',
 	error: 'Erreur',

package/src/components/FileList/accessibilite/Accessibility.mdx

@@ -1,12 +1,63 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/addon-docs';
 import * as Stories from '../FileList.stories.ts';
-import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+  componentName="FileList"
+  iconSrc={AccessibilityIcon}
+>
+  <CriteriaSection>
+    <CriteriaCard icon="🔍" title="Structure sémantique">
+      <ul>
+        <li><strong>Formattage sous forme de liste  </strong> : Utilisation de balises HTML sémantiques pour structurer les éléments de la liste de fichiers.</li>
+        <li><strong>Boutons</strong> : Utilisation de <code>&lt;button&gt;</code> pour les actions associées à chaque fichier, avec des étiquettes claires qui reprennent l'action et le nom du fichier.</li>
+        <li><strong>Aria-label</strong>: On utilise les méthodes <code>importAriaLabel()</code> pour générer les etiquettes ARIA des champs avec le titre et  <code>seeAriaLabel()</code> et <code>deleteAriaLabel()</code> pour les étiquettes ARIA avec le nom du fichier.</li>
+        <li><strong>SeeLabel, ImportLabel, DeleteLabel </strong> : Utilisation de ces propriétés pour fournir des étiquettes claires et descriptives pour les actions associées à chaque fichier.</li>
 
-<br />
+      </ul>
+    </CriteriaCard>
+
+
+    <CriteriaCard icon="⌨️" title="Navigation clavier complète">
+      <ul>
+        <li><strong>Navigation entre les éléments</strong> : Utilisation des touches Tab et Shift+Tab pour naviguer entre les fichiers et les actions associées.</li>
+        <li><strong>Activation des actions</strong> : Utilisation de la touche Entrée ou Espace pour activer les boutons d'action (télécharger, supprimer, etc.).</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📱" title="États et retours d'information">
+      <ul>
+        <li><strong>Indication de l'état de téléchargement</strong> : Utilisation d'icônes ou de messages pour indiquer si un fichier est en cours de téléchargement, téléchargé avec succès ou en échec.</li>
+        <li><strong>Indication de l'état d'erreur</strong> : Affichage d'un message d'erreur dans un élément avec le rôle <code>status</code> pour informer les utilisateurs de l'erreur.</li> 
+      </ul>
+    </CriteriaCard>
+
+    <DemoSection componentName="FileList">
+      <Primary />
+    </DemoSection>
+
+    <BestPracticesSection>
+      <ul>
+        <li><strong>Labels clairs et descriptifs</strong> : Assurez-vous que les titres des fichiers requis sont assez descriptifs pour que les utilisateurs comprennent facilement ce qui est attendu d'eux.</li>
+        <li><strong>Progression</strong> : Fournissez une indication de la progression du téléchargement pour les fichiers volumineux.</li>
+      </ul>
+    </BestPracticesSection>
+  </CriteriaSection>
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/button">Documentation MDN sur les boutons</a></li>
+      <li><a href="https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Reference/Roles/status_role">Documentation MDN sur le rôle ARIA "status"</a></li>
+      <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role">MDN documentation on ARIA "status" role</a></li>
+    </ul>
+  </ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/FileUpload/FileUpload.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import { useWidthable, type Widthable } from '@/composables/widthable'
-	import { ref, useId, watch } from 'vue'
+	import { ref, useAttrs, useId, watch } from 'vue'
 	import { useTheme } from 'vuetify'
 	import FileUploadContent, { type FileUploadContentSlots } from './FileUploadContent.vue'
 	import { locales as defaultLocales } from './locales'
@@ -33,6 +33,8 @@
 		default(): void
 	} & FileUploadContentSlots>()
 
+	const attrs = useAttrs()
+
 	const dragover = ref(false)
 	const id = 'file-upload-' + useId()
 	const dropZone = ref<HTMLElement | null>(null)
@@ -41,6 +43,9 @@
 	const isDarkMode = useTheme().current.value.dark
 
 	function openFileDialog() {
+		if (props.disabled) {
+			return
+		}
 		fileInput.value?.click()
 	}
 
@@ -69,7 +74,7 @@
 			files = files.slice(0, 1)
 		}
 		const { errors, validFiles } = validateFiles(
-			files, props.fileSizeMax, props.allowedExtensions, props.fileSizeUnits,
+			files, props.fileSizeMax, props.allowedExtensions, props.fileSizeUnits, props.locales,
 		)
 
 		if (errors.length) {
@@ -98,61 +103,80 @@
 		;(e.target as HTMLInputElement).value = ''
 	}
 </script>
-<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+
 <template>
-	<label
-		ref="dropZone"
-		:for="id"
-		:class="[
-			{
-				dragover: dragover,
-				'sy-file-upload--disabled': disabled,
-				'dark-mode': isDarkMode,
-			},
-		]"
-		:style="widthStyles"
-		class="sy-file-upload d-block pa-4"
-		@dragover.prevent="dragover = true"
-		@dragleave="dragover = false"
+	<div
+		class="sy-file-upload-wrapper"
 	>
 		<input
 			:id="id"
 			ref="fileInput"
 			type="file"
-			:disabled="disabled"
-			:multiple="multiple"
+			tabindex="-1"
+			aria-hidden="true"
+			:disabled="disabled ? true : undefined"
+			:multiple="multiple ? true : undefined"
 			:accept="allowedExtensions.map(el=>`.${el}`).join(', ')"
 			class="sy-file-upload-input"
 			@change="onFileChange"
 		>
-		<slot>
-			<FileUploadContent
-				:allowed-extensions="allowedExtensions"
-				:multiple="multiple"
-				:file-size-max="fileSizeMax"
-				:file-size-units="fileSizeUnits"
-			>
-				<template
-					v-for="(_, slotName) in $slots"
-					#[slotName]="slotProps"
+		<div
+			ref="dropZone"
+			:aria-disabled="disabled ? true : undefined"
+			:title="locales.fileUploadTitle"
+			role="button"
+			:tabindex="disabled ? -1 : 0"
+			:class="[
+				{
+					dragover: dragover,
+					'sy-file-upload--disabled': disabled,
+					'dark-mode': isDarkMode,
+				},
+			]"
+			:style="widthStyles"
+			class="sy-file-upload d-block pa-4"
+			v-bind="attrs"
+			@click="openFileDialog"
+			@keydown.enter.prevent="openFileDialog"
+			@keydown.space.prevent="openFileDialog"
+			@dragover.prevent="dragover = true"
+			@dragleave="dragover = false"
+			@drop="dragover = false"
+		>
+			<slot>
+				<FileUploadContent
+					:allowed-extensions="allowedExtensions"
+					:multiple="multiple"
+					:file-size-max="fileSizeMax"
+					:file-size-units="fileSizeUnits"
+					:locales="locales"
 				>
-					<slot
-						:name="slotName"
-						v-bind="slotProps || {}"
-					/>
-				</template>
-			</FileUploadContent>
-		</slot>
-	</label>
+					<template
+						v-for="(_, slotName) in $slots"
+						#[slotName]="slotProps"
+					>
+						<slot
+							:name="slotName"
+							v-bind="slotProps || {}"
+						/>
+					</template>
+				</FileUploadContent>
+			</slot>
+		</div>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
+.sy-file-upload-wrapper {
+	display: contents;
+}
+
 .sy-file-upload {
 	cursor: pointer;
 	position: relative;
-	border: 1px dashed tokens.$colors-border-accent;
+	border: 1px dashed tokens.$colors-border-accent-primary;
 	border-radius: tokens.$radius-rounded-lg;
 	transition: background 0.25s;
 

package/src/components/FileUpload/FileUploadContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import { calcHumanFileSize } from '@/utils/calcHumanFileSize'
-	import { locales } from './locales'
+	import { locales as defaultLocales } from './locales'
 	import { mdiCloudUpload } from '@mdi/js'
 	import { computed } from 'vue'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
@@ -10,6 +10,7 @@
 		fileSizeUnits: Array<string>
 		fileSizeMax: number
 		multiple: boolean
+		locales: typeof defaultLocales
 	}>()
 
 	export interface FileUploadContentSlots {
@@ -60,7 +61,7 @@
 		</span>
 
 		<span
-			class="sy-file-upload-btn bg-primary text-white elevation-2"
+			class="sy-file-upload-btn bg-primary text-white"
 		>
 			<slot name="button-text">
 				{{ locales.chooseFile(multiple) }}

package/src/components/FileUpload/accessibilite/Accessibility.mdx

@@ -1,12 +1,55 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as Stories from '../FileUpload.stories.ts';
-import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
+
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="FileUpload"
+  iconSrc={AccessibilityIcon}
+>
+  <CriteriaSection>
+    <CriteriaCard icon="🔍" title="Structure sémantique">
+      <ul>
+        <li><strong>Utilisation d'un boutton</strong> : Le composant utilise un élément avec le role <code>button</code> pour déclencher l'ouverture du sélecteur de fichiers. Ceci permet de gérer l'interaction avec le clavier, le clic souris ainsi que le glisser-déposer simultanément tout en gardant une bonne sémantique.</li>
+        <li><strong>Disabled</strong> : Utilisation de l'attribut <code>disabled</code> sur le bouton si le champ est désactivé.</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="⌨️" title="Navigation clavier">
+      <ul>
+        <li><strong>Navigation au clavier</strong> : La zone d'upload de fichier est focusable, l'utilisateur peut utiliser le clic souris, le clavier ainsi que le glisser-déposer.</li>
+      </ul>
+    </CriteriaCard>
+  </CriteriaSection>
+
+  <DemoSection componentName="FileUpload">
+    <Story name="Default" />
+  </DemoSection>
 
+  <BestPracticesSection>
+    <ul>
+      <li><strong>Utiliser dans une balise de formulaire</strong> : Intégrer le composant dans une balise <code>form</code> ou le composant <code>SyForm</code> pour la sémantique et l'accessibilité.</li>
+      <li><strong>Fournir des messages d'erreur clairs</strong> : Utiliser des messages d'erreur explicites et accessibles pour informer les utilisateurs des problèmes de téléchargement.</li>
+      <li><strong>Gérer les états de téléchargement</strong> : Fournir des indications visuelles et textuelles pour les différents états de téléchargement, y compris les erreurs et les succès.</li>
+    </ul>
+  </BestPracticesSection>
 
+  	<ResourcesSection>
+		<ul>
+			<li><a href="https://react.carbondesignsystem.com/?path=/docs/components-fileuploader--overview" target="_blank" rel="noopener noreferrer">Design system d'IBM</a></li>
+			<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/input/file" target="_blank" rel="noopener noreferrer">MDN: input type="file"</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/FileUpload/locales.ts

@@ -1,4 +1,5 @@
 export const locales = {
+	fileUploadTitle: 'Téléverser un fichier',
 	or: 'Ou',
 	chooseFile: (multiple: boolean) => multiple ? 'Choisir des fichiers' : 'Choisir un fichier',
 	infoText: (max: string, ext: string[]): string =>

package/src/components/FileUpload/tests/FileUpload.spec.ts

@@ -48,13 +48,13 @@ describe('FileUpload', () => {
 			},
 		})
 
-		const label = wrapper.find('label')
+		const label = wrapper.find('.sy-file-upload')
 		const labelClasses = label.classes()
 
-		await wrapper.find('input').trigger('dragover')
+		await wrapper.find('.sy-file-upload').trigger('dragover')
 		expect(label.classes()).not.toEqual(labelClasses)
 
-		await wrapper.find('input').trigger('dragleave')
+		await wrapper.find('.sy-file-upload').trigger('dragleave')
 		expect(label.classes()).toEqual(labelClasses)
 	})
 
@@ -68,7 +68,7 @@ describe('FileUpload', () => {
 
 		const file: File = new File([''], 'filename.pdf', { type: 'application/pdf' })
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -89,13 +89,13 @@ describe('FileUpload', () => {
 
 		const file: File = new File([''], 'filename.pdf', { type: 'application/pdf' })
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
 		})
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file, file],
 			},
@@ -115,7 +115,7 @@ describe('FileUpload', () => {
 
 		const file: File = new File([''], 'filename.jpg', { type: 'image/jpeg' })
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -137,7 +137,7 @@ describe('FileUpload', () => {
 			},
 		})
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [jpgFile],
 			},
@@ -146,7 +146,7 @@ describe('FileUpload', () => {
 		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(undefined)
 		expect(wrapper.emitted('error')?.[0]).toEqual([['Le fichier filename.jpg a une extension invalide. Extensions acceptées : pdf']])
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [pdfFile],
 			},
@@ -166,7 +166,7 @@ describe('FileUpload', () => {
 
 		const file: File = new File(['42'], 'filename.jpg', { type: 'image/jpeg' })
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -183,7 +183,7 @@ describe('FileUpload', () => {
 			},
 		})
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [],
 			},
@@ -203,7 +203,7 @@ describe('FileUpload', () => {
 
 		const file: File = new File([''], 'filename.xyz', { type: 'unknown' })
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -221,7 +221,7 @@ describe('FileUpload', () => {
 			},
 		})
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -241,7 +241,7 @@ describe('FileUpload', () => {
 		const file1: File = new File([''], 'filename1.jpg', { type: 'image/jpeg' })
 		const file2: File = new File([''], 'filename2.jpg', { type: 'image/jpeg' })
 
-		await wrapper.find('label').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file1, file2],
 			},
@@ -268,6 +268,53 @@ describe('FileUpload', () => {
 		expect(wrapper.emitted('error')).toBeFalsy()
 	})
 
+	it('accepts a file whose extension is uppercase (case-insensitive check)', async () => {
+		const wrapper = mount(FileUpload, {
+			props: {
+				modelValue: [],
+				allowedExtensions: ['png'],
+			},
+		})
+
+		const file: File = new File([''], 'image.PNG', { type: 'image/png' })
+
+		await wrapper.find('.sy-file-upload').trigger('drop', {
+			dataTransfer: { files: [file] },
+		})
+
+		expect(wrapper.emitted('error')).toBeFalsy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[file]])
+	})
+
+	it('uses custom locales error message when provided', async () => {
+		const customLocales = {
+			or: 'Ou',
+			chooseFile: (multiple: boolean) => multiple ? 'Choisir des fichiers' : 'Choisir un fichier',
+			infoText: (max: string, ext: string[]) => `Taille max. : ${max}. Formats : ${ext.join(', ')}`,
+			fileSizeUnits: ['o', 'Ko', 'Mo', 'Go', 'To'],
+			dropFilesHere: (multiple: boolean) => multiple ? 'Déposer vos fichiers ici' : 'Déposer votre fichier ici',
+			errorSize: (fileName: string, max: string) => `Fichier ${fileName} trop lourd. Max : ${max}`,
+			errorExtension: () => `Message erreur custom !`,
+			fileUploadTitle: '',
+		}
+
+		const wrapper = mount(FileUpload, {
+			props: {
+				modelValue: [],
+				allowedExtensions: ['pdf'],
+				locales: customLocales,
+			},
+		})
+
+		const file: File = new File([''], 'image.PNG', { type: 'image/png' })
+
+		await wrapper.find('.sy-file-upload').trigger('drop', {
+			dataTransfer: { files: [file] },
+		})
+
+		expect(wrapper.emitted('error')?.[0]).toEqual([['Message erreur custom !']])
+	})
+
 	it('add the new files to the existing ones when the input changes in multiple mode', async () => {
 		const file1 = new File([''], 'filename1.jpg', { type: 'image/jpeg' })
 		const file2 = new File([''], 'filename2.jpg', { type: 'image/jpeg' })