@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/UploadWorkflow/UploadWorkflow.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+	import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 	import useCustomizableOptions, {
 		type CustomizableOptions,
 	} from '@/composables/useCustomizableOptions'
 	import { useWidthable, type Widthable } from '@/composables/widthable'
 	import { isRequired } from '@/utils/rules/isRequired'
-	import { computed, reactive, ref, toRef, watch } from 'vue'
+	import { computed, ref, toRef } from 'vue'
 	import DialogBox from '../DialogBox/DialogBox.vue'
 	import FileList from '../FileList/FileList.vue'
 	import FilePreview from '../FilePreview/FilePreview.vue'
@@ -14,6 +15,7 @@
 	import type { FileItem, SelectedFile, UploadItem } from './types'
 	import useFileUploadJourney from './useFileUploadJourney'
 	import useFileList from './useFileList'
+	import SyHeading from '../SyHeading/SyHeading.vue'
 
 	const props = withDefaults(
 		defineProps<
@@ -22,37 +24,42 @@
 				uploadList: UploadItem[]
 				sectionTitle?: string
 				showFilePreview?: boolean
+				infoText?: string
+				headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 				locales?: typeof defaultLocales
 			}
 		>(),
 		{
 			sectionTitle: undefined,
 			showFilePreview: false,
+			infoText: '',
+			headingLevel: 4,
 			locales: () => defaultLocales,
 		},
 	)
 
 	const emits = defineEmits<{
 		(e: 'error', value: string[]): void
+		(e: 'preview', value: FileItem): void
 		(e: 'update:modelValue', value: SelectedFile[]): void
 	}>()
 
+	defineSlots<{
+		'title'?: () => undefined
+		'modal-title'?: (props: { id: string }) => undefined
+		'modal-description'?: () => undefined
+		'preview-description'?: () => undefined
+	}>()
+
 	const selectedFiles = defineModel<SelectedFile[]>({
 		type: Array,
-		default: reactive([]),
+		default: () => [],
 	})
-	watch(
-		selectedFiles,
-		(value) => {
-			emits('update:modelValue', value)
-		},
-		{ deep: true },
-	)
 
 	const { widthStyles } = useWidthable(props)
 	const options = useCustomizableOptions(config, props)
 
-	const fileUpload = ref<typeof FileUpload>()
+	const fileUpload = ref<InstanceType<typeof FileUpload>>()
 	const { selectItems, selectedItem } = useFileUploadJourney(
 		toRef(props, 'uploadList'),
 	)
@@ -65,19 +72,21 @@
 		= useFileList(selectedFiles, toRef(props, 'uploadList'))
 
 	// handle FileList
-	let inlineSelectedItemId: string | undefined = undefined
+	const inlineSelectedItemId = ref<string | undefined>(undefined)
 	function uploadInline(item: FileItem) {
-		inlineSelectedItemId = item.id
+		inlineSelectedItemId.value = item.id
 
-		fileUpload.value!.fileInput!.click()
+		fileUpload.value?.openFileDialog()
 	}
 	function previewFile(file: FileItem & { file?: File }) {
+		emits('preview', file)
 		showPreviewDialog.value = true
 		fileToPreview.value = file.file
 	}
 
 	// handle FileUpload
 	const uploadedFiles = ref<File[]>([])
