@cnamts/synapse 1.0.23 → 1.0.25

package/src/components/NirField/NirField.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 	import { ref, watch, computed, nextTick, toRef, onMounted, useId, onBeforeUnmount } from 'vue'
 	import { vMaska } from 'maska/vue'
-	import { checkNIR, isNIRKeyValid } from './nirValidation'
 	import SyTextField from '../Customs/SyTextField/SyTextField.vue'
 	import { locales } from './locales'
-	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
-	import { useValidatable } from '@/composables/validation/useValidatable'
+	import { useValidation } from '@/composables/unifyValidation/useValidation'
+	import { useNirValidation, type NirValidationProps } from './useNirValidation'
 
 	const props = withDefaults(defineProps<{
 		modelValue?: string | undefined | null
@@ -17,22 +16,13 @@
 		keyTooltip?: string
 		nirTooltipPosition?: 'prepend' | 'append'
 		keyTooltipPosition?: 'prepend' | 'append'
-		required?: boolean
 		displayAsterisk?: boolean
-		customNumberRules?: ValidationRule[]
-		customKeyRules?: ValidationRule[]
-		customNumberWarningRules?: ValidationRule[]
-		customKeyWarningRules?: ValidationRule[]
-		customRulesPrecedence?: boolean
-		showSuccessMessages?: boolean
 		width?: string
 		bgColor?: string
-		disabled?: boolean
 		density?: 'default' | 'comfortable' | 'compact'
 		hideDetails?: boolean | 'auto'
 		hideSpinButtons?: boolean
 		placeholder?: string
-		readonly?: boolean
 		variant?: 'filled' | 'outlined' | 'plain' | 'underlined' | 'solo'
 		clearable?: boolean
 		counter?: boolean | number | string
@@ -43,14 +33,15 @@
 		disableErrorHandling?: boolean
 		nirType?: 'simple' | 'complexe'
 		withoutFieldset?: boolean
-		customLocale?: Partial<Record<keyof typeof locales, string>>
-	}>(), {
+		customLocale?: Record<keyof typeof locales, string>
+	} & NirValidationProps>(), {
 		modelValue: undefined,
 		label: 'Identifiant d\'assuré',
 		numberLabel: 'Numéro de sécurité sociale',
 		keyLabel: 'Clé de validation',
 		displayKey: true,
 		nirTooltip: undefined,
+		keyRules: () => [],
 		keyTooltip: undefined,
 		nirTooltipPosition: 'append',
 		keyTooltipPosition: 'append',
@@ -68,6 +59,7 @@
 		density: 'default',
 		hideDetails: false,
 		hideSpinButtons: false,
+		isValidateOnBlur: true,
 		placeholder: undefined,
 		readonly: false,
 		variant: 'outlined',
@@ -78,16 +70,10 @@
 		persistentHint: false,
 		persistentPlaceholder: false,
 		disableErrorHandling: false,
+		numberRules: () => [],
 		nirType: 'simple',
 		withoutFieldset: false,
-		customLocale: () => ({
-			errorRequiredNumber: locales.errorRequiredNumber,
-			errorInvalidNumber: locales.errorInvalidNumber,
-			errorRequiredKey: locales.errorRequiredKey,
-			errorInvalidKey: locales.errorInvalidKey,
-			successNumberValid: locales.successNumberValid,
-			successKeyValid: locales.successKeyValid,
-		} as Partial<Record<keyof typeof locales, string>>),
+		customLocale: () => locales,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -187,112 +173,6 @@
 		}
 	})
 
