@cnamts/synapse 1.0.19 → 1.0.21

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

@@ -0,0 +1,69 @@
+import { Meta, Primary } from '@storybook/blocks';
+import * as ToolbarContainerStories from '../ToolbarContainer.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
+
+<Meta of={ToolbarContainerStories}/>
+
+<AccessibilityGuideLayout
+	componentName="ToolbarContainer"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"
+>
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique">
+			<ul>
+				<li><strong>Rôle ARIA approprié</strong> : <code>role="toolbar"</code> sur le conteneur principal</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation clavier complète">
+			<ul>
+				<li><strong>Flèches directionnelles</strong> : Navigation entre les éléments interactifs (←, →, ↑, ↓)</li>
+                <li>Le focus boucle en fin de liste et revient au début (et inversement)</li>
+				<li><strong>Touches Home/End</strong> : Accès rapide au premier/dernier élément</li>
+                <li><strong>Touche Tab</strong> : Accès au toolbar et sortie du toolbar</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="📱" title="États et retours d'information">
+			<ul>
+				<li><strong>Focus visible</strong> : L'effet de focus possède un contraste suffisant et est cohérent avec le reste du design système</li>
+				<li><strong>État sélectionné</strong> : Utilisation de <code>aria-checked</code> ou <code>aria-pressed</code> selon le type de bouton</li>
+				<li><strong>Gestion du focus</strong> : Restauration du focus sur le dernier élément utilisé</li>
+			</ul>
+		</CriteriaCard>
+
+	</CriteriaSection>
+
+	<DemoSection componentName="ToolbarContainer">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+            <li>Utilisez un label pertinent pour le toolbar via <code>aria-label</code> ou <code>aria-labelledby</code></li>
+			<li>Regroupez les boutons apparentés dans des <code>role="group"</code> ou <code>role="radiogroup"</code></li>
+			<li>Utilisez des labels explicites pour chaque groupe d'actions</li>
+			<li>Assurez-vous que le focus est toujours visible</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices: Toolbar</a></li>
+		</ul>
+	</ResourcesSection>
+
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/ToolbarContainer.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/927" target="_blank" style={{color:'#0C41BD'}}>issue #927</a>)</p>
+	</div>
+</AccessibilityGuideLayout>

package/src/components/UploadWorkflow/UploadWorkflow.mdx

@@ -17,7 +17,7 @@ import * as UploadWorkflowStories from './UploadWorkflow.stories';
 
 ## Événements
 
-Vous pouvez réagir lorsque la liste des fichiers est mise à jour en utilisant l’événement `update:modelValue`, et réagir aux erreurs de validation en utilisant l’événement `error`.
+Vous pouvez réagir lorsque la liste des fichiers est mise à jour en utilisant l’événement `update:modelValue`, réagir aux erreurs de validation en utilisant l’événement `error`, et intercepter l’ouverture d’une prévisualisation en utilisant l’événement `preview` (avec le `FileItem` associé).
 
 <Canvas of={UploadWorkflowStories.Events} />
 
@@ -39,6 +39,16 @@ Vous pouvez permettre à l’utilisateur de prévisualiser le fichier qu’il vi
 
 <Canvas of={UploadWorkflowStories.WithPreviewStep} />
 
+## Texte d'information
+
+Vous pouvez personnaliser le texte affiché dans la zone d’information du composant enfant `FileUpload` en utilisant la prop `info-text`.
+
+<Canvas of={UploadWorkflowStories.WithInfoText} />
+
+## Niveau de titre
+
+Vous pouvez configurer le niveau du titre affiché par défaut en utilisant la prop `heading-level` (rendu via `role="heading"` et `aria-level`).
+
 ## Exemple d'utilisation
 
 <Source

package/src/components/UploadWorkflow/UploadWorkflow.stories.ts

