@cnamts/synapse 1.0.22 → 1.0.24

package/src/components/DatePicker/composables/useDateValidation.ts

@@ -29,7 +29,7 @@ export const useDateValidation = (options: {
 	// Fonctions de validation
 	clearValidation: () => void
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Règles personnalisées
-	validateField: (value: any, rules?: any[], warningRules?: any[]) => ValidationResult
+	validateField: (value: any, rules?: any[], warningRules?: any[]) => ValidationResult | Promise<ValidationResult>
 
 	// Références aux messages
 	errors: Ref<string[]>
@@ -60,7 +60,7 @@ export const useDateValidation = (options: {
    * @param forceValidation - Force la validation même si isUpdatingFromInternal est vrai
    * @returns Résultat de la validation
    */
-	const validateDates = (forceValidation = false): ValidationResult => {
+	const validateDates = (forceValidation = false): ValidationResult | Promise<ValidationResult> => {
 		const currentCustomRules = unref(customRules)
 		const currentCustomWarningRules = unref(customWarningRules)
 
@@ -152,64 +152,65 @@ export const useDateValidation = (options: {
 			? selectedDates.value.filter(Boolean) // Filtrer les valeurs null
 			: [selectedDates.value]
 
-		let isValid = true
-
-		// Valider chaque date
-		if (shouldDisplayErrors) {
-			datesToValidate.forEach((date) => {
-				if (!date) return // Ignorer les dates null
-
-				const result = validateField(
-					date,
-					currentCustomRules,
-					currentCustomWarningRules,
-				)
-				if (result.hasError) {
-					isValid = false
-				}
-			})
+		const finalizeValidation = (isValid: boolean): ValidationResult => {
+			let finalIsValid = isValid
 
 			// Vérifier la validité de la plage de dates si en mode plage
 			if (displayRange && Array.isArray(selectedDates.value) && selectedDates.value.length >= 2) {
-				// Récupérer les dates de début et de fin
 				const startDate = selectedDates.value[0]
 				const endDate = selectedDates.value[selectedDates.value.length - 1]
 
-				// Vérifier si les deux dates sont présentes et si la plage est valide
 				if (startDate && endDate && startDate.getTime() > endDate.getTime()) {
-					// La date de fin est antérieure à la date de début
 					const rangeError = DATE_PICKER_MESSAGES.ERROR_END_BEFORE_START
 					if (!errors.value.includes(rangeError)) {
 						errors.value.push(rangeError)
-						isValid = false
+						finalIsValid = false
 					}
 				}
-				// Utiliser également la validation du composable useDateRangeValidation
 				else if (!currentRangeIsValid.value) {
 					const rangeError = getRangeValidationError.value
 					if (rangeError && !errors.value.includes(rangeError)) {
 						errors.value.push(rangeError)
-						isValid = false
+						finalIsValid = false
 					}
 				}
 			}
 
-			// Dédoublonner les messages (au cas où plusieurs dates auraient les mêmes messages)
 			errors.value = [...new Set(errors.value)]
 			warnings.value = [...new Set(warnings.value)]
 			successes.value = [...new Set(successes.value)]
+
+			return {
+				hasError: !finalIsValid,
+				hasWarning: warnings.value.length > 0,
+				hasSuccess: successes.value.length > 0 && finalIsValid && warnings.value.length === 0,
+				state: {
+					errors: errors.value,
+					warnings: warnings.value,
+					successes: successes.value,
+				},
+			}
 		}
 
-		return {
-			hasError: !isValid,
-			hasWarning: warnings.value.length > 0,
-			hasSuccess: successes.value.length > 0 && isValid && warnings.value.length === 0,
-			state: {
-				errors: errors.value,
-				warnings: warnings.value,
-				successes: successes.value,
-			},
+		if (!shouldDisplayErrors) {
+			return finalizeValidation(true)
 		}
+
+		const validationResults = datesToValidate
+			.filter(Boolean)
+			.map(date => validateField(date, currentCustomRules, currentCustomWarningRules))
+
+		if (validationResults.some(result => result instanceof Promise)) {
+			return Promise
+				.all(validationResults.map(result => Promise.resolve(result)))
+				.then((resolvedResults) => {
+					const hasError = resolvedResults.some(result => result.hasError)
+					return finalizeValidation(!hasError)
+				})
+		}
+
+		const hasError = (validationResults as ValidationResult[]).some(result => result.hasError)
+		return finalizeValidation(!hasError)
 	}
 
 	/**
@@ -217,7 +218,7 @@ export const useDateValidation = (options: {
    *
    * @returns Résultat de la validation
    */
-	const validateOnSubmit = (): ValidationResult => {
+	const validateOnSubmit = (): ValidationResult | Promise<ValidationResult> => {
 		return validateDates(true)
 	}
 

package/src/components/DatePicker/composables/useInputBlurHandler.ts

@@ -28,7 +28,7 @@ export const useInputBlurHandler = (options: {
 	parseDate: (dateStr: string, format: string) => Date | null
 	formatDate: (date: Date, format: string) => string
 	updateModel: (value: DateValue) => void
-	validateManualInput: (value: string) => boolean
+	validateManualInput: (value: string) => boolean | Promise<boolean>
 
 	// Émetteurs d'événements
 	emitBlur: () => void
@@ -54,7 +54,7 @@ export const useInputBlurHandler = (options: {
 	/**
 	 * Gère la perte de focus du champ de saisie de date
 	 */
-	const handleInputBlur = () => {
+	const handleInputBlur = async () => {
 		// Émettre l'événement blur
 		emitBlur()
 
@@ -155,7 +155,7 @@ export const useInputBlurHandler = (options: {
 		// Note: La vérification du type string a déjà été faite plus haut
 		// et on retourne si ce n'est pas une chaîne, donc ici displayFormattedDate.value est forcément une chaîne
 		if (displayFormattedDate.value) {
-			validateManualInput(displayFormattedDate.value || '')
+			await Promise.resolve(validateManualInput(displayFormattedDate.value || ''))
 		}
 	}
 

package/src/components/DatePicker/composables/useManualDateValidation.ts

@@ -31,7 +31,7 @@ export const useManualDateValidation = (options: {
 	validateDateFormat: (dateStr: string) => { isValid: boolean, message: string }
 	isDateComplete: (value: string) => boolean
 	parseDate: (dateStr: string, format: string) => Date | null
-	validateField: (value: unknown, rules?: CustomRule[], warningRules?: CustomRule[]) => ValidationResult
+	validateField: (value: unknown, rules?: CustomRule[], warningRules?: CustomRule[]) => ValidationResult | Promise<ValidationResult>
 }) => {
 	const {
 		format,
@@ -57,7 +57,7 @@ export const useManualDateValidation = (options: {
 	 * @param value - Chaîne de date à valider
 	 * @returns Booléen indiquant si la saisie est valide
 	 */
-	const validateManualInput = (value: string): boolean => {
+	const validateManualInput = (value: string): boolean | Promise<boolean> => {
 		// Réinitialiser la validation
 		clearValidation()
 
@@ -129,6 +129,10 @@ export const useManualDateValidation = (options: {
 				safeWarningRules,
 			)
 
+			if (result instanceof Promise) {
+				return result.then(resolvedResult => !resolvedResult.hasError)
+			}
+
 			return !result.hasError
 		}
 

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

@@ -1,10 +1,78 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as DiacriticPicker from '../DiacriticPicker.stories';
-import '@/stories/styles/shared.css';
+import { Meta, Story } from '@storybook/blocks';
+import * as DiacriticPickerStories from '../DiacriticPicker.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+	AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={DiacriticPicker} />
+<Meta of={DiacriticPickerStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="DiacriticPicker"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/"
+>
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique et rôles ARIA">
+			<ul>
+				<li><strong>Bouton déclencheur</strong> : Utilise <code>aria-controls</code> et <code>aria-haspopup="dialog"</code> pour indiquer la relation avec le dialogue.</li>
+				<li><strong>État du dialogue</strong> : <code>aria-expanded</code> reflète l'état d'ouverture/fermeture du dialogue.</li>
+				<li><strong>Rôle du dialogue</strong> : <code>role="dialog"</code> et <code>aria-modal="true"</code> sur le VDialog.</li>
+				<li><strong>Labellisation</strong> : <code>aria-labelledby</code> lie le dialogue au bouton déclencheur.</li>
+				<li><strong>Groupes de caractères</strong> : Utilisation de <code>role="group"</code> avec <code>aria-label</code> pour organiser les caractères minuscules et majuscules.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation clavier et focus">
+			<ul>
+				<li><strong>Gestion du focus</strong> : Le focus retourne automatiquement au champ après insertion d'un caractère.</li>
+				<li><strong>Position du curseur</strong> : Maintien et restauration précise de la position du curseur après insertion.</li>
+				<li><strong>Focus trap</strong> : <code>retain-focus="false"</code> sur le VDialog.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Styles et contrastes">
+			<ul>
+				<li><strong>Dialogue</strong> : Fond <code>grey-lighten-2</code> sur le VCard.</li>
+				<li><strong>Boutons du dialogue</strong> : Taille "small" avec classe <code>ma-1</code>.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🔧" title="Accessibilité du champ associé">
+			<ul>
+				<li><strong>Labellisation automatique</strong> : Ajout de <code>aria-label</code> si le champ n'a ni <code>aria-label</code> ni <code>aria-labelledby</code>.</li>
+				<li><strong>Détection du champ</strong> : Recherche automatique des inputs/textarea dans le slot via <code>getNativeInput()</code>.</li>
+				<li><strong>Wrapper</strong> : Conteneur avec <code>role="textbox"</code> et <code>tabindex="0"</code>.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="DiacriticPicker">
+		<Story of={DiacriticPickerStories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournissez un <code>inputAriaLabel</code> descriptif si le champ n'a pas de label visible.</li>
+			<li>Personnalisez <code>btnTitle</code> pour refléter les caractères utilisés.</li>
+			<li>Adaptez la liste des <code>diacritics</code> selon les besoins linguistiques.</li>
+			<li>Vérifiez que les caractères affichés dans <code>btnTitle</code> sont inclus dans la liste <code>diacritics</code>.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Dialogues modaux</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard-operation.html" target="_blank" rel="noopener noreferrer">WCAG : Opération au clavier</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#7.1" target="_blank" rel="noopener noreferrer">RGAA : Consultation par navigation clavier</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9" target="_blank" rel="noopener noreferrer">RGAA : Structuration de l'information</a></li>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/button/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Boutons</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,25 @@
+// @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 DownloadBtn from '../DownloadBtn.vue'
+
+describe('DownloadBtn – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(DownloadBtn, {
+			props: {
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- deso
+				filePromise: () => Promise.resolve({ data: new Blob(), status: 200, statusText: 'OK', headers: {}, config: {} as any }),
+				fallbackFilename: 'file.pdf',
+			},
+			slots: {
+				default: 'Télécharger',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DownloadBtn – default state')
+	})
+})

package/src/components/ErrorPage/ErrorPage.stories.ts

@@ -75,12 +75,53 @@ export const WithLink: Story = {
 	},
 }
 
-export const WithRole: Story = {
-	args: {
-		...Default.args,
-		role: 'region',
-		uniqueId: 'error-page-region',
+export const CustomIllustration: Story = {
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage>
+                            <template #illustration>
+                                <div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
+                                    <span style="font-weight: 700; color: #0D419A;">Illustration</span>
+                                </div>
+                            </template>
+                        </ErrorPage>
+                    </div>
+                </template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
+			},
+		],
 	},
+	render: () => ({
+		components: { ErrorPage },
+		template: `
+            <ErrorPage>
+                <template #illustration>
+                    <div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
+                        <span style="font-weight: 700; color: #0D419A;">Illustration</span>
+                    </div>
+                </template>
+            </ErrorPage>
+        `,
+	}),
+}
+
+export const SlotAction: Story = {
 	decorators: [
 		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
 	],
@@ -91,14 +132,19 @@ export const WithRole: Story = {
 				code: `
                 <template>
                     <div style="padding: 20px; background: rgb(231, 236, 245)">
-                        <ErrorPage
-                            role="region"
-                            unique-id="error-page-region"
-                        />
+                        <ErrorPage :hide-btn="true">
+                            <template #action>
+                                <div style="display: flex; gap: 8px; margin-top: 16px;">
+                                    <VBtn href="/" color="primary">Retour à l'accueil</VBtn>
+                                    <VBtn variant="outlined" color="primary">Déconnexion</VBtn>
+                                </div>
+                            </template>
+                        </ErrorPage>
                     </div>
                 </template>
                 `,
-			}, {
+			},
+			{
 				name: 'Script',
 				code: `
                 <script setup lang="ts">
@@ -108,9 +154,22 @@ export const WithRole: Story = {
 			},
 		],
 	},
+	render: () => ({
+		components: { ErrorPage },
+		template: `
+            <ErrorPage :hide-btn="true">
+                <template #action>
+                    <div style="display: flex; gap: 8px; margin-top: 16px;">
+                        <VBtn href="/" color="primary">Retour à l'accueil</VBtn>
+                        <VBtn variant="outlined" color="primary">Déconnexion</VBtn>
+                    </div>
+                </template>
+            </ErrorPage>
+        `,
+	}),
 }
 
-export const CustomIllustration: Story = {
+export const SlotAdditionalContent: Story = {
 	decorators: [
 		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
 	],
@@ -122,10 +181,10 @@ export const CustomIllustration: Story = {
                 <template>
                     <div style="padding: 20px; background: rgb(231, 236, 245)">
                         <ErrorPage>
-                            <template #illustration>
-                                <div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
-                                    <span style="font-weight: 700; color: #0D419A;">Illustration</span>
-                                </div>
+                            <template #additional-content>
+                                <p style="text-align: center; color: #555;">
+                                    Si le problème persiste, veuillez contacter le support technique.
+                                </p>
                             </template>
                         </ErrorPage>
                     </div>
@@ -146,12 +205,47 @@ export const CustomIllustration: Story = {
 		components: { ErrorPage },
 		template: `
             <ErrorPage>
-                <template #illustration>
-                    <div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
-                        <span style="font-weight: 700; color: #0D419A;">Illustration</span>
-                    </div>
+                <template #additional-content>
+                    <p style="text-align: center; color: #555;">
+                        Si le problème persiste, veuillez contacter le support technique.
+                    </p>
                 </template>
             </ErrorPage>
         `,
 	}),
 }
+
+export const WithRole: Story = {
+	args: {
+		...Default.args,
+		role: 'region',
+		uniqueId: 'error-page-region',
+	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage
+                            role="region"
+                            unique-id="error-page-region"
+                        />
+                    </div>
+                </template>
+                `,
+			}, {
+				name: 'Script',
+				code: `
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
+			},
+		],
+	},
+}

package/src/components/ErrorPage/ErrorPage.vue

@@ -15,7 +15,7 @@
 		btnHref?: string
 		btnLink?: RouteRecordRaw | string
 		hideBtn?: boolean
-		headingLevel: 1 | 2 | 3 | 4 | 5 | 6
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 		uniqueId?: string
 		role?: PageAriaRole
 	}>()
@@ -39,7 +39,8 @@
 		:btn-href="props.btnHref"
 		:btn-link="props.btnLink"
 		:hide-btn="props.hideBtn"
-		:unique-id="props.uniqueId"
+		:unique-id="props.uniqueId ?? undefined"
+		:heading-level="props.headingLevel"
 		:role="props.role"
 	>
 		<template
@@ -55,6 +56,20 @@
 				>
 			</slot>
 		</template>
+
+		<template
+			v-if="$slots.action"
+			#action
+		>
+			<slot name="action" />
+		</template>
+
+		<template
+			v-if="$slots['additional-content']"
+			#additional-content
+		>
+			<slot name="additional-content" />
+		</template>
 	</StatusPage>
 </template>
 

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

@@ -18,4 +18,21 @@ describe('ErrorPage – accessibility (axe)', () => {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no obvious axe violations with #action slot', async () => {
+		const wrapper = mount(ErrorPage, {
+			attachTo: document.body,
+			props: { headingLevel: 1, hideBtn: true },
+			slots: {
+				action: '<button>Retour à l\'accueil</button>',
+			},
+		})
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'ErrorPage – action slot', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
 })

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils'
 import ErrorPage from '../ErrorPage.vue'
 
 describe('ErrorPage', () => {
@@ -8,4 +8,24 @@ describe('ErrorPage', () => {
 
 		expect(wrapper.html()).toMatchSnapshot()
 	})
+
+	it('renders #action slot content', () => {
+		const wrapper = mount(ErrorPage, {
+			slots: {
+				action: '<button>Retour à l\'accueil</button>',
+			},
+		})
+
+		expect(wrapper.html()).toContain('Retour à l\'accueil')
+	})
+
+	it('renders #additional-content slot content', () => {
+		const wrapper = mount(ErrorPage, {
+			slots: {
+				'additional-content': '<p>Contenu additionnel</p>',
+			},
+		})
+
+		expect(wrapper.html()).toContain('Contenu additionnel')
+	})
 })

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

@@ -9,6 +9,5 @@ exports[`ErrorPage > renders correctly 1`] = `
   hidebtn="false"
   message="Une erreur est survenue de notre côté, veuillez réessayer plus tard."
   pagetitle="Une erreur est survenue"
-  uniqueid=""
 ></status-page-stub>
 `;

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

@@ -0,0 +1,23 @@
+// @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 ExternalLinks from '../ExternalLinks.vue'
+
+describe('ExternalLinks – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(ExternalLinks, {
+			props: {
+				items: [
+					{ text: 'ameli.fr', href: 'https://ameli.fr' },
+					{ text: 'Legifrance', href: 'https://legifrance.gouv.fr' },
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'ExternalLinks – default state')
+	})
+})