-	// Initialisation des validations
-	const numberValidation = useValidation({
-		showSuccessMessages: props.showSuccessMessages,
-		fieldIdentifier: props.numberLabel,
-		disableErrorHandling: props.disableErrorHandling,
-	})
-
-	const keyValidation = useValidation({
-		showSuccessMessages: props.showSuccessMessages,
-		fieldIdentifier: props.keyLabel,
-		disableErrorHandling: props.disableErrorHandling,
-	})
-
-	// Règles de validation
-	const defaultNumberRules = computed(() => {
-		const rules: ValidationRule[] = []
-		if (props.readonly && props.disabled) return
-		if (props.required) {
-			rules.push({
-				type: 'required',
-				options: {
-					message: props.customLocale.errorRequiredNumber,
-					fieldIdentifier: props.numberLabel,
-				},
-			})
-		}
-
-		// Ajout des règles personnalisées avec prévalence si demandé
-		if (props.customRulesPrecedence && props.customNumberRules && props.customNumberRules.length > 0) {
-			rules.push(...props.customNumberRules.map(rule => ({
-				...rule,
-				options: rule.options || {},
-			})))
-		}
-
-		// Règle de validation standard du NIR
-		rules.push({
-			type: 'custom',
-			options: {
-				validate: (value: string) => {
-					if (!value) return true
-					// Ne valider que si tous les caractères sont saisis
-					if (value.length < 13) {
-						return props.customLocale.errorInvalidNumber || locales.errorInvalidNumber
-					}
-					const result = checkNIR(value, props.nirType)
-					return result ? true : props.customLocale.errorInvalidNumber || locales.errorInvalidNumber
-				},
-				message: props.customLocale.errorInvalidNumber,
-				successMessage: props.customLocale.successNumberValid,
-				fieldIdentifier: props.numberLabel,
-			},
-		})
-
-		// Ajout des règles personnalisées sans prévalence (comportement par défaut)
-		if (!props.customRulesPrecedence && props.customNumberRules && props.customNumberRules.length > 0) {
-			rules.push(...props.customNumberRules.map(rule => ({
-				...rule,
-				options: rule.options || {},
-			})))
-		}
-
-		return rules
-	})
-
-	const defaultKeyRules = computed(() => {
-		const rules: ValidationRule[] = []
-		if (props.readonly && props.disabled) return
-		if (props.required) {
-			rules.push({
-				type: 'required',
-				options: {
-					message: props.customLocale.errorRequiredKey,
-					fieldIdentifier: props.keyLabel,
-				},
-			})
-		}
-
-		const validateKey = (value: string) => {
-			if (!value) return true
-			if (!unmaskedNumberValue.value) return true
-			const fullNir = unmaskedNumberValue.value + value
-			return isNIRKeyValid(fullNir)
-		}
-
-		// Ajout des règles personnalisées
-		if (props.customKeyRules) {
-			rules.push(...props.customKeyRules)
-		}
-
-		// Ajout de la règle de validation par défaut si pas de règle personnalisée avec validation de clé
-		if (!props.customKeyRules?.some(rule => rule.options.validate)) {
-			rules.push({
-				type: 'custom',
-				options: {
-					validate: validateKey,
-					message: props.customLocale.errorInvalidKey,
-					successMessage: props.customLocale.successKeyValid,
-					fieldIdentifier: props.keyLabel,
-				},
-			})
-		}
-
-		return rules
-	})
-
 	// Synchronisation avec modelValue
 	watch(modelValueRef, (newValue) => {
 		// Ignorer les mises à jour internes pour éviter les boucles infinies
@@ -343,80 +223,48 @@
 		})
 	}
 
