@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/Tables/common/tests/SyTablePagination.spec.ts

@@ -6,6 +6,7 @@ describe('SyTablePagination.vue', () => {
 	it('renders the component with default props', () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 100,
@@ -19,6 +20,7 @@ describe('SyTablePagination.vue', () => {
 	it('displays pagination when there are multiple pages', () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 100,
@@ -31,6 +33,7 @@ describe('SyTablePagination.vue', () => {
 	it('does not display pagination navigation when there is only one page', () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 5,
@@ -44,6 +47,7 @@ describe('SyTablePagination.vue', () => {
 	it('always shows items per page selector even with only one page', () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 5,
@@ -59,6 +63,7 @@ describe('SyTablePagination.vue', () => {
 		// Test with standard value
 		const wrapper1 = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10, // Standard value
 				itemsLength: 42,
@@ -66,16 +71,17 @@ describe('SyTablePagination.vue', () => {
 			},
 		})
 
-		const vm1 = wrapper1.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-		expect(vm1.itemsPerPageOptions).toBeDefined()
+		const vm1 = wrapper1.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+		expect(vm1.formatedItemsPerPageOptions).toBeDefined()
 
-		const options1 = vm1.itemsPerPageOptions
+		const options1 = vm1.formatedItemsPerPageOptions
 		// Should have standard options 5, 10, 25, 50, 100) plus the 'All' option (-1)
 		expect(options1.map(o => o.value).sort((a, b) => a - b)).toEqual([-1, 5, 10, 25, 50, 100])
 
 		// Test with custom value
 		const wrapper2 = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 42, // Custom value
 				itemsLength: 100,
@@ -83,8 +89,8 @@ describe('SyTablePagination.vue', () => {
 			},
 		})
 
-		const vm2 = wrapper2.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-		const options2 = vm2.itemsPerPageOptions
+		const vm2 = wrapper2.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+		const options2 = vm2.formatedItemsPerPageOptions
 
 		// Should include the custom value (42)
 		const hasCustomValue = options2.some(option => option.value === 42)
@@ -97,6 +103,7 @@ describe('SyTablePagination.vue', () => {
 	it('shows correct range when "All" is selected', async () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: -1, // "All" option
 				itemsLength: 42,
@@ -111,6 +118,7 @@ describe('SyTablePagination.vue', () => {
 	it('emits update:page event when SyPagination emits update:modelValue', async () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 100,
@@ -130,6 +138,7 @@ describe('SyTablePagination.vue', () => {
 	it('has the correct structure for items per page selection', () => {
 		const wrapper = mount(SyTablePagination, {
 			props: {
+				headingLevel: 2,
 				page: 1,
 				itemsPerPage: 10,
 				itemsLength: 100,
@@ -144,10 +153,11 @@ describe('SyTablePagination.vue', () => {
 	})
 
 	// Tests for itemsPerPageOptions functionality
-	describe('itemsPerPageOptions', () => {
-		it('should use default options when itemsPerPageOptions is not provided', () => {
+	describe('formatedItemsPerPageOptions', () => {
+		it('should use default options when formatedItemsPerPageOptions is not provided', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 10,
@@ -156,15 +166,16 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should have default options: 5, 10, 25, 50, 100, and "Tous" (-1)
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(6)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25, 50, 100, -1])
 		})
 
-		it('should limit options when itemsPerPageOptions is provided', () => {
+		it('should limit options when formatedItemsPerPageOptions is provided', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 10,
@@ -174,16 +185,17 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should only have the limited options, no "Tous" option
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(3)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25])
 			expect(selectOptions.map(opt => opt.text)).toEqual(['5', '10', '25'])
 		})
 
-		it('should include "Tous" option when explicitly allowed in itemsPerPageOptions', () => {
+		it('should include "Tous" option when explicitly allowed in formatedItemsPerPageOptions', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 10,
@@ -193,8 +205,8 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should have the limited options plus "Tous"
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(4)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25, -1])
 
@@ -207,6 +219,7 @@ describe('SyTablePagination.vue', () => {
 		it('should add current itemsPerPage to options if not already included', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 15, // Not in the itemsPerPageOptions
@@ -216,8 +229,8 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should include the current itemsPerPage value and sort numerically
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(4)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 15, 25])
 		})
@@ -225,6 +238,7 @@ describe('SyTablePagination.vue', () => {
 		it('should not add current itemsPerPage if it is -1 (Tous)', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: -1, // "Tous" option
@@ -233,9 +247,9 @@ describe('SyTablePagination.vue', () => {
 				},
 			})
 
-			// Should not add -1 to the options since itemsPerPageOptions doesn't include it
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			// Should not add -1 to the options since formatedItemsPerPageOptions doesn't include it
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(3)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5, 10, 25])
 			expect(selectOptions.find(opt => opt.value === -1)).toBeUndefined()
@@ -244,6 +258,7 @@ describe('SyTablePagination.vue', () => {
 		it('should work with very restrictive options', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 5,
@@ -253,8 +268,8 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should only have one option
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(1)
 			expect(selectOptions.map(opt => opt.value)).toEqual([5])
 			expect(selectOptions.map(opt => opt.text)).toEqual(['5'])
@@ -263,6 +278,7 @@ describe('SyTablePagination.vue', () => {
 		it('should handle empty itemsPerPageOptions array', () => {
 			const wrapper = mount(SyTablePagination, {
 				props: {
+					headingLevel: 2,
 					page: 1,
 					pageCount: 5,
 					itemsPerPage: 10,
@@ -272,8 +288,8 @@ describe('SyTablePagination.vue', () => {
 			})
 
 			// Should only include the current itemsPerPage since base options are empty
-			const vm = wrapper.vm as unknown as { itemsPerPageOptions: Array<{ text: string, value: number }> }
-			const selectOptions = vm.itemsPerPageOptions
+			const vm = wrapper.vm as unknown as { formatedItemsPerPageOptions: Array<{ text: string, value: number }> }
+			const selectOptions = vm.formatedItemsPerPageOptions
 			expect(selectOptions).toHaveLength(1)
 			expect(selectOptions.map(opt => opt.value)).toEqual([10])
 		})

package/src/components/Tables/common/types.ts

@@ -98,6 +98,7 @@ export type SyTableProps = {
 	multiSort?: boolean
 	mustSort?: boolean
 	itemsPerPageOptions?: number[]
+	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 }
 
 export type SyServerTableProps = {
@@ -120,4 +121,6 @@ export type SyServerTableProps = {
 	multiSort?: boolean
 	mustSort?: boolean
 	itemsPerPageOptions?: number[]
+	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+
 }

package/src/components/ToolbarContainer/tests/ToolbarContainer.a11y.spec.ts

@@ -0,0 +1,126 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import ToolbarContainer from '../ToolbarContainer.vue'
+
+// Scénario d'accessibilité : barre d'outils avec des boutons de navigation
+// Le composant doit avoir un rôle toolbar et gérer la navigation au clavier
+describe('ToolbarContainer – accessibility (axe)', () => {
+	it('should not have any axe violations with default buttons', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<VBtn>Action 1</VBtn>
+					<VBtn>Action 2</VBtn>
+					<VBtn>Action 3</VBtn>
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer with default buttons')
+	})
+
+	it('should not have any axe violations with custom content', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<div>
+						<VBtn icon="mdi-plus" aria-label="Ajouter"></VBtn>
+						<VBtn icon="mdi-minus" aria-label="Retirer"></VBtn>
+						<button aria-label="Action personnalisée">Custom Button</button>
+					</div>
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer with custom content')
+	})
+
+	it('should not have any axe violations with disabled buttons', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<VBtn>Action 1</VBtn>
+					<VBtn disabled>Action 2</VBtn>
+					<VBtn>Action 3</VBtn>
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer with disabled buttons')
+	})
+
+	it('should not have any axe violations with links and buttons', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<VBtn>Action Button</VBtn>
+					<a href="#home" aria-label="Accueil">Home Link</a>
+					<input type="text" placeholder="Rechercher" aria-label="Recherche" />
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer with mixed focusable elements')
+	})
+
+	it('should have proper toolbar role and attributes', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<VBtn>Action 1</VBtn>
+					<VBtn>Action 2</VBtn>
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+
+		expect(toolbar.exists()).toBe(true)
+		expect(toolbar.attributes('role')).toBe('toolbar')
+		expect(toolbar.attributes('tabindex')).toBe('0')
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer role and attributes')
+	})
+
+	it('should handle keyboard navigation accessibility', async () => {
+		const wrapper = mount(ToolbarContainer, {
+			slots: {
+				default: `
+					<VBtn>Action 1</VBtn>
+					<VBtn>Action 2</VBtn>
+					<VBtn>Action 3</VBtn>
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const toolbar = wrapper.find('.sy-toolbar')
+		const buttons = wrapper.findAll('button.v-btn')
+
+		// Vérifier que les boutons ont le tabindex approprié
+		expect(buttons[0]?.attributes('tabindex')).toBe('-1')
+		expect(buttons[1]?.attributes('tabindex')).toBe('-1')
+		expect(buttons[2]?.attributes('tabindex')).toBe('-1')
+
+		// Simuler le focus sur la toolbar
+		await toolbar.trigger('focus')
+
+		// Après le focus, le premier bouton devrait être focusable
+		expect(buttons[0]?.attributes('tabindex')).toBe('0')
+
+		const results = await axe(wrapper.element)
+		assertNoA11yViolations(results, 'ToolbarContainer keyboard navigation')
+	})
+})

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

@@ -259,7 +259,7 @@ const meta: Meta<typeof UploadWorkflow> = {
 			table: {
 				category: 'slots',
 				type: {
-					summary: '{}',
+					summary: '{ id: string }',
 				},
 			},
 			control: 'text',
@@ -386,7 +386,7 @@ export const OptionalDocument: Story = {
 	const uploadList = [
 		{
 			id: '1',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 		{
 			id: '2',
@@ -395,7 +395,7 @@ export const OptionalDocument: Story = {
 		},
 		{
 			id: '3',
-			title: 'Relevé d'identité bancaire',
+			title: 'Relevé d\\'identité bancaire',
 			optional: true,
 		},
 	]
@@ -447,7 +447,7 @@ export const WithPreviewStep: Story = {
 	const uploadList = [
 		{
 			id: 'ID',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 		{
 			id: 'Bill',
@@ -544,7 +544,7 @@ export const OneFile: Story = {
 	const uploadList = [
 		{
 			id: 'ID',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 	]
 
@@ -661,7 +661,7 @@ export const Events: Story = {
 	const uploadList = [
 		{
 			id: 'ID',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 			showPreviewBtn: true,
 		},
 		{
@@ -784,7 +784,7 @@ export const Slots: Story = {
 	const uploadList = [
 		{
 			id: 'ID',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 		{
 			id: 'Bill',
@@ -849,7 +849,7 @@ export const Customization: Story = {
 	const uploadList = [
 		{
 			id: '1',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 		{
 			id: '2',
@@ -931,7 +931,7 @@ export const ManuallySetFile: Story = {
 	const files = ref([
 		{
 			id: '1',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 			state: 'success',
 			fileName: 'carte_identite.jpg',
 			optional: false,
@@ -952,7 +952,7 @@ export const ManuallySetFile: Story = {
 	const uploadList = [
 		{
 			id: '1',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 		},
 		{
 			id: '2',
@@ -1021,7 +1021,7 @@ export const ManuallySetStates: Story = {
 	const files = ref([
 		{
 			id: '1',
-			title: 'Carte d'identité',
+			title: 'Carte d\\'identité',
 			state: 'error',
 			fileName: 'carte_identite.jpg',
 			optional: false,

package/src/components/UploadWorkflow/UploadWorkflow.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+	import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 	import useCustomizableOptions, {
 		type CustomizableOptions,
 	} from '@/composables/useCustomizableOptions'
@@ -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<
@@ -23,7 +25,7 @@
 				sectionTitle?: string
 				showFilePreview?: boolean
 				infoText?: string
-				headingLevel?: number
+				headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 				locales?: typeof defaultLocales
 			}
 		>(),
@@ -42,6 +44,13 @@
 		(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: () => [],
@@ -137,13 +146,12 @@
 		class="sy-upload-workflow white"
 	>
 		<slot name="title">
-			<div
-				:aria-level="props.headingLevel"
-				role="heading"
-				class="text-h6 mb-2"
+			<SyHeading
+				:level="props.headingLevel"
+				:class="headingLevel === 4 ? 'text-h6 mb-2' : 'mb-2'"
 			>
 				{{ title }}
-			</div>
+			</SyHeading>
 		</slot>
 
 		<FileList
@@ -175,24 +183,32 @@
 
 		<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"
@@ -201,7 +217,7 @@
 					:rules="[isRequired]"
 					color="primary"
 				/>
-			</VForm>
+			</div>
 
 			<FilePreview
 				v-if="showFilePreview"
@@ -212,6 +228,7 @@
 
 		<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>