@cnamts/synapse 1.0.23 → 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/HeaderBar/HeaderBar.stories.ts

@@ -8,6 +8,8 @@ import SubHeader from '../SubHeader/SubHeader.vue'
 import UserMenuBtn from '../UserMenuBtn/UserMenuBtn.vue'
 import HeaderBar from './HeaderBar.vue'
 import SyIcon from '../Customs/SyIcon/SyIcon.vue'
+import { useTheme } from 'vuetify'
+import { addons } from '@storybook/manager-api'
 
 const meta = {
 	title: 'Composants/Structure/HeaderBar',
@@ -805,12 +807,22 @@ export const AppendSlot: Story = {
 		return {
 			components: { HeaderBar },
 			setup() {
-				return { args }
+				const theme = useTheme()
+				const channel = addons.getChannel()
+				channel.on('storybook-theme-change', (theme) => {
+					theme.name.value = theme
+				})
+				return { args, HeaderBar, theme }
 			},
 			template: `
 				<HeaderBar v-bind="args">
 					<template #append>
-						<div style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
+						<div v-if="['ap', 'ap2026'].includes(theme.name.value)" style="max-width: 1712px; margin: 0 auto; min-height: 48px; background-color: #0084B2; display: flex; align-items: center; justify-content: center;" class="text-white">
+							<div>
+								TITRE DU SERVICE
+							</div>
+						</div>
+						<div v-else style="max-width: 1712px; margin: 0 auto; height: 26px; background-color: #0c419a;" class="pl-md-14 pl-4 text-white">
 							<div>
 								contenu
 							</div>

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

@@ -1,17 +1,79 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../Logo.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Story } from '@storybook/blocks';
+import * as LogoStories from '../Logo.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={Stories} />
+<Meta of={LogoStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="Logo"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<div>Rapport d'audit manuel : <a href="/audits/Logo.xlsx" style={{ color: '#0C41BD' }}>Voir le rapport</a></div>
+		<div style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>
+			Aucune correction nécessaire.
+		</div>
+	</AuditSection>
+	
+	<CriteriaSection>
+		<CriteriaCard icon="🏷️" title="Structure sémantique et rôles">
+			<ul>
+				<li><strong>Rôle image</strong> : Utilise <code>role="img"</code> sur l'élément SVG.</li>
+				<li><strong>Focus</strong> : <code>focusable="false"</code> pour éviter le focus sur le SVG.</li>
+				<li><strong>Labellisation</strong> : <code>aria-label</code> avec label calculé automatiquement ou personnalisé.</li>
+				<li><strong>Avatar</strong> : <code>aria-hidden="true"</code> quand <code>avatar=true</code>.</li>
+				<li><strong>Éléments décoratifs</strong> : <code>aria-hidden="true"</code> et <code>role="presentation"</code> sur les groupes de texte.</li>
+			</ul>
+		</CriteriaCard>
 
+		<CriteriaCard icon="📝" title="Gestion du label">
+			<ul>
+				<li><strong>Label personnalisé</strong> : Prop <code>ariaLabel</code> prioritaire sur le calcul automatique.</li>
+				<li><strong>Label avatar</strong> : Chaîne vide pour les avatars (illustration décorative).</li>
+				<li><strong>Label calculé</strong> : Construction dynamique avec organism, assurance maladie, signature selon les props.</li>
+				<li><strong>Risque pro</strong> : Label spécifique quand <code>risquePro=true</code>.</li>
+			</ul>
+		</CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/Logo.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Aucune correction nécéssaire.</p>
-	</div>
+		<CriteriaCard icon="🎨" title="Styles et adaptation">
+			<ul>
+				<li><strong>Couleur</strong> : Adaptation automatique avec <code>dark</code> (blanc/sombre).</li>
+				<li><strong>Dimensions</strong> : Mapping selon taille et mode avatar.</li>
+				<li><strong>ViewBox</strong> : Ajustement dynamique selon les éléments affichés.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
 
+	<DemoSection componentName="Logo">
+		<Story of={LogoStories.Default} />
+	</DemoSection>
 
+	<BestPracticesSection>
+		<ul>
+			<li>Utilisez <code>avatar=true</code> pour les logos décoratifs sans signification sémantique.</li>
+			<li>Fournissez un <code>ariaLabel</code> personnalisé pour les contextes spécifiques.</li>
+			<li>Adaptez la taille avec <code>size</code> selon le contexte d'utilisation.</li>
+			<li>Utilisez <code>dark=true</code> sur les fonds sombres pour maintenir le contraste.</li>
+			<li>Cachez la signature (<code>hideSignature</code>) dans les espaces contraints.</li>
+			<li>Cachez l'organisme (<code>hideOrganism</code>) si le contexte est déjà clair.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html" target="_blank" rel="noopener noreferrer">WCAG : Contenu non textuel</a></li>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/img/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Images</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2" target="_blank" rel="noopener noreferrer">RGAA : Images décoratives</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.3" target="_blank" rel="noopener noreferrer">RGAA : Images porteuses d'informations</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -1,12 +1,88 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../LogoBrandSection.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Story } from '@storybook/blocks';
+import * as LogoBrandSectionStories from '../LogoBrandSection.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={Stories} />
+<Meta of={LogoBrandSectionStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="LogoBrandSection"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<div>Rapport d'audit manuel : <a href="/audits/LogoBrandSection.xlsx" style={{ color: '#0C41BD' }}>Voir le rapport</a></div>
+		<div style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>
+			Aucune correction nécessaire.
+		</div>
+	</AuditSection>
+	
+	<CriteriaSection>
+		<CriteriaCard icon="🔗" title="Liens et navigation">
+			<ul>
+				<li><strong>Composant dynamique</strong> : Détecte automatiquement <code>router-link</code>, <code>&lt;a&gt;</code> ou <code>&lt;div&gt;</code> selon <code>homeLink</code>.</li>
+				<li><strong>Label du lien principal</strong> : <code>ariaLabel</code> concaténé avec " Retour vers accueil du site".</li>
+				<li><strong>Label du logo secondaire</strong> : Calculé avec <code>homeLinkPrefix</code> et <code>alt</code> du logo.</li>
+				<li><strong>Lien secondaire</strong> : Uniquement pour les thèmes <code>ameli-pro</code> et <code>ameli</code>.</li>
+			</ul>
+		</CriteriaCard>
 
-<br />
+		<CriteriaCard icon="📝" title="Structure sémantique et titres">
+			<ul>
+				<li><strong>Titre principal</strong> : Utilise <code>SyHeading</code> avec <code>headingLevelTitle</code> (1-6).</li>
+				<li><strong>Sous-titre</strong> : Utilise <code>SyHeading</code> avec <code>headingLevelSubtitle</code> (1-4).</li>
+				<li><strong>Contenu conditionnel</strong> : Affichage du sous-titre uniquement si titre présent et non-mobile.</li>
+				<li><strong>Texte structuré</strong> : Support des titres avec <code>text</code> et <code>highlight</code>.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Éléments décoratifs et styles">
+			<ul>
+				<li><strong>Séparateur SVG</strong> : <code>focusable="false"</code> et <code>aria-hidden="true"</code>.</li>
+				<li><strong>Couleur du séparateur</strong> : Adaptée selon le thème (secondaire, primaire, #cd545b).</li>
+				<li><strong>Dimensions adaptatives</strong> : Responsive selon <code>mobileVersion</code> et présence logo secondaire.</li>
+				<li><strong>Logo principal</strong> : Props transmises au composant Logo (avatar, taille, signature).</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🖼️" title="Images et logos secondaires">
+			<ul>
+				<li><strong>Logo secondaire</strong> : Balise <code>&lt;img&gt;</code> avec attribut <code>alt</code> descriptif.</li>
+				<li><strong>Mapping des thèmes</strong> : Association automatique du logo selon <code>secondaryLogoMapping</code>.</li>
+				<li><strong>Avatar conditionnel</strong> : Mode avatar si <code>reduceLogo</code> et logo secondaire présent.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="LogoBrandSection">
+		<Story of={LogoBrandSectionStories.Default} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournissez toujours un <code>homeLink.ariaLabel</code> descriptif pour le lien vers l'accueil.</li>
+			<li>Choisissez des niveaux de titres cohérents avec la hiérarchie de votre page.</li>
+			<li>Utilisez <code>mobileVersion</code> pour adapter l'affichage sur petits écrans.</li>
+			<li>Activez <code>reduceLogo</code> dans les espaces contraints ou avec logo secondaire.</li>
+			<li>Vérifiez que les <code>serviceTitle</code> et <code>serviceSubTitle</code> sont pertinents pour le contexte.</li>
+			<li>Testez les différents thèmes pour vous assurer que les contrastes sont maintenus.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html" target="_blank" rel="noopener noreferrer">WCAG : Contenu non textuel</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html" target="_blank" rel="noopener noreferrer">WCAG : Titres et étiquettes</a></li>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/link/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Liens</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#9.1" target="_blank" rel="noopener noreferrer">RGAA : Structuration de l'information</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.6" target="_blank" rel="noopener noreferrer">RGAA : Liens</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import LunarCalendar from '../LunarCalendar.vue'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 
 describe('LunarCalendar', () => {
 	it('renders correctly', () => {
@@ -56,6 +56,7 @@ describe('LunarCalendar', () => {
 			const input = wrapper.find('input')
 			await input.setValue('10/19/1995')
 			await input.trigger('blur')
+			await flushPromises()
 
 			expect(wrapper.html()).toContain('L\'année doit être supérieure ou égale à 1996.')
 		})
@@ -72,6 +73,7 @@ describe('LunarCalendar', () => {
 			const input = wrapper.find('input')
 			await input.setValue('10/19/1995')
 			await input.trigger('blur')
+			await flushPromises()
 
 			expect(wrapper.html()).toContain('L\'année doit être inférieure ou égale à 1994.')
 		})

package/src/components/LunarCalendar/useLunarCalendarValidation.ts

@@ -20,13 +20,12 @@ export function useLunarCalendarValidation(
 	)
 
 	const validation = useValidation({
-		customRules: rules.value,
 		showSuccessMessages: successMessage !== undefined,
 		fieldIdentifier: toValue(label),
 	})
 
-	function validateOnSubmit() {
-		const result = validation.validateField(
+	async function validateOnSubmit() {
+		const result = await validation.validateField(
 			modelValue.value,
 			rules.value,
 		)
@@ -36,8 +35,8 @@ export function useLunarCalendarValidation(
 
 	useValidatable(validateOnSubmit, validation.clearValidation)
 
-	function validate() {
-		return validation.validateField(
+	async function validate() {
+		return await validation.validateField(
 			modelValue.value,
 			rules.value,
 		)

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

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { describe, afterEach, expect, it, vi } from 'vitest'
 import MonthPicker from '../MonthPicker.vue'
 import { nextTick } from 'vue'
@@ -1238,6 +1238,7 @@ describe('mounthpicker', () => {
 
 			const yearButton = wrapper.findComponent({ name: 'YearSelector' }).find('.year-2025')
 			await yearButton.trigger('click')
+			await flushPromises()
 
 			expect(wrapper.find('.v-field--error').exists()).toBe(true)
 			expect(wrapper.find('.v-input__details').text()).toBe('The year must be 2026 or later.')

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

@@ -2169,7 +2169,7 @@ exports[`mounthpicker > should open the menu when clicking on the input 1`] = `
   <div class="visual-picker-header">
     <div
       class="visual-picker-header__title"
-      id="v-3-title"
+      id="v-4-title"
     >
       Sélectionner un mois
     </div>
@@ -2439,20 +2439,20 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
                 v-field-label
                 v-label
               "
-              id="input-v-1-label"
+              id="input-v-2-label"
             >
               <!---->
               Début du projet
             </label>
             <!---->
             <input
-              aria-describedby="input-v-1-messages"
+              aria-describedby="input-v-2-messages"
               aria-label="Début du projet"
-              aria-labelledby="input-v-1-label"
+              aria-labelledby="input-v-2-label"
               autocomplete="off"
               class="v-field__input"
               direction="horizontal"
-              id="input-v-1"
+              id="input-v-2"
               size="1"
               title="Début du projet"
               type="text"
@@ -2477,7 +2477,7 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
                   v-field-label--floating
                   v-label
                 "
-                for="input-v-1"
+                for="input-v-2"
               >
                 <!---->
                 Début du projet
@@ -2521,7 +2521,7 @@ exports[`mounthpicker > should render mounthpicker 1`] = `
       <div
         aria-live="polite"
         class="v-input__details"
-        id="input-v-1-messages"
+        id="input-v-2-messages"
         role="alert"
       >
         <transition-group-stub

package/src/components/NirField/NirField.stories.ts

@@ -1332,6 +1332,10 @@ export const WithCustomLocale: Story = {
 		required: true,
 		showSuccessMessages: true,
 		customLocale: {
+			numberLabel: 'Numéro de sécurité sociale',
+			keyLabel: 'Clé',
+			numberHint: '',
+			keyHint: '',
 			errorRequiredNumber: 'Veuillez renseigner votre numéro de sécurité sociale (13 caractères).',
 			errorInvalidNumber: 'Format NIR non reconnu, merci de vérifier.',
 			errorRequiredKey: 'La clé (2 chiffres) est requise.',