-	// État pour suivre si une validation est en cours
-	const isValidating = ref(false)
-	const shouldValidateOnBlur = ref(false)
-
-	// Fonction utilitaire pour créer une fonction debounced
-	const createDebouncedFunction = <T extends (...args: unknown[]) => void>(fn: T, delay: number) => {
-		let timeout: number | undefined
-		return (...args: Parameters<T>) => {
-			window.clearTimeout(timeout)
-			timeout = window.setTimeout(() => fn(...args), delay)
-		}
-	}
-
-	// Validation des champs
-	const validateFields = async (onBlur = false) => {
-		// Éviter les validations redondantes
-		if (isValidating.value) {
-			shouldValidateOnBlur.value = shouldValidateOnBlur.value || onBlur
-			return true
-		}
-
-		isValidating.value = true
-
-		// Valider le numéro
-		const numberResult = numberValidation.validateField(
-			unmaskedNumberValue.value,
-			defaultNumberRules.value,
-			// N'appliquer les warnings que si le numéro est complet
-			unmaskedNumberValue.value?.length === 13 ? props.customNumberWarningRules : [],
-		)
-
-		// Valider la clé si elle est affichée
-		let keyResult = { hasError: false }
-		if (props.displayKey) {
-			keyResult = keyValidation.validateField(
-				keyValue.value,
-				defaultKeyRules.value,
-				// N'appliquer les warnings que si la clé est complète
-				keyValue.value?.length === 2 ? props.customKeyWarningRules : [],
-			)
-		}
-
-		// Si on est en mode blur et qu'il y a des erreurs, focus sur le premier champ en erreur
-		if (onBlur || shouldValidateOnBlur.value) {
-			await nextTick()
-			if (numberResult.hasError) {
-				numberField.value?.$el?.querySelector?.('input')?.focus()
-			}
-			else if (keyResult.hasError) {
-				keyField.value?.$el?.querySelector?.('input')?.focus()
-			}
-			shouldValidateOnBlur.value = false
-		}
-
-		isValidating.value = false
-		return !numberResult.hasError && !keyResult.hasError
-	}
+	const {
+		numberValidation,
+		keyValidation,
+		validateFields,
+		hasFieldErrors,
+	} = useNirValidation(
+		numberValue,
+		keyValue,
+		unmaskedNumberValue,
+		unmaskedKeyValue,
+		toRef(props, 'readonly'),
+		toRef(props, 'disabled'),
+		toRef(props, 'required'),
+		numberField,
+		keyField,
+		toRef(props, 'customLocale'),
+		toRef(props, 'numberLabel'),
+		toRef(props, 'keyLabel'),
+		toRef(props, 'customNumberRules'),
+		toRef(props, 'customKeyRules'),
+		toRef(props, 'customNumberWarningRules'),
+		toRef(props, 'customKeyWarningRules'),
+		toRef(props, 'displayKey'),
+		toRef(props, 'customRulesPrecedence'),
+		toRef(props, 'nirType'),
+		toRef(props, 'label'),
+		toRef(props, 'showSuccessMessages'),
+		toRef(props, 'disableErrorHandling'),
+		toRef(props, 'isValidateOnBlur'),
+		toRef(props, 'useVuetifyValidation'),
+		toRef(props, 'numberRules'),
+		toRef(props, 'keyRules'),
+	)
 
 	const validateOnSubmit = () => {
 		return validateFields(true)
 	}
 
-	const hasNumberErrors = computed(() => numberValidation.hasError.value)
-	const hasKeyErrors = computed(() => keyValidation.hasError.value)
-	const hasNumberWarnings = computed(() => numberValidation.hasWarning.value)
-	const hasKeyWarnings = computed(() => keyValidation.hasWarning.value)
-	const hasNumberSuccess = computed(() => numberValidation.hasSuccess.value && props.showSuccessMessages)
-	const hasKeySuccess = computed(() => keyValidation.hasSuccess.value && props.showSuccessMessages)
-
 	// Propriétés calculées pour les attributs ARIA et les états d'erreur
-	const hasFieldErrors = computed(() => hasNumberErrors.value || hasKeyErrors.value)
 	const ariaRequired = computed(() => props.required ? 'true' : undefined)
 	const ariaInvalidNumber = computed(() => hasFieldErrors.value ? 'true' : undefined)