+	const uploadedFile = computed(() => uploadedFiles.value[0])
 
 	const showFileUpload = computed(
 		() => (
@@ -88,10 +97,10 @@
 
 	function fileSelected(files: File[]) {
 		const fileId
-			= inlineSelectedItemId ?? (props.uploadList.length === 1
+			= inlineSelectedItemId.value ?? (props.uploadList.length === 1
 				? props.uploadList[0]!.id
 				: undefined)
-		inlineSelectedItemId = undefined
+		inlineSelectedItemId.value = undefined
 
 		if (props.showFilePreview || fileId === undefined) {
 			showSelectDialog.value = true
@@ -105,22 +114,22 @@
 
 	function uploadError(errors: string[]) {
 		emits('error', errors)
-		if (!inlineSelectedItemId) {
+		if (!inlineSelectedItemId.value) {
 			return
 		}
-		setItemOnError(inlineSelectedItemId)
-		inlineSelectedItemId = undefined
+		setItemOnError(inlineSelectedItemId.value)
+		inlineSelectedItemId.value = undefined
 	}
 
 	// handle DialogBox
 	const showSelectDialog = ref(false)
 
 	function dialogConfirm() {
-		if (!selectedItem.value) {
+		if (!selectedItem.value || !uploadedFile.value) {
 			return
 		}
 
-		addOrReplaceFile(uploadedFiles.value[0]!, selectedItem.value)
+		addOrReplaceFile(uploadedFile.value, selectedItem.value)
 
 		showSelectDialog.value = false
 		selectedItem.value = undefined
@@ -137,9 +146,12 @@
 		class="sy-upload-workflow white"
 	>
 		<slot name="title">
-			<h4 class="text-h6 mb-2">
+			<SyHeading
+				:level="props.headingLevel"
+				:class="headingLevel === 4 ? 'text-h6 mb-2' : 'mb-2'"
+			>
 				{{ title }}
-			</h4>
+			</SyHeading>
 		</slot>
 
 		<FileList
@@ -159,29 +171,44 @@
 				v-model="uploadedFiles"
 				@error="uploadError"
 				@update:model-value="fileSelected"
-			/>
+			>
+				<template
+					v-if="props.infoText"
+					#info-text
+				>
+					{{ props.infoText }}
+				</template>
+			</FileUpload>
 		</Transition>
 
 		<DialogBox
 			v-model="showSelectDialog"
+			:heading-level="props.headingLevel"
 			v-bind="options.dialog"
 			@cancel="showSelectDialog = false"
 			@confirm="dialogConfirm"
 		>
-			<template #title>
-				<slot name="modal-title">
-					{{ locales.modalTitle }}
+			<template #title="titleSlotProps">
+				<slot
+					:id="titleSlotProps.id"
+					name="modal-title"
+				>
+					<div
+						:id="titleSlotProps.id"
+						class="text-h4 font-weight-medium"
+					>
+						{{ locales.modalTitle }}
+					</div>
 				</slot>
 			</template>
 			<slot name="modal-description" />
 
-			<VForm
-				v-if="true"
+			<div
 				ref="form"
 				v-bind="options.form"
 				class="mb-2"
 			>
-				<VSelect
+				<SySelect
 					v-model="selectedItem"
 					v-bind="options.select"
 					:items="selectItems"
@@ -190,17 +217,18 @@
 					:rules="[isRequired]"
 					color="primary"
 				/>
-			</VForm>
+			</div>
 
 			<FilePreview
 				v-if="showFilePreview"
 				:options="options.filePreview"
-				:file="uploadedFiles[0]"
+				:file="uploadedFile"
 			/>
 		</DialogBox>
 
 		<DialogBox
 			v-model="showPreviewDialog"
+			:heading-level="props.headingLevel"
 			v-bind="options.previewDialog"
 			hide-actions
 		>

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

@@ -1,12 +1,63 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as Stories from '../UploadWorkflow.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} />
+<AccessibilityGuideLayout
+	componentName="UploadWorkflow"
+  iconSrc={AccessibilityIcon}
+>
+  <CriteriaSection>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
+  <ul>
+    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h4, défini dans l’implémentation du composant.</li>
+      <code>&lt;UploadWorkflow
+          :heading-level="4" /&gt; </code>
+    
+    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA)</li>
+  </ul>
+</CriteriaCard>
+</CriteriaSection>
+  <CriteriaSection>
+    <CriteriaCard icon="🔍" title="Structure sémantique">
+      <ul>
+        <li><strong>Niveaux de titres personnalisables</strong> : Permet de choisir le niveau de titre de la zone de contenu.</li>
+        <li><strong>Dialog</strong> : Voir la page d'accessibilité des dialogues pour plus d'informations.</li>
+        <li><strong>Liste des fichiers</strong> : Utilisation des balises <code>ul</code> et <code>li</code> pour présenter les fichiers téléchargés.</li>
+        <li><strong>Actions</strong> : Utilisation des balises <code>button</code> et <code>role="button"</code> pour les actions disponibles.</li>
+        <li><strong>Champs de fichier</strong> : Utilisation de <code>input type="file"</code>, <code>label</code> et <code>accept</code> pour les champs de téléchargement de fichiers.</li>
+      </ul>
+    </CriteriaCard>
 
-<br />
+    <CriteriaCard icon="⌨️" title="Navigation clavier complète">
+      <ul>
+        <li><strong>Boutons d'actions</strong> : Utilisation des touches Espace et Entrée.</li>
+        <li><strong>Modal</strong> : Navigation complète au clavier dans les dialogues, y compris la gestion du focus et des raccourcis clavier pour fermer les modals.</li>
+      </ul>
+    </CriteriaCard>
+  </CriteriaSection>
+
+  <DemoSection componentName="UploadWorkflow">
+    <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>Renseigner le bon niveau de titre</strong> : Choisir le niveau de titre approprié pour la zone de contenu afin de maintenir une structure sémantique claire.</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>
+
+</AccessibilityGuideLayout>

package/src/components/UploadWorkflow/accessibilite/UploadWorkflow.a11y.spec.ts

@@ -0,0 +1,110 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import UploadWorkflow from '@/components/UploadWorkflow/UploadWorkflow.vue'
+
+// Scénario d’accessibilité : zone de dépôt de fichier simple, sans fichier sélectionné,
+// avec les textes d’aide par défaut.
+
+describe('UploadWorkflow – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			attachTo: document.body,
+			props: {
+				uploadList: [
+					{
+						id: '1',
+						title: 'Carte d\'identité',
+					},
+					{
+						id: '2',
+						title: 'Facture de soin',
+						optional: true,
+					},
+					{
+						id: '3',
+						title: 'Relevé d\'identité bancaire',
+						optional: true,
+					},
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'UploadWorflow', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations in the modal of file selection', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			attachTo: document.body,
+			props: {
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+					{
+						id: 'bill',
+						title: 'Facture de soin',
+					},
+				],
+			},
+		})
+
+		const file: File = new File([''], 'uploadInField.pdf', {
+			type: 'application/pdf',
+		})
+
+		await wrapper.find('input').trigger('drop', {
+			dataTransfer: {
+				files: [file],
+			},
+		})
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'UploadWorkflow - file selection modal', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations in the modal of file preview', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			attachTo: document.body,
+			props: {
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+						showPreviewBtn: true,
+					},
+					{
+						id: 'bill',
+						title: 'Facture de soin',
+					},
+				],
+				modelValue: [
+					{
+						fileName: 'file1.pdf',
+						file: new File([''], 'file1.pdf', {
+							type: 'application/pdf',
+						}),
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+				],
+			},
+		})
+
+		await wrapper.find('.file-item button').trigger('click')
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'UploadWorkflow - file preview modal', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -1,11 +1,12 @@
 import { describe, it, expect, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
 
 import UploadWorkflow from '../UploadWorkflow.vue'
 import { locales as fileListLocales } from '@/components/FileList/UploadItem/locales'
 import { locales as FileUploadLocales } from '@/components/FileUpload/locales'
 import { afterEach } from 'node:test'
-import { VSelect } from 'vuetify/components'
+import { SySelect } from '@/components'
 
 describe('UploadWorkflow', () => {
 	afterEach(() => {
@@ -56,7 +57,7 @@ describe('UploadWorkflow', () => {
 			type: 'application/pdf',
 		})
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -136,14 +137,14 @@ describe('UploadWorkflow', () => {
 			type: 'application/pdf',
 		})
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
 		})
 
-		wrapper.find('.v-select input').setValue('bill')
-		wrapper.findComponent(VSelect).vm.$emit('update:modelValue', 'bill')
+		wrapper.find('.sy-select input').setValue('bill')
+		wrapper.findComponent(SySelect).vm.$emit('update:modelValue', 'bill')
 
 		await wrapper.find('[data-test-id="confirm-btn"]').trigger('click')
 
@@ -185,7 +186,7 @@ describe('UploadWorkflow', () => {
 			type: 'application/pdf',
 		})
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [file],
 			},
@@ -229,7 +230,7 @@ describe('UploadWorkflow', () => {
 
 		await wrapper.find('.file-item button').trigger('click')
 
-		await wrapper.find('input').trigger('drop', {
+		await wrapper.find('.sy-file-upload').trigger('drop', {
 			dataTransfer: {
 				files: [image],
 			},
@@ -237,6 +238,35 @@ describe('UploadWorkflow', () => {
 
 		await wrapper.find('.file-item__action-preview').trigger('click')
 
+		expect(wrapper.emitted('preview')).toBeTruthy()
+		expect(wrapper.emitted('preview')?.[0]?.[0]).toMatchObject({
+			id: 'CERFA1',
+			title: 'CERFA 1',
+			showPreviewBtn: true,
+		})
+
 		expect(wrapper.find('.sy-file-preview img').exists()).toBeTruthy()
 	})
+
+	it('render custom infoText in FileUpload info-text slot', async () => {
+		const wrapper = mount(UploadWorkflow, {
+			props: {
+				modelValue: [],
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+				],
+				infoText: 'Texte personnalisé',
+			},
+		})
+
+		await nextTick()
+
+		const fileUpload = wrapper.find('.sy-file-upload')
+		expect(fileUpload.exists()).toBe(true)
+
+		expect(fileUpload.text()).toContain('Texte personnalisé')
+	})
 })