@cnamts/synapse 1.0.1 → 1.0.2

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

@@ -87,14 +87,14 @@ exports[`ErrorPage > renders correctly 1`] = `
           v-col-sm-12
         ">
           <!-- v-if -->
-          <h2 class="
+          <h1 class="
             font-weight-bold
             mb-2
             mb-4
             text-h5
           ">
             Something went wrong
-          </h2>
+          </h1>
           <p>
             Error message
           </p>
@@ -206,14 +206,14 @@ exports[`ErrorPage > renders correctly with undefined route 1`] = `
             </span>
             501
           </div>
-          <h2 class="
+          <h1 class="
             font-weight-bold
             mb-2
             mb-4
             text-h5
           ">
             Error
-          </h2>
+          </h1>
           <p>
             Error message
           </p>

package/src/components/NirField/NirField.mdx

@@ -65,15 +65,28 @@ Le composant `NirField` est utilisé pour afficher un champ de saisie de numéro
 Le composant `NirField` utilise des règles de validation par défaut pour le numéro NIR et la Clé. Voici les règles de validation par défaut :
 
 #### Pour le numéro NIR :
-- Le numéro NIR doit être composé de 13 chiffres.
-- Le numéro NIR doit respecter le format suivant :
-- 1 chiffre pour le sexe (1-4, 7, 8)
-- 2 chiffres pour l'année de naissance
-- 2 chiffres pour le mois de naissance (01-12, 20-42)
-- 2 chiffres pour le département de naissance (01-99, 2A, 2B, 96, 97X, 98X)
-- 3 chiffres pour la commune de naissance
-- 3 chiffres pour le rang d'inscription
-- Le numéro NIR doit passer la validation de la clé de contrôle (2 chiffres).
+
+- Props: `nirType` à simple (par defaut) d'après le [repo](https://github.com/assurance-maladie-digital/nir-validation) : 
+
+  - Le 1er chiffre (1er composant) permet d'identifier le sexe de l'assuré (1 pour un homme et 2 pour une femme) ;
+  - Le second composant est un groupe de deux chiffres permettant de distinguer l'année de naissance (exemple 77 pour 1977) ;
+  - Le 3ème composant est un groupe de deux chiffres correspondant au mois de naissance (de 01 à 12) mais peut aussi prendre d’autres valeurs (de 20 à 99) qui indiquent que le mois de naissance de l’individu n’est pas connu (cela peut arriver pour des personnes nées à l’étranger) (https://www.insee.fr/fr/information/6665190?sommaire=6665196#titre-bloc-encadre4) ;
+  - Le 4ème correspond au département de naissance selon le code géographique officiel (de 01 à 95 et 97 pour les DOM et COM 976, 98 pour les TOM et COM et enfin 99 pour les nés hors de France) ;
+  - Le 5ème est un groupe de 3 chiffres permettant d'identifier la commune de naissance, selon le code géographique officiel édité par l'INSEE (https://www.insee.fr/fr/information/5057840) ;
+  - Le 6ème est un groupe de 3 chiffres, correspondant au rang d'inscription sur la liste du répertoire régional de l'INSEE ;
+  - Le 7ème composant optionnel est un groupe de 2 chiffres appelé la clé de contrôle du NIR.
+
+- Props: `nirType` à complexe : d'après la page [Wikipedia](https://fr.wikipedia.org/wiki/Num%C3%A9ro_de_s%C3%A9curit%C3%A9_sociale_en_France)
+
+  - Le numéro NIR doit être composé de 13 chiffres.
+  - Le numéro NIR doit respecter le format suivant :
+  - 1 chiffre pour le sexe (1-4, 7, 8)
+  - 2 chiffres pour l'année de naissance
+  - 2 chiffres pour le mois de naissance (01-12, 20-42)
+  - 2 chiffres pour le département de naissance (01-99, 2A, 2B, 96, 97X, 98X)
+  - 3 chiffres pour la commune de naissance
+  - 3 chiffres pour le rang d'inscription
+  - Le numéro NIR doit passer la validation de la clé de contrôle (2 chiffres).
 
 #### Pour la Clé :
 - La clé doit être composée de 2 chiffres.

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

@@ -127,6 +127,20 @@ const meta: Meta<typeof NirField> = {
 				},
 			},
 		},