-	const ariaInvalidKey = computed(() => hasKeyErrors.value ? 'true' : undefined)
+	const ariaInvalidKey = computed(() => keyValidation.hasError.value ? 'true' : undefined)
 
 	const numberLabelWithAsterisk = computed(() => {
 		return props.required && props.displayAsterisk ? `${props.numberLabel} *` : props.numberLabel
@@ -426,21 +274,8 @@
 		return props.required && props.displayAsterisk ? `${props.keyLabel} *` : props.keyLabel
 	})
 
-	// Utilisation de debounce pour limiter les validations pendant la saisie
-	const debouncedValidate = createDebouncedFunction(() => {
-		validateFields(false)
-	}, 300) // 300ms de délai
-
-	const handleNumberInput = () => {
-		emitValue()
-		// Utiliser la validation debounced pour la saisie
-		debouncedValidate()
-	}
-
 	const handleKeyInput = () => {
 		emitValue()
-		// Utiliser la validation debounced pour la saisie
-		debouncedValidate()
 
 		// Si on supprime le contenu de la clé, on revient au champ NIR
 		if (props.displayKey && unmaskedKeyValue.value.length === 0) {
@@ -450,18 +285,6 @@
 		}
 	}
 
-	const handleNumberBlur = () => {
-		// Valider sans forcer le focus, pour permettre de quitter le champ
-		validateFields(false)
-		// On permet à l'utilisateur de quitter le champ même si la saisie est incomplète
-	}
-
-	const handleKeyBlur = () => {
-		// Valider sans forcer le focus, pour permettre de quitter le champ
-		validateFields(false)
-		// On permet à l'utilisateur de quitter le champ même si la saisie est incomplète
-	}
-
 	// Gestion des touches pour le champ NIR
 	const handleNumberKeydown = (e: Event) => {
 		const keyEvent = e as KeyboardEvent
@@ -514,25 +337,6 @@
 		}
 	})
 