@@ -8,7 +8,7 @@ const meta: Meta<typeof UploadWorkflow> = {
 	title: 'Composants/Formulaires/UploadWorkflow',
 	component: UploadWorkflow,
 	parameters: {
-		controls: { exclude: ['update:modelValue', 'error'] },
+		controls: { exclude: ['update:modelValue', 'error', 'preview'] },
 	},
 	argTypes: {
 		'modelValue': {
@@ -75,6 +75,36 @@ const meta: Meta<typeof UploadWorkflow> = {
 				},
 			},
 		},
+		'headingLevel': {
+			description: 'Niveau du titre affiché (utilise role="heading" et aria-level).',
+			control: {
+				type: 'number',
+				min: 1,
+				max: 6,
+			},
+			table: {
+				category: 'props',
+				type: {
+					summary: 'number',
+				},
+				defaultValue: {
+					summary: '4',
+				},
+			},
+		},
+		'infoText': {
+			description: 'Personnalise le texte affiché dans la zone d’information du composant enfant FileUpload (slot info-text).',
+			control: 'text',
+			table: {
+				category: 'props',
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: '\'\'',
+				},
+			},
+		},
 		'vuetifyOptions': {
 			description: 'Les options pour les composants enfants.',
 			control: 'object',
@@ -186,6 +216,15 @@ const meta: Meta<typeof UploadWorkflow> = {
 				},
 			},
 		},