+		nirType: {
+			description: 'Type de validation de NIR.',
+			control: 'select',
+			options: ['simple', 'complexe'],
+			default: 'simple',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'simple',
+				},
+			},
+		},
 		showSuccessMessages: {
 			description: 'Indique si les messages de succès sont affichés.',
 			control: 'boolean',
@@ -326,6 +340,16 @@ const meta: Meta<typeof NirField> = {
 				},
 			},
 		},
+		withoutFieldset: {
+			description: 'Indique si le champ NIR est affiché sans fieldset. (Par défaut, le champ NIR est affiché dans un fieldset si displayKey est true pour des raisons d\'accessibilité)',
+			control: 'boolean',
+			default: false,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
 	},
 } satisfies Meta<typeof NirField>
 
@@ -1133,7 +1157,7 @@ Cette story montre l'utilisation du NirField dans un formulaire avec validation.
 				code: `<form @submit.prevent="onSubmit">
 	<NirField
 		v-model="value"
-		label="Numéro de sécurité sociale"
+		label="NirField"
 		required
 		showSuccessMessages
 		ref="nirField"
@@ -1194,7 +1218,7 @@ const onSubmit = async () => {
 				<NirField
 					v-model="value"
 					v-bind="args"
-					label="Numéro de sécurité sociale"
+					label="NirField"
 					required
 					showSuccessMessages
 					ref="nirField"

package/src/components/NirField/NirField.vue

@@ -40,9 +40,11 @@
 		persistentHint?: boolean
 		persistentPlaceholder?: boolean
 		disableErrorHandling?: boolean
+		nirType?: 'simple' | 'complexe'
+		withoutFieldset?: boolean
 	}>(), {
 		modelValue: undefined,
-		label: undefined,
+		label: 'NirField',
 		numberLabel: 'Numéro de sécurité sociale',
 		keyLabel: 'Clé',
 		displayKey: true,
@@ -60,7 +62,7 @@
 		customRulesPrecedence: false,
 		showSuccessMessages: true,
 		width: '100%',
-		bgColor: undefined,
+		bgColor: 'white',
 		disabled: false,
 		density: 'default',
 		hideDetails: false,
@@ -74,6 +76,8 @@
 		persistentHint: false,
 		persistentPlaceholder: false,
 		disableErrorHandling: false,
+		nirType: 'simple',
+		withoutFieldset: false,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -89,8 +93,8 @@
 	const numberField = ref<InstanceType<typeof SyTextField> | null>(null)
 
 	// Valeurs non masquées
-	const unmaskedNumberValue = computed(() => numberValue.value.replace(/\s/g, ''))
-	const unmaskedKeyValue = computed(() => keyValue.value.replace(/\s/g, ''))
+	const unmaskedNumberValue = computed(() => numberValue.value ? numberValue.value.replace(/\s/g, '') : '')
+	const unmaskedKeyValue = computed(() => keyValue.value ? keyValue.value.replace(/\s/g, '') : '')
 
 	// Masques
 	const numberMask = {
@@ -132,7 +136,7 @@
 
 	// Watch sur la valeur non masquée du numéro pour gérer le focus automatique
 	watch(unmaskedNumberValue, (newValue) => {
-		if (newValue.length === 13 && props.displayKey) {
+		if (newValue && newValue.length === 13 && props.displayKey) {
 			focusField(keyField)
 		}
 	})
@@ -146,7 +150,11 @@
 	// Watch pour détecter la suppression des chiffres de la clé
 	watch(keyValue, (newValue, oldValue) => {
 		// Si l'ancienne valeur avait des chiffres et la nouvelle est vide ou ne contient que des espaces
-		if (oldValue.trim() && !newValue.trim()) {
+		if (oldValue && newValue !== null && oldValue.trim() && !newValue.trim()) {
+			focusField(numberField)
+		}
+		else if (oldValue && newValue === null) {
+			// Cas où newValue est null (effacement avec clearable)
 			focusField(numberField)
 		}
 	})
@@ -196,7 +204,7 @@
 					if (value.length < 13) {
 						return 'Le numéro de sécurité sociale est invalide.'
 					}
-					const result = checkNIR(value)
+					const result = checkNIR(value, props.nirType)
 					return result === true ? true : 'Le numéro de sécurité sociale est invalide.'
 				},
 				message: 'Le numéro de sécurité sociale est invalide.',
@@ -247,8 +255,8 @@
 				type: 'custom',
 				options: {
 					validate: validateKey,
-					message: 'La clé du numéro de sécurité sociale est invalide.',
-					successMessage: `Le champ ${props.keyLabel} est valide.`,
+					message: 'Le numéro de sécurité sociale est invalide.',
+					successMessage: 'Le numéro de sécurité sociale est valide.',
 					fieldIdentifier: props.keyLabel,
 				},
 			})
@@ -296,8 +304,29 @@
 		emit('update:modelValue', `${number}${key}`)
 	}
 
+	// É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,
@@ -318,7 +347,7 @@
 		}
 
 		// Si on est en mode blur et qu'il y a des erreurs, focus sur le premier champ en erreur
-		if (onBlur) {
+		if (onBlur || shouldValidateOnBlur.value) {
 			await nextTick()
 			if (numberResult.hasError) {
 				numberField.value?.$el.querySelector('input')?.focus()
@@ -326,8 +355,10 @@
 			else if (keyResult.hasError) {
 				keyField.value?.$el.querySelector('input')?.focus()
 			}
+			shouldValidateOnBlur.value = false
 		}
 
+		isValidating.value = false
 		return !numberResult.hasError && !keyResult.hasError
 	}
 
@@ -343,6 +374,32 @@
 	const hasKeyWarning = computed(() => !hasKeyErrors.value && keyValidation.hasWarning.value)
 	const hasKeySuccess = computed(() => !hasKeyErrors.value && !hasKeyWarning.value && keyValidation.hasSuccess.value)
 
+	// 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)
+
+	// Propriétés calculées pour les messages
+	const numberMessages = computed(() => {
+		if (hasNumberErrors.value) {
+			return numberValidation.errors.value
+		}
+		else if (hasNumberWarning.value) {
+			return numberValidation.warnings.value
+		}
+		else if (hasNumberSuccess.value && props.showSuccessMessages) {
+			return numberValidation.successes.value
+		}
+		return []
+	})
+
+	// Messages d'erreur combinés pour le champ numéro
+	const combinedErrorMessages = computed(() => [
+		...numberValidation.errors.value,
+		...keyValidation.errors.value,
+	])
+
 	const numberLabelWithAsterisk = computed(() => {
 		return props.required && props.displayAsterisk ? `${props.numberLabel} *` : props.numberLabel
 	})
@@ -351,14 +408,21 @@
 		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()
-		validateFields()
+		// Utiliser la validation debounced pour la saisie
+		debouncedValidate()
 	}
 
 	const handleKeyInput = () => {
 		emitValue()
-		validateFields()
+		// Utiliser la validation debounced pour la saisie
+		debouncedValidate()
 
 		// Si on supprime le contenu de la clé, on revient au champ NIR
 		if (unmaskedKeyValue.value.length === 0) {
@@ -394,7 +458,100 @@
 </script>
 
 <template>
+	<fieldset
+		v-if="displayKey && !withoutFieldset"
+		class="nir-field nir-field--fieldset"
+	>
+		<legend v-if="label">
+			{{ label }}
+		</legend>
+		<div class="number-field-container">
+			<SyTextField
+				ref="numberField"
+				v-model="numberValue"
+				v-maska="numberMask"
+				:label="numberLabelWithAsterisk"
+				:variant-style="outlined ? 'outlined' : 'underlined'"
+				:prepend-icon="nirTooltip && nirTooltipPosition === 'prepend' ? 'info' : undefined"
+				:append-icon="nirTooltip && nirTooltipPosition === 'append' ? 'info' : undefined"
+				:prepend-tooltip="nirTooltip && nirTooltipPosition === 'prepend' ? nirTooltip : undefined"
+				:append-tooltip="nirTooltip && nirTooltipPosition === 'append' ? nirTooltip : undefined"
+				:max-errors="2"
+				:error-messages="[...new Set([...numberValidation.errors.value, ...keyValidation.errors.value])]"
+				:warning-messages="numberValidation.warnings.value"
+				:success-messages="numberValidation.successes.value"
+				:show-success-messages="showSuccessMessages"
+				:has-warning="hasNumberWarning"
+				:has-success="hasNumberSuccess"
+				:error="hasNumberErrors || hasKeyErrors"
+				:messages="hasNumberErrors || hasKeyErrors ? numberValidation.errors.value ?? keyValidation.errors.value : (hasNumberWarning ? numberValidation.warnings.value : (hasNumberSuccess && props.showSuccessMessages ? numberValidation.successes.value : []))"
+				:has-error="hasNumberErrors || hasKeyErrors"
+				:required="required"
+				:aria-required="ariaRequired"
+				:aria-invalid="ariaInvalidNumber"
+				:disabled="disabled"
+				:bg-color="bgColor"
+				:density="props.density"
+				:hide-details="props.hideDetails"
+				:hide-spin-buttons="props.hideSpinButtons"
+				:placeholder="props.placeholder"
+				:readonly="props.readonly"
+				:variant="props.variant"
+				:clearable="props.clearable"
+				:counter="props.counter"
+				:persistent-hint="props.persistentHint"
+				:persistent-placeholder="props.persistentPlaceholder"
+				:hint="props.hint || locales.numberHint"
+				class="number-field"
+				:display-asterisk="false"
+				@input="handleNumberInput"
+				@blur="handleNumberBlur"
+			/>
+		</div>
+		<div
+			v-if="displayKey"
+			class="key-field-container"
+		>
+			<SyTextField
+				ref="keyField"
+				v-model="keyValue"
+				v-maska="keyMask"
+				:label="keyLabelWithAsterisk"
+				:variant-style="outlined ? 'outlined' : 'underlined'"
+				:prepend-icon="keyTooltip && keyTooltipPosition === 'prepend' ? 'info' : undefined"
+				:append-icon="keyTooltip && keyTooltipPosition === 'append' ? 'info' : undefined"
+				:prepend-tooltip="keyTooltip && keyTooltipPosition === 'prepend' ? keyTooltip : undefined"
+				:append-tooltip="keyTooltip && keyTooltipPosition === 'append' ? keyTooltip : undefined"
+				:error-messages="keyValidation.errors.value.length > 0 ? [''] : []"
+				:warning-messages="keyValidation.warnings.value"
+				:show-success-messages="false"
+				:has-warning="hasKeyWarning"
+				:has-success="hasKeySuccess"
+				:hint="props.hint || locales.keyHint"
+				:has-error="hasKeyErrors"
+				:disabled="disabled"
+				:bg-color="bgColor"
+				:density="props.density"
+				:hide-details="props.hideDetails"
+				:hide-spin-buttons="props.hideSpinButtons"
+				:placeholder="props.placeholder"
+				:readonly="props.readonly"
+				:variant="props.variant"
+				:clearable="props.clearable"
+				:counter="props.counter"
+				:persistent-hint="props.persistentHint"
+				:persistent-placeholder="props.persistentPlaceholder"
+				:aria-required="ariaRequired"
+				:aria-invalid="ariaInvalidKey"
+				class="key-field"
+				:display-asterisk="false"
+				@input="handleKeyInput"
+				@blur="handleKeyBlur"
+			/>
+		</div>
+	</fieldset>
 	<div
+		v-else
 		class="nir-field"
 	>
 		<div class="number-field-container">
@@ -409,16 +566,18 @@
 				:prepend-tooltip="nirTooltip && nirTooltipPosition === 'prepend' ? nirTooltip : undefined"
 				:append-tooltip="nirTooltip && nirTooltipPosition === 'append' ? nirTooltip : undefined"
 				:max-errors="2"
-				:error-messages="[...numberValidation.errors.value, ...keyValidation.errors.value]"
+				:error-messages="combinedErrorMessages"
 				:warning-messages="numberValidation.warnings.value"
 				:success-messages="numberValidation.successes.value"
 				:show-success-messages="showSuccessMessages"
 				:has-warning="hasNumberWarning"
 				:has-success="hasNumberSuccess"
-				:error="hasNumberErrors"
-				:messages="hasNumberErrors ? numberValidation.errors.value : (hasNumberWarning ? numberValidation.warnings.value : (hasNumberSuccess && props.showSuccessMessages ? numberValidation.successes.value : []))"
-				:has-error="hasNumberErrors"
+				:error="hasNumberErrors || hasKeyErrors"
+				:messages="numberMessages"
+				:has-error="hasNumberErrors || hasKeyErrors"
 				:required="required"
+				:aria-required="ariaRequired"
+				:aria-invalid="ariaInvalidNumber"
 				:disabled="disabled"
 				:bg-color="bgColor"
 				:density="props.density"
@@ -454,12 +613,10 @@
 				:append-tooltip="keyTooltip && keyTooltipPosition === 'append' ? keyTooltip : undefined"
 				:error-messages="keyValidation.errors.value.length > 0 ? [''] : []"
 				:warning-messages="keyValidation.warnings.value"
-				:success-messages="keyValidation.successes.value"
-				:show-success-messages="showSuccessMessages"
+				:show-success-messages="false"
 				:has-warning="hasKeyWarning"
 				:has-success="hasKeySuccess"
 				:hint="props.hint || locales.keyHint"
-				:messages="hasKeyErrors ? keyValidation.errors.value : (hasKeyWarning ? keyValidation.warnings.value : (hasKeySuccess && props.showSuccessMessages ? keyValidation.successes.value : []))"
 				:has-error="hasKeyErrors"
 				:disabled="disabled"
 				:bg-color="bgColor"
@@ -473,6 +630,8 @@
 				:counter="props.counter"
 				:persistent-hint="props.persistentHint"
 				:persistent-placeholder="props.persistentPlaceholder"
+				:aria-required="ariaRequired"
+				:aria-invalid="ariaInvalidKey"
 				class="key-field"
 				:display-asterisk="false"
 				@input="handleKeyInput"
@@ -486,18 +645,46 @@
 .nir-field {
 	display: flex;
 	gap: 16px;
-	width: calc(v-bind('props.width') - 16px);
+	width: calc(v-bind('props.width || "100%"') - 16px);
+	align-items: flex-start;
+}
+
+.nir-field--fieldset {
+	width: calc(v-bind('props.width || "100%"') + 5px);
+	border: 1px solid #b9b9b9;
+	border-radius: 4px;
+	padding: 25px;
+	margin: 0;
+	display: flex;
+	gap: 16px;
 	align-items: flex-start;
+	box-sizing: border-box;
 }
 
-.number-field-container {
+.nir-field--fieldset legend {
+	padding: 0 8px;
+	font-weight: 500;
+	color: #666;
+}
+
+/* Styles pour le mode standard (div) */
+.nir-field:not(.nir-field--fieldset) .number-field-container {
 	flex: 0 0 80%;
 }
 
-.key-field-container {
+.nir-field:not(.nir-field--fieldset) .key-field-container {
 	flex: 0 0 20%;
 }
 
+/* Styles pour le mode fieldset */
+.nir-field--fieldset .number-field-container {
+	flex: v-bind('props.clearable ? "0 0 70%" : "0 0 78%"');
+}
+
+.nir-field--fieldset .key-field-container {
+	flex: v-bind('props.clearable ? "0 0 29%" : "0 0 18%"');
+}
+
 .number-field,
 .key-field {
 	width: 100%;

package/src/components/NirField/nirValidation.ts

@@ -1,21 +1,35 @@
 export const NUMBER_LENGTH = 13
 export const KEY_LENGTH = 2
 
-export function checkNIR(nir: string): boolean {
+export function checkNIR(nir: string, nirType: string): boolean {
 	nir = nir.replace(/\s+/g, '').toUpperCase()
 
-	const nirRegex = new RegExp(
+	const nirRegexComplex = new RegExp(
 		'^'
 		+ '(?<sexe>[1-4]|7|8)'
 		+ '(?<anneeNaissance>\\d{2})'
 		+ '(?<moisNaissance>0[1-9]|1[0-2]|2[0-9]|3[0-9]|4[0-2])'
-		+ '(?<departementNaissance>\\d{2}|2A|2B|96|97\\d|98\\d)'
+		+ '(?<departementNaissance>\\d{2}|2A|2B|96|97\\d|98\\d|99\\d)'
 		+ '(?<communeNaissance>\\d{3})'
 		+ '(?<rangInscription>\\d{3})'
 		+ '(?<cle>[0-9]{2})?'
 		+ '$',
 		'i',
 	)
+
+	const nirSimpleRegex = new RegExp(
+		'^'
+		+ '(?<sexe>[12])'
+		+ '(?<anneeNaissance>\\d{2})'
+		+ '(?<moisNaissance>0[1-9]|1[0-2]|[2-9][0-9])'
+		+ '(?<departementNaissance>\\d{2}|2A|2B)'
+		+ '(?<communeNaissance>\\d{3})'
+		+ '(?<rangInscription>\\d{3})'
+		+ '(?<cle>9[0-7]|[0-8]\\d)?'
+		+ '$',
+		'i',
+	)
+	const nirRegex = nirType === 'simple' ? nirSimpleRegex : nirRegexComplex
 	return nirRegex.test(nir)
 }
 

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

@@ -56,7 +56,7 @@ describe('NirField.vue', () => {
 		await wrapper.find('.key-field input').setValue('1')
 		await wrapper.find('.key-field input').trigger('blur')
 		await wrapper.vm.$nextTick()
-		expect(wrapper.vm.keyValidation.errors.value[0]).toBe('La clé du numéro de sécurité sociale est invalide.')
+		expect(wrapper.vm.keyValidation.errors.value[0]).toBe('Le numéro de sécurité sociale est invalide.')
 	})
 
 	it('validates the key field successfully', async () => {
@@ -64,7 +64,7 @@ describe('NirField.vue', () => {
 		await wrapper.find('.key-field input').setValue('91')
 		await wrapper.find('.key-field input').trigger('blur')
 		await wrapper.vm.$nextTick()
-		expect(wrapper.vm.keyValidation.successes.value).toContain('Le champ Clé est valide.')
+		expect(wrapper.vm.keyValidation.successes.value).toContain('Le numéro de sécurité sociale est valide.')
 	})
 
 	it('hides the key field when displayKey is false', async () => {

package/src/components/NotFoundPage/Accessibilite.stories.ts

@@ -181,6 +181,14 @@ export const Legende: StoryObj = {
 					</v-btn>
 					Problèmes relevés par Tanaguru
 				  </div>
+				</div>
+							<div class="mt-4">
+					<p>Rapport d’audit manuel : <a href="/audits/NotFoundPage.xlsx" style="color:#0C41BD;">Voir le
+						rapport</a></p>
+					<p style="color: grey; font-size: 14px">Correctifs associés (<a
+						href="https://github.com/assurance-maladie-digital/design-system-v3/issues/654" target="_blank"
+						style="color:#0C41BD;"
+					>issue #654</a>)</p>
 				</div>
 			  </div>
             `,