-	// Rendre le composant auto-validable dans un SyForm
-	useValidatable(
-		validateOnSubmit,
-		() => {
-			try {
-				numberValidation.clearValidation()
-			}
-			catch {
-				void 0
-			}
-			try {
-				keyValidation.clearValidation()
-			}
-			catch {
-				void 0
-			}
-		},
-	)
-
 	defineExpose({
 		validateOnSubmit,
 		numberMask,
@@ -572,13 +376,14 @@
 				:append-icon="nirTooltip && nirTooltipPosition === 'append' ? 'info' : undefined"
 				:prepend-tooltip="nirTooltip && nirTooltipPosition === 'prepend' ? nirTooltip : undefined"
 				:append-tooltip="nirTooltip && nirTooltipPosition === 'append' ? nirTooltip : undefined"
-				:error="hasNumberErrors"
+				:error="numberValidation.errors.value.length > 0"
 				:aria-required="ariaRequired"
-				:has-error="hasNumberErrors"
-				:has-warning="hasNumberWarnings"
-				:has-success="hasNumberSuccess"
+				:has-error="numberValidation.hasError.value"
+				:has-warning="numberValidation.hasWarning.value"
+				:has-success="numberValidation.hasSuccess.value"
 				:aria-invalid="ariaInvalidNumber"
 				:disabled="disabled"
+				:disable-error-handling="true"
 				:bg-color="bgColor"
 				:density="props.density"
 				:hide-details="props.hideDetails"
@@ -597,8 +402,7 @@
 				:display-asterisk="false"
 				:aria-describedby="numberFieldErrorId + ' ' + numberFieldWarningId + ' ' + numberFieldSuccessId"
 				:show-success-messages="false"
-				@input="handleNumberInput"
-				@blur="handleNumberBlur"
+				@input="emitValue"
 			/>
 		</div>
 		<div
@@ -619,6 +423,7 @@
 				:disabled="disabled"
 				:bg-color="bgColor"
 				:density="props.density"
+				:disable-error-handling="true"
 				:hide-details="props.hideDetails"
 				:hide-spin-buttons="props.hideSpinButtons"
 				:placeholder="props.placeholder"
@@ -629,9 +434,9 @@
 				:persistent-hint="props.persistentHint"
 				:persistent-placeholder="props.persistentPlaceholder"
 				:aria-required="ariaRequired"
-				:has-error="hasKeyErrors"
-				:has-warning="hasKeyWarnings"
-				:has-success="hasKeySuccess"
+				:has-error="keyValidation.hasError.value"
+				:has-warning="keyValidation.hasWarning.value"
+				:has-success="keyValidation.hasSuccess.value"
 				:aria-invalid="ariaInvalidKey"
 				class="key-field"
 				:class="{
@@ -641,7 +446,6 @@
 				:aria-describedby="keyFieldErrorId + ' ' + keyFieldWarningId + ' ' + keyFieldSuccessId"
 				:show-success-messages="false"
 				@input="handleKeyInput"
-				@blur="handleKeyBlur"
 			/>
 		</div>
 		<div
@@ -653,8 +457,8 @@
 				class="sy-number-errors"
 			>
 				<VMessages
-					v-show="hasNumberErrors"
-					:active="hasNumberErrors"
+					v-show="numberValidation.hasError.value"
+					:active="numberValidation.hasError.value"
 					:messages="numberValidation.errors.value"
 				/>
 			</div>
@@ -663,8 +467,8 @@
 				class="sy-key-errors"
 			>
 				<VMessages
-					v-show="hasKeyErrors"
-					:active="hasKeyErrors"
+					v-show="keyValidation.hasError.value"
+					:active="keyValidation.hasError.value"
 					:messages="keyValidation.errors.value"
 				/>
 			</div>
@@ -673,8 +477,8 @@
 				class="sy-number-warnings"
 			>
 				<VMessages
-					v-show="hasNumberWarnings"
-					:active="hasNumberWarnings"
+					v-show="numberValidation.hasWarning.value"
+					:active="numberValidation.hasWarning.value"
 					:messages="numberValidation.warnings.value"
 				/>
 			</div>
@@ -683,8 +487,8 @@
 				class="sy-key-warnings"
 			>
 				<VMessages
-					v-show="hasKeyWarnings"
-					:active="hasKeyWarnings"
+					v-show="keyValidation.hasWarning.value"
+					:active="keyValidation.hasWarning.value"
 					:messages="keyValidation.warnings.value"
 				/>
 			</div>
@@ -693,8 +497,8 @@
 				class="sy-number-success"
 			>
 				<VMessages
-					v-show="hasNumberSuccess && showSuccessMessages"
-					:active="hasNumberSuccess"
+					v-show="numberValidation.hasSuccess.value && showSuccessMessages"
+					:active="numberValidation.hasSuccess.value"
 					:messages="numberValidation.successes.value"
 				/>
 			</div>
@@ -703,8 +507,8 @@
 				class="sy-key-success"
 			>
 				<VMessages
-					v-show="hasKeySuccess && showSuccessMessages"
-					:active="hasKeySuccess"
+					v-show="keyValidation.hasSuccess.value && showSuccessMessages"
+					:active="keyValidation.hasSuccess.value"
 					:messages="keyValidation.successes.value"
 				/>
 			</div>
@@ -713,8 +517,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .nir-field {
 	display: flex;
 	flex-wrap: wrap;
@@ -792,16 +594,16 @@
 
 .sy-number-errors,
 .sy-key-errors {
-	color: tokens.$colors-text-error;
+	color: rgb(var(--v-theme-textError));
 }
 
 .sy-number-warnings,
 .sy-key-warnings {
-	color: tokens.$colors-text-warning;
+	color: rgb(var(--v-theme-textWarning));
 }
 
 .sy-number-success,
 .sy-key-success {
-	color: tokens.$colors-text-success;
+	color: rgb(var(--v-theme-textSuccess));
 }
 </style>

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

@@ -1,15 +1,110 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/addon-docs';
 import * as Stories from '../NirField.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    BestPracticesSection,
+    ResourcesSection,
+    DemoSection
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
+<AccessibilityGuideLayout
+    componentName="NirField"
+    iconSrc={AccessibilityIcon}
+>
 
 <div class="mt-2">
 <p>Rapport d’audit manuel : <a href="/audits/NirField.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/897" target="_blank" style={{color:'#0C41BD'}}>issue #897</a>)</p>
-	</div>
+	<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/897" target="_blank" style={{color:'#0C41BD'}}>issue #897</a>)</p>
+</div>
+
+<CriteriaSection>
+<CriteriaCard icon="🧩" title="Regroupement du NIR et de sa clé">
+    <ul>
+        <li><strong>Donnée logique unique</strong> : le numéro de sécurité sociale et sa clé forment un même ensemble de saisie</li>
+        <li><strong>Comportement par défaut</strong> : lorsque la clé est affichée, le composant regroupe automatiquement les deux champs dans un <code>fieldset</code> avec un <code>legend</code></li>
+        <li><strong>Pour les lecteurs d’écran</strong> : le contexte (ex : <code>Numéro de sécurité sociale</code>) est annoncé avant chaque champ, comme la <code>Clé</code></li>        <li><strong>Point de vigilance</strong> : la légende doit être explicite et décrire la donnée complète, et non un intitulé technique ou ambigu</li>
+        <li><strong>Cas particulier</strong> : si <code>withoutFieldset</code> est utilisé, le composant remplace le <code>fieldset</code> par un <code>role="group"</code> avec un <code>aria-label</code></li>
+    </ul>
+</CriteriaCard>
+
+    <CriteriaCard icon="🏷️" title="Étiquettes des champs">
+        <ul>
+            <li><strong>Libellés distincts</strong> : chaque sous-champ dispose de son propre libellé visible, par exemple <code>Numéro de sécurité sociale</code> et <code>Clé de validation</code></li>
+            <li><strong>Compréhension renforcée</strong> : le <code>legend</code> apporte le contexte global, tandis que chaque <code>label</code> permet d’identifier précisément la zone en cours de saisie</li>
+            <li><strong>Pertinence attendue</strong> : les libellés doivent éviter toute confusion entre les 13 chiffres du NIR et les 2 chiffres de la clé</li>
+        </ul>
+    </CriteriaCard>
+
+<CriteriaCard icon="🔗" title="Messages liés automatiquement">
+        <ul>
+            <li><strong>Messages liés aux bons champs</strong> : chaque champ génère ses propres identifiants pour les messages d’erreur, d’avertissement et de succès</li>
+            <li><strong>Liaison</strong> : ces messages sont automatiquement reliés au champ concerné via <code>aria-describedby</code></li>
+            <li><strong>Comportement natif du composant</strong> : le développeur n’a pas besoin de relier manuellement les messages aux champs</li>
+            <li><strong>Pour les lecteurs d’écran</strong> : les messages sont lus au bon moment </li>
+            <li><strong>Sans configuration supplémentaire</strong> : la liaison entre les champs et leurs messages est gérée automatiquement</li>
+        </ul>
+    </CriteriaCard>
+
+<CriteriaCard icon="⚠️" title="Champs obligatoires et erreurs">
+        <ul>
+            <li><strong>Champ requis</strong> : lorsque la saisie est obligatoire, le composant ajoute automatiquement <code>aria-required</code></li>
+            <li><strong>Champ en erreur</strong> : lorsqu’une validation échoue, le composant ajoute dynamiquement <code>aria-invalid</code> sur le ou les champs concernés</li>
+            <li><strong>Lecture vocale</strong> : ces infos sont annoncées automatiquement par les technologies d’assistance</li> 
+              <li><strong>Attention</strong> : il faut aussi un indicateur visuel (pas seulement technique)</li>
+
+        </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="✍️" title="Aide à la saisie">
+        <ul>
+            <li><strong>Format spécifique</strong> : le NIR a une structure précise</li>
+            <li><strong>Aide explicite recommandée</strong> : documenter ce qui est attendu pour le numéro et pour la clé, par exemple les 13 premiers chiffres puis les 2 derniers</li>
+            <li><strong>Messages clairs</strong> : en cas d’erreur, le message doit indiquer la valeur attendue de façon compréhensible, avec un exemple</li>
+            <li><strong>Personnalisation</strong> : le composant permet de fournir des règles et messages personnalisés afin de s'adapter au contexte métier</li>
+        </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="⌨️" title="Navigation et focus">
+    <ul>
+        <li><strong>Passage automatique</strong> : quand le NIR est complet, le focus passe automatiquement au champ de la clé</li>
+        <li><strong>Retour au NIR</strong> : si la clé est supprimée, le focus revient sur le champ du numéro</li>
+        <li><strong>Saisie facilitée</strong> : si l’utilisateur continue à taper, les chiffres sont directement envoyés dans la clé</li>
+ <li>
+            <strong>En cas d’erreur</strong> : le focus revient sur le premier champ à corriger uniquement lors de la validation 
+            (<code>onBlur = true</code> ou soumission du formulaire).  
+            Pendant la saisie (<code>onBlur = false</code> et <code>shouldValidateOnBlur = false</code>), le focus ne bouge pas pour ne pas interrompre l’utilisateur, mais on l’aide à corriger les erreurs lorsqu’il termine un champ ou soumet le formulaire.
+        </li>
+        </ul>
+</CriteriaCard>
+</CriteriaSection>
+    <DemoSection componentName="NirField">
+      <Primary />
+    </DemoSection>
+
+<BestPracticesSection>
+    <ul>
+        <li>Utiliser le regroupement par <code>fieldset</code> et <code>legend</code> dès lors que le numéro et la clé sont saisis ensemble</li>
+        <li>Mettre une légende claire (ex : "Numéro de sécurité sociale")</li>
+        <li>Garder deux labels distincts pour le numéro et la clé</li>
+        <li>Laisser le composant gérer les attributs ARIA automatiquement</li>
+        <li>Prévoir une aide à la saisie claire, visible et compréhensible</li>
+        <li>Afficher des messages d’erreur explicites, contextualisés et, si possible, accompagnés d’un exemple</li>
+        <li>Ne pas signaler le caractère obligatoire, l’erreur ou la réussite uniquement par la couleur</li>
+    </ul>
+</BestPracticesSection>
+
+<ResourcesSection>
+    <ul>
+        <li><a href="https://www.accede-web.com/notices/html-et-css/formulaires/utiliser-la-balise-label-ainsi-que-les-attributs-for-et-id-pour-etiqueter-les-champs-avec-intitule-visible/" target="_blank" style={{ color: '#0C41BD' }}>Accede Web – Utiliser label, for et id</a></li>
+        <li><a href="https://www.accede-web.com/notices/html-et-css/formulaires/integrer-required-ou-aria-requiredtrue-dans-les-champs-obligatoires/" target="_blank" style={{ color: '#0C41BD' }}>Accede Web – Intégrer required ou aria-required="true"</a></li>
+        <li><a href="https://www.accede-web.com/notices/html-et-css/formulaires/integrer-les-messages-derreur-et-les-suggestions-de-correction-directement-dans-les-balises-label/" target="_blank" style={{ color: '#0C41BD' }}>Accede Web – Messages d’erreur et suggestions de correction</a></li>
+    </ul>
+</ResourcesSection>
+
+</AccessibilityGuideLayout>

package/src/components/NirField/locales.ts

@@ -9,4 +9,4 @@ export const locales = {
 	numberHint: '13 caractères',
 	keyLabel: 'Clé',
 	keyHint: '2 chiffres',
-} as const
+}