+		'onPreview': {
+			description: 'Événement émis lors de l\'ouverture d\'une prévisualisation.',
+			table: {
+				category: 'events',
+				type: {
+					summary: 'FileItem',
+				},
+			},
+		},
 		'onUpdate:modelValue': {
 			description: 'Événement émis lorsqu\'un fichier est ajouté ou supprimé.',
 			table: {
@@ -267,6 +306,7 @@ export const Default: Story = {
 		],
 		'onUpdate:modelValue': fn(),
 		'onError': fn(),
+		'onPreview': fn(),
 	},
 	parameters: {
 		sourceCode: [
@@ -380,6 +420,7 @@ export const WithPreviewStep: Story = {
 		],
 		'onUpdate:modelValue': fn(),
 		'onError': fn(),
+		'onPreview': fn(),
 		'showFilePreview': true,
 	},
 	parameters: {
@@ -391,6 +432,7 @@ export const WithPreviewStep: Story = {
 		v-model="files"
 		:upload-list="uploadList"
 		:showFilePreview="true"
+		@preview="onPreview"
 	/>
 </template>`,
 
@@ -412,6 +454,57 @@ export const WithPreviewStep: Story = {
 			title: 'Facture de soin',
 		},
 	]
+
+	function onPreview(fileItem: unknown) {
+		console.log('preview', fileItem)
+	}
+</script>`,
+			},
+		],
+	},
+}
+
+export const WithInfoText: Story = {
+	args: {
+		'modelValue': [],
+		'uploadList': [
+			{
+				id: '1',
+				title: 'Carte d\'identité',
+			},
+			{
+				id: '2',
+				title: 'Facture de soin',
+			},
+		],
+		'infoText': 'Vous pouvez déposer vos fichiers ici. Formats acceptés : PDF, JPG, PNG.',
+		'onUpdate:modelValue': fn(),
+		'onError': fn(),
+		'onPreview': fn(),
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<UploadWorkflow
+		v-model="files"
+		:upload-list="uploadList"
+		info-text="Vous pouvez déposer vos fichiers ici. Formats acceptés : PDF, JPG, PNG."
+	/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { ref } from 'vue'
+	import { UploadWorkflow } from '@cnamts/synapse'
+
+	const files = ref([])
+	const uploadList = [
+		{ id: '1', title: 'Carte d\\'identité' },
+		{ id: '2', title: 'Facture de soin' },
+	]
 </script>`,
 			},
 		],
@@ -468,14 +561,17 @@ export const Events: Story = {
 			{
 				id: 'ID',
 				title: 'Carte d\'identité',
+				showPreviewBtn: true,
 			},
 			{
 				id: 'Bill',
 				title: 'Facture de soin',
+				showPreviewBtn: true,
 			},
 		],
 		'onUpdate:modelValue': fn(),
 		'onError': fn(),
+		'onPreview': fn(),
 	},
 	render: (args) => {
 		return {
@@ -517,6 +613,7 @@ export const Events: Story = {
 					:upload-list="args.uploadList"
 					:vuetify-options="options"
 					@error="[showError, args.onError]"
+					@preview="args.onPreview"
 					@update:modelValue="[valueUpdated, args['onUpdate:modelValue']]"
 				/>
 				<VSnackbar
@@ -549,6 +646,7 @@ export const Events: Story = {
 		:upload-list="uploadList"
 		vuetify-options="options"
 		@onError="showError"
+		@onPreview="onPreview"
 		@onUpdate:modelValue="valueUpdated"
 	/>
 </template>`,
@@ -564,10 +662,12 @@ export const Events: Story = {
 		{
 			id: 'ID',
 			title: 'Carte d'identité',
+			showPreviewBtn: true,
 		},
 		{
 			id: 'Bill',
 			title: 'Facture de soin',
+			showPreviewBtn: true,
 		},
 	]
 
@@ -581,13 +681,13 @@ export const Events: Story = {
 		}
 	}
 
-	function showError (errors: string[]) {
+	function showError(errors: string[]) {
 		snackbarText.value = errors.join(', ')
 		snackbarColor.value = 'error';
 		snackbar.value = true
 	}
 
-	function valueUpdated (items: {fileName: string, file: File}[]) {
+	function valueUpdated(items: { fileName: string, file: File }[]) {
 		if(items.length === 0) {
 			return
 		}
@@ -595,6 +695,10 @@ export const Events: Story = {
 		snackbarColor.value = 'success';
 		snackbar.value = true
 	}
+
+	function onPreview(fileItem: unknown) {
+		console.log('preview', fileItem)
+	}
 </script>`,
 			},
 		],

package/src/components/UploadWorkflow/UploadWorkflow.vue

@@ -4,7 +4,7 @@
 	} 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'
@@ -22,37 +22,35 @@
 				uploadList: UploadItem[]
 				sectionTitle?: string
 				showFilePreview?: boolean
+				infoText?: string
+				headingLevel?: number
 				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
 	}>()
 
 	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 +63,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 +88,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 +105,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 +137,13 @@
 		class="sy-upload-workflow white"
 	>
 		<slot name="title">
-			<h4 class="text-h6 mb-2">
+			<div
+				:aria-level="props.headingLevel"
+				role="heading"
+				class="text-h6 mb-2"
+			>
 				{{ title }}
-			</h4>
+			</div>
 		</slot>
 
 		<FileList
@@ -159,7 +163,14 @@
 				v-model="uploadedFiles"
 				@error="uploadError"
 				@update:model-value="fileSelected"
-			/>
+			>
+				<template
+					v-if="props.infoText"
+					#info-text
+				>
+					{{ props.infoText }}
+				</template>
+			</FileUpload>
 		</Transition>
 
 		<DialogBox
@@ -195,7 +206,7 @@
 			<FilePreview
 				v-if="showFilePreview"
 				:options="options.filePreview"
-				:file="uploadedFiles[0]"
+				:file="uploadedFile"
 			/>
 		</DialogBox>
 

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

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../UploadWorkflow.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>
+
+<br />

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

@@ -1,5 +1,6 @@
 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'
@@ -34,6 +35,24 @@ describe('UploadWorkflow', () => {
 		expect(wrapper.find('.sy-file-upload').isVisible()).toBeTruthy()
 	})
 
+	it('renders default title with role heading and configured aria-level', () => {
+		const wrapper = mount(UploadWorkflow, {
+			props: {
+				uploadList: [
+					{
+						id: 'ID',
+						title: 'Carte d\'identité',
+					},
+				],
+				headingLevel: 2,
+			},
+		})
+
+		const title = wrapper.find('[role="heading"]')
+		expect(title.exists()).toBe(true)
+		expect(title.attributes('aria-level')).toBe('2')
+	})
+
 	it('shows the file in the list when set with the list button', async () => {
 		const wrapper = mount(UploadWorkflow, {
 			props: {
@@ -237,6 +256,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é')
+	})
 })

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

@@ -8,12 +8,16 @@ exports[`UploadWorkflow > render the upload list 1`] = `
   "
   style="width: 100%;"
 >
-  <h4 class="
-    mb-2
-    text-h6
-  ">
+  <div
+    aria-level="4"
+    class="
+      mb-2
+      text-h6
+    "
+    role="heading"
+  >
     Documents à nous transmettre
-  </h4>
+  </div>
   <ul
     class="upload-list"
     style="width: 100%;"

package/src/components/UploadWorkflow/useFileList.ts

@@ -8,6 +8,10 @@ export default function useFileList(
 ) {
 	const errorSelectedFiles = ref<string[]>([])
 
+	function notifySelectedFilesChanged() {
+		selectedFiles.value = selectedFiles.value.slice()
+	}
+
 	function removeFromErrorList(fileId: string) {
 		const errorIndex = errorSelectedFiles.value.findIndex(item => item === fileId)
 		if (errorIndex !== -1) {
@@ -22,12 +26,14 @@ export default function useFileList(
 	function resetFile(fileItem: FileListItem | SelectedFile) {
 		const itemIndex = selectedFiles.value.findIndex(item => item.id === fileItem.id)
 		selectedFiles.value.splice(itemIndex, 1)
+		notifySelectedFilesChanged()
 	}
 
 	function replaceFile(file: File, item: SelectedFile, state: FileState = 'success') {
 		item.file = file
 		item.fileName = file.name
 		item.state = state
+		notifySelectedFilesChanged()
 	}
 
 	function addOrReplaceFile(file: File, fileId: string, state: FileState = 'success') {
@@ -52,6 +58,7 @@ export default function useFileList(
 				fileName: file.name,
 				file,
 			})
+			notifySelectedFilesChanged()
 			removeFromErrorList(fileId)
 		}
 	}

package/src/components/Usages/Usages.vue

@@ -2,6 +2,7 @@
 	import { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { checkIcon, croixIcon } from '@/constants/icons'
 	import { ref } from 'vue'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	withDefaults(defineProps<CustomizableOptions & {
 		items1?: string[]
@@ -31,7 +32,7 @@
 				style="display: flex;"
 				class="d-flex check-text"
 			>
-				<VIcon :icon="iconCheck" />
+				<SyIcon :icon="iconCheck" />
 				<p class="font-weight-bold mb-2">
 					À faire
 				</p>
@@ -54,7 +55,7 @@
 			class="m-2 p-2 v-col-auto not-check"
 		>
 			<div class="d-flex not-check-text">
-				<VIcon :icon="iconCross" />
+				<SyIcon :icon="iconCross" />
 				<p class="font-weight-bold mb-2">
 					À ne pas faire
 				</p>

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -6,6 +6,7 @@
 	import { mdiAccount, mdiLoginVariant } from '@mdi/js'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { defaultOptions } from './config'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	type MenuItem = { text: string, value: string, link?: string, to?: RouteLocationRaw }
 
@@ -55,14 +56,14 @@
 		class="user-menu-btn"
 	>
 		<template #append-icon>
-			<VIcon
+			<SyIcon
 				v-if="!hideUserIcon"
+				decorative
+				:icon="mdiAccount"
 				:size="isMobileView ? 'x-large' : 'default'"
 				class="vd-user-icon mr-0 pa-2"
 				v-bind="options['icon']"
-			>
-				{{ mdiAccount }}
-			</VIcon>
+			/>
 		</template>
 		<template #footer-list-item>
 			<slot>
@@ -73,10 +74,11 @@
 					@click="$emit('logout')"
 				>
 					<div class="d-flex">
-						<VIcon
+						<SyIcon
 							:icon="mdiLoginVariant"
 							class="mr-4"
 							v-bind="options['logoutIcon']"
+							decorative
 						/>
 						<VListItemTitle class="logout">
 							{{ props.logoutText }}

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

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../UserMenuBtn.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>
+
+<br />