package/src/components/NotFoundPage/NotFoundPage.vue

@@ -56,7 +56,8 @@
 		<template #illustration>
 			<img
 				src="./assets/not-found.svg"
-				:alt="locales.pageTitle"
+				alt=""
+				aria-hidden="true"
 			>
 		</template>
 	</ErrorPage>

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

@@ -96,14 +96,14 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
             </span>
             404
           </div>
-          <h2 class="
+          <h1 class="
             font-weight-bold
             mb-2
             mb-4
             text-h5
           ">
             Page non trouvée
-          </h2>
+          </h1>
           <p>
             Cette page n’existe pas ou a été déplacée.
           </p>
@@ -124,7 +124,8 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
           v-col-sm-6
         ">
           <img
-            alt="Page non trouvée"
+            alt=""
+            aria-hidden="true"
             src="/src/components/NotFoundPage/assets/not-found.svg"
           />
         </div>
@@ -233,14 +234,14 @@ exports[`NotFoundPage > renders correctly 1`] = `
             </span>
             404
           </div>
-          <h2 class="
+          <h1 class="
             font-weight-bold
             mb-2
             mb-4
             text-h5
           ">
             Page non trouvée
-          </h2>
+          </h1>
           <p>
             Cette page n’existe pas ou a été déplacée.
           </p>
@@ -254,7 +255,8 @@ exports[`NotFoundPage > renders correctly 1`] = `
           v-col-sm-6
         ">
           <img
-            alt="Page non trouvée"
+            alt=""
+            aria-hidden="true"
             src="/src/components/NotFoundPage/assets/not-found.svg"
           />
         </div>

package/src/components/PaginatedTable/PaginatedTable.mdx

@@ -7,6 +7,8 @@ import * as PaginatedTableStories from "./PaginatedTable.stories.ts";
 
 Le composant `PaginatedTable` est utilisé pour afficher une `VDataTable` de Vuetify avec une pagination persistante.
 
+> **⚠️ Attention** : Ce composant est déprécié au profit des composants [SyTable](?path=/docs/composants-tableaux-sytable--docs) et [SyServerTable](?path=/docs/composants-tableaux-syservertable--docs).
+
 <Canvas story={{height: '550px'}} of={PaginatedTableStories.Default}/>
 
 # API

package/src/components/PasswordField/PasswordField.stories.ts

@@ -89,6 +89,10 @@ const meta = {
 			control: 'boolean',
 			description: 'Indique si la validation doit être effectuée lors de la perte de focus',
 		},
+		bgColor: {
+			control: 'color',
+			description: 'Couleur de fond du champ',
+		},
 	},
 	args: {
 		modelValue: '',