@cnamts/synapse 0.0.13-alpha → 0.0.15-alpha

package/src/components/index.ts

@@ -2,6 +2,7 @@ export { default as DatePicker } from '@/components/DatePicker/DatePicker.vue'
 export { useFieldValidation } from '../composables/rules/useFieldValidation'
 export type { RuleOptions } from '../composables/rules/useFieldValidation'
 export { useNotificationService } from '../services/NotificationService'
+export { useValidation } from '../composables/validation/useValidation'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
 export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as ChipList } from './ChipList/ChipList.vue'
@@ -41,6 +42,7 @@ export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBt
 export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
 export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavigationBar.vue'
 export { default as HeaderToolbar } from './HeaderToolbar/HeaderToolbar.vue'
+export { indicatifs } from './PhoneField/indicatifs'
 export { default as LangBtn } from './LangBtn/LangBtn.vue'
 export { default as Logo } from './Logo/Logo.vue'
 export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'

package/src/composables/date/tests/useDatePickerAccessibility.spec.ts

@@ -1,13 +1,14 @@
-import { describe, it, expect, beforeEach } from 'vitest'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { useDatePickerAccessibility } from '../useDatePickerAccessibility'
 
 describe('useDatePickerAccessibility', () => {
-	let { updateAccessibility } = useDatePickerAccessibility()
+	let { updateAccessibility, handleKeyDown } = useDatePickerAccessibility()
 
 	beforeEach(() => {
-		// Réinitialiser la fonction pour chaque tes
-		const { updateAccessibility: newUpdateAccessibility } = useDatePickerAccessibility()
+		// Réinitialiser la fonction pour chaque test
+		const { updateAccessibility: newUpdateAccessibility, handleKeyDown: newHandleKeyDown } = useDatePickerAccessibility()
 		updateAccessibility = newUpdateAccessibility
+		handleKeyDown = newHandleKeyDown
 
 		// Créer une structure DOM simulée pour les tests
 		document.body.innerHTML = `
@@ -97,6 +98,83 @@ describe('useDatePickerAccessibility', () => {
 		// Vérifier que les instructions pour les lecteurs d'écran ont été ajoutées
 		const srOnlyEl = document.querySelector('.sr-only-instructions')
 		expect(srOnlyEl).not.toBeNull()
-		expect(srOnlyEl?.textContent).toBe('Utilisez les flèches pour naviguer entre les dates et Entrée pour sélectionner une date')
+		expect(srOnlyEl?.textContent).toBe('Utilisez tab pour naviguer entre les dates et Entrée ou Espace pour sélectionner une date')
+	})
+
+	describe('handleKeyDown', () => {
+		it('simulates a click event when Enter key is pressed', () => {
+			// Créer une fonction d'espionnage autonome plutôt que d'espionner une méthode existante
+			const clickHandlerSpy = vi.fn()
+
+			// Créer un élément bouton avec un gestionnaire de clic espion
+			const button = document.createElement('button')
+			button.addEventListener('click', clickHandlerSpy)
+			document.body.appendChild(button)
+			button.focus()
+
+			// Créer un événement clavier pour la touche Entrée
+			const enterEvent = new KeyboardEvent('keydown', {
+				key: 'Enter',
+				bubbles: true,
+				cancelable: true,
+			})
+
+			// Espionner la méthode preventDefault de l'événement
+			const preventDefaultSpy = vi.spyOn(enterEvent, 'preventDefault')
+
+			// Appeler la fonction handleKeyDown avec l'événement
+			handleKeyDown(enterEvent)
+
+			// Vérifier que preventDefault a été appelé
+			expect(preventDefaultSpy).toHaveBeenCalled()
+
+			// Vérifier que le gestionnaire de clic a été déclenché suite à l'événement simulé
+			expect(clickHandlerSpy).toHaveBeenCalled()
+		})
+
+		it('does nothing when a key other than Enter is pressed', () => {
+			// Créer une fonction d'espionnage autonome
+			const clickHandlerSpy = vi.fn()
+
+			// Créer un élément bouton avec un gestionnaire de clic espion
+			const button = document.createElement('button')
+			button.addEventListener('click', clickHandlerSpy)
+			document.body.appendChild(button)
+			button.focus()
+
+			// Créer un événement clavier pour une touche autre qu'Entrée (par ex: Espace)
+			const spaceEvent = new KeyboardEvent('keydown', {
+				key: 'Space',
+				bubbles: true,
+				cancelable: true,
+			})
+
+			// Espionner la méthode preventDefault de l'événement
+			const preventDefaultSpy = vi.spyOn(spaceEvent, 'preventDefault')
+
+			// Appeler la fonction handleKeyDown avec l'événement
+			handleKeyDown(spaceEvent)
+
+			// Vérifier que preventDefault n'a pas été appelé
+			expect(preventDefaultSpy).not.toHaveBeenCalled()
+
+			// Vérifier qu'aucun événement de clic n'a été déclenché
+			expect(clickHandlerSpy).not.toHaveBeenCalled()
+		})
+
+		it('handles the case when no element is focused', () => {
+			// S'assurer qu'aucun élément n'est focalisé
+			document.body.focus()
+
+			// Créer un événement clavier pour la touche Entrée
+			const enterEvent = new KeyboardEvent('keydown', {
+				key: 'Enter',
+				bubbles: true,
+				cancelable: true,
+			})
+
+			// Vérifier que la fonction ne génère pas d'erreur
+			expect(() => handleKeyDown(enterEvent)).not.toThrow()
+		})
 	})
 })

package/src/composables/date/useDatePickerAccessibility.ts

@@ -5,9 +5,49 @@ import { nextTick } from 'vue'
 
 /**
  * Améliore l'accessibilité du DatePicker en ajoutant des attributs ARIA et des instructions pour les lecteurs d'écran
- * @returns Une fonction pour mettre à jour l'accessibilité du DatePicker
+ * @returns Des fonctions pour mettre à jour l'accessibilité du DatePicker et gérer les événements clavier
  */
 export function useDatePickerAccessibility() {
+	// Référence pour suivre si l'événement a déjà été traité
+	let isProcessingEnterKey = false
+
+	/**
+	 * Gestionnaire d'événements clavier pour simuler le comportement de la touche espace avec la touche entrée
+	 * @param event L'événement clavier
+	 */
+	const handleKeyDown = (event: Event): void => {
+		const keyboardEvent = event as KeyboardEvent
+		// Si la touche entrée est pressée et que nous ne sommes pas déjà en train de traiter un événement
+		if (keyboardEvent.key === 'Enter' && !isProcessingEnterKey) {
+			// Marquer que nous sommes en train de traiter l'événement pour éviter les doublons
+			isProcessingEnterKey = true
+
+			// Empêcher le comportement par défaut de la touche entrée
+			keyboardEvent.preventDefault()
+
+			// Récupérer l'élément actuellement focalisé
+			const focusedElement = document.activeElement
+
+			// Simuler un événement de touche espace
+			if (focusedElement && focusedElement instanceof HTMLElement) {
+				// Créer et déclencher un événement de clic qui simule le comportement de l'espace
+				const clickEvent = new MouseEvent('click', {
+					bubbles: true,
+					cancelable: true,
+					view: window,
+				})
+
+				// Déclencher un seul événement de clic
+				focusedElement.dispatchEvent(clickEvent)
+			}
+
+			// Réinitialiser l'état après un délai pour permettre le traitement des autres événements
+			setTimeout(() => {
+				isProcessingEnterKey = false
+			}, 100)
+		}
+	}
+
 	/**
 	 * Met à jour les attributs d'accessibilité du DatePicker
 	 * Ajoute des attributs ARIA et des instructions pour les lecteurs d'écran
@@ -64,14 +104,19 @@ export function useDatePickerAccessibility() {
 			srOnlyHtmlEl.style.clip = 'rect(0, 0, 0, 0)'
 			srOnlyHtmlEl.style.whiteSpace = 'nowrap'
 			srOnlyHtmlEl.style.border = '0'
-			srOnlyEl.textContent = 'Utilisez les flèches pour naviguer entre les dates et Entrée pour sélectionner une date'
-
+			srOnlyEl.textContent = 'Utilisez tab pour naviguer entre les dates et Entrée ou Espace pour sélectionner une date'
 			datePickerEl.prepend(srOnlyEl)
 		}
+
+		// Ajouter un gestionnaire d'événements clavier pour la touche entrée
+		// Utiliser des casts explicites pour rassurer TypeScript sur les types
+		datePickerEl.removeEventListener('keydown', handleKeyDown as EventListener) // Supprimer d'abord pour éviter les doublons
+		datePickerEl.addEventListener('keydown', handleKeyDown as EventListener)
 	}
 
 	return {
 		updateAccessibility,
+		handleKeyDown,
 	}
 }
 

package/src/composables/rules/useFieldValidation.ts

@@ -177,16 +177,30 @@ export function useFieldValidation() {
 
 				case 'notBeforeToday': {
 					const dateValue = new Date(value)
+					// Réinitialiser l'heure à minuit pour ne comparer que les dates
+					dateValue.setHours(0, 0, 0, 0)
+
+					// Créer une date aujourd'hui à minuit pour comparaison
+					const today = new Date()
+					today.setHours(0, 0, 0, 0)
+
 					return createValidationResult(
-						dateValue >= new Date(),
+						dateValue >= today,
 						options.message || options.warningMessage || `${identifier} ne peut pas être antérieur à aujourd'hui.`,
 					)
 				}
 
 				case 'notAfterToday': {
 					const dateValue = new Date(value)
+					// Réinitialiser l'heure à minuit pour ne comparer que les dates
+					dateValue.setHours(0, 0, 0, 0)
+
+					// Créer une date aujourd'hui à minuit pour comparaison
+					const today = new Date()
+					today.setHours(0, 0, 0, 0)
+
 					return createValidationResult(
-						dateValue <= new Date(),
+						dateValue <= today,
 						options.message || options.warningMessage || `${identifier} ne peut pas être postérieur à aujourd'hui.`,
 					)
 				}
@@ -262,8 +276,17 @@ export function useFieldValidation() {
 						return { error: 'Date de référence invalide' }
 					}
 
+					// Normaliser les deux dates en réinitialisant les heures/minutes/secondes
+					dateValue.setHours(0, 0, 0, 0)
+					referenceDate.setHours(0, 0, 0, 0)
+
+					// Comparer les dates normalisées
+					const isSameDate = dateValue.getFullYear() === referenceDate.getFullYear()
+						&& dateValue.getMonth() === referenceDate.getMonth()
+						&& dateValue.getDate() === referenceDate.getDate()
+
 					return createValidationResult(
-						dateValue.getTime() === referenceDate.getTime(),
+						isSameDate,
 						options.message || options.warningMessage || `${identifier} doit être exactement le ${options.date}.`,
 					)
 				}

package/src/designTokens/tokens/cnam/cnamColors.ts

@@ -156,16 +156,11 @@ export const cnamColorsTokens = {
 		lighten97: '#fafafa',
 	},
 	white: {
-		20: 'rgba(255, 255, 255, 0.2000)',
-		38: 'rgba(255, 255, 255, 0.3800)',
-		40: 'rgba(255, 255, 255, 0.4000)',
-		70: 'rgba(255, 255, 255, 0.7000)',
-		8: 'rgba(255, 255, 255, 0.0800)',
-		0: 'rgba(255, 255, 255, 0.0000)',
+		lighten20: 'rgba(255, 255, 255, 0.20)',
+		lighten38: 'rgba(255, 255, 255, 0.38)',
+		lighten40: 'rgba(255, 255, 255, 0.40)',
+		lighten70: 'rgba(255, 255, 255, 0.70)',
+		lighten8: 'rgba(255, 255, 255, 0.080)',
 		base: '#ffffff',
 	},
-	transparentBlue: {
-		transparentBlue18: '#a6d4eb',
-		transparentBlue8: '#ebf0f7',
-	},
 }

package/src/designTokens/tokens/cnam/cnamLightTheme.ts

@@ -88,6 +88,4 @@ export const cnamLightTheme = {
 	iconOnDark: cnamSemanticTokens.colors.icon.onDark,
 	iconDisabled: cnamSemanticTokens.colors.icon.disabled,
 	iconDisabledOnDark: cnamSemanticTokens.colors.icon.disabledOnDark,
-	transparentBlue18: cnamColorsTokens.blue.base,
-	transparentBlue8: cnamColorsTokens.transparentBlue.transparentBlue8,
 }

package/src/designTokens/tokens/cnam/cnamSemantic.ts

@@ -22,7 +22,7 @@ export const cnamSemanticTokens = {
 			errorSubdued: '#fcedeb',
 			errorContrasted: '#b33f2e',
 			disabled: '#dddede',
-			disabledOnDark: 'rgba(255, 255, 255, 0.0800)',
+			disabledOnDark: 'rgba(255, 255, 255, 0.08)',
 			assure: '#ed76b3',
 			professionnel: '#66c9ec',
 			entreprise: '#f0b323',
@@ -76,11 +76,11 @@ export const cnamSemanticTokens = {
 			onLight: '#0c419a',
 		},
 		interactive: {
-			default: 'rgba(255, 255, 255, 0.0000)',
+			default: 'rgba(255, 255, 255, 0)',
 			hover: '#e7ecf5',
 			pressed: '#ced9eb',
 			focus: '#e7ecf5',
-			disabled: 'rgba(255, 255, 255, 0.0000)',
+			disabled: 'rgba(255, 255, 255, 0)',
 			hoverOnSelected: '#ced9eb',
 		},
 	},

package/src/designTokens/tokens/pa/paColors.ts

@@ -156,16 +156,11 @@ export const paColorsTokens = {
 		lighten97: '#fafafa',
 	},
 	white: {
-		20: 'rgba(255, 255, 255, 0.2000)',
-		38: 'rgba(255, 255, 255, 0.3800)',
-		40: 'rgba(255, 255, 255, 0.4000)',
-		70: 'rgba(255, 255, 255, 0.7000)',
-		8: 'rgba(255, 255, 255, 0.0800)',
-		0: 'rgba(255, 255, 255, 0.0000)',
+		lighten20: 'rgba(255, 255, 255, 0.20)',
+		lighten38: 'rgba(255, 255, 255, 0.38)',
+		lighten40: 'rgba(255, 255, 255, 0.40)',
+		lighten70: 'rgba(255, 255, 255, 0.70)',
+		lighten8: 'rgba(255, 255, 255, 0.080)',
 		base: '#ffffff',
 	},
-	transparentBlue: {
-		transparentBlue18: '#a6d4eb',
-		transparentBlue8: '#ebf0f7',
-	},
 }

package/src/designTokens/tokens/pa/paLightTheme.ts

@@ -9,6 +9,7 @@ export const paLightTheme = {
 	info: '#0062AC',
 	success: '#73A839',
 	warning: '#FD7E14',
+	avatar: '#0062AC',
 	blue: '#007bff',
 	blueBase: '#007bff',
 	indigo: '#6610f2',
@@ -59,10 +60,10 @@ export const paLightTheme = {
 	backgroundMain: paSemanticTokens.colors.background.main,
 	backgroundSurface: paSemanticTokens.colors.background.surface,
 	backgroundSurfaceAlt: paSemanticTokens.colors.background.surfaceAlt,
-	backgroungMainAlt: paSemanticTokens.colors.background.mainAlt,
-	backgroungRaised: paSemanticTokens.colors.background.raised,
+	backgroundMainAlt: paSemanticTokens.colors.background.mainAlt,
+	backgroundRaised: paSemanticTokens.colors.background.raised,
 	backgroundAccent: paSemanticTokens.colors.background.accent,
-	backgroungAccentContrasted: paSemanticTokens.colors.background.accentContrasted,
+	backgroundAccentContrasted: paSemanticTokens.colors.background.accentContrasted,
 	backgroundAccentAlt: paSemanticTokens.colors.background.accentAlt,
 	backgroundInfo: paSemanticTokens.colors.background.info,
 	backgroundInfoSubdued: paSemanticTokens.colors.background.infoSubdued,
@@ -118,6 +119,4 @@ export const paLightTheme = {
 	iconOnDark: paSemanticTokens.colors.icon.onDark,
 	iconDisabled: paSemanticTokens.colors.icon.disabled,
 	iconDisabledOnDark: paSemanticTokens.colors.icon.disabledOnDark,
-	transparentBlue18: paColorsTokens.blue.base,
-	transparentBlue8: paColorsTokens.transparentBlue.transparentBlue8,
 }

package/src/designTokens/tokens/pa/paSemantic.ts

@@ -22,7 +22,7 @@ export const paSemanticTokens = {
 			errorSubdued: '#fcedeb',
 			errorContrasted: '#b33f2e',
 			disabled: '#dddede',
-			disabledOnDark: 'rgba(255, 255, 255, 0.0800)',
+			disabledOnDark: 'rgba(255, 255, 255, 0.08)',
 			assure: '#ed76b3',
 			professionnel: '#66c9ec',
 			entreprise: '#f0b323',
@@ -76,11 +76,11 @@ export const paSemanticTokens = {
 			onLight: '#0c419a',
 		},
 		interactive: {
-			default: 'rgba(255, 255, 255, 0.0000)',
+			default: 'rgba(255, 255, 255, 0)',
 			hover: '#e7ecf5',
 			pressed: '#ced9eb',
 			focus: '#e7ecf5',
-			disabled: 'rgba(255, 255, 255, 0.0000)',
+			disabled: 'rgba(255, 255, 255, 0)',
 			hoverOnSelected: '#ced9eb',
 		},
 	},

package/src/stories/Accessibilite/KitDePreAudit/Echantillonnage.mdx

@@ -37,4 +37,4 @@ Certains contenus sont exemptés de l’obligation d’accessibilité et se situ
 7. Les contenus des intranets et des extranets publiés avant le 23 septembre 2019, jusqu’à ce que ces sites fassent l’objet d’une révision en profondeur ;
 8. Les contenus des sites internet et des applications mobiles qui ne sont ni nécessaires à l’accomplissement d’une démarche administrative active ni mis à jour ou modifiés après le 23 septembre 2019, notamment les archives.
 
-Il existe un système de dérogation dans la mise en conformité d’un service numérique à l’accessible : la charge disproportionnée. Elle permet de déroger à certaines règles d'accessibilité lorsque leur mise en œuvre engendre une charge excessive pour l'organisation. Cela peut inclure des contraintes techniques, financières ou temporelles qui rendent la conformité à une norme spécifique difficile ou irréalisable. L’absence de priorité, le manque de temps ou de connaissance ne sont pas des circonstances légitimes de dérogations. Cette dérogation doit être justifiée, documentée et nécessite un accord auprès de la DSI de la CNAM. De plus, des solutions alternatives doivent être proposées pour garantir un accès maximal aux utilisateurs en situation de handicap.
+Il existe un système de dérogation dans la mise en conformité d’un service numérique à l’accessible : la charge disproportionnée. Elle permet de déroger à certaines règles d'accessibilité lorsque leur mise en œuvre engendre une charge excessive pour l'organisation. Cela peut inclure des contraintes techniques, financières ou temporelles qui rendent la conformité à une norme spécifique difficile ou irréalisable. L’absence de priorité, le manque de temps ou de connaissance ne sont pas des circonstances légitimes de dérogations. Cette dérogation doit être justifiée, documentée et nécessite un accord auprès du comité de gouvernance de la l'accessibilité numérique (en attendant sa création, c'est la Filière Digital qui en a le mandat). De plus, des solutions alternatives doivent être proposées pour garantir un accès maximal aux utilisateurs en situation de handicap.

package/src/stories/DesignTokens/ColorDisplay.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { VContainer, VRow, VCol, VCard, VCardTitle, VCardSubtitle } from 'vuetify/components'
+
+	interface Props {
+		colorCategory: string
+		cnamColors: Record<string, string>
+		paColors: Record<string, string>
+	}
+
+	const props = defineProps<Props>()
+
+	const theme = computed(() => typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam')
+	const displayColors = computed(() => theme.value === 'cnam' ? props.cnamColors : props.paColors)
+
+	const isEmptyObject = (obj: Record<string, string>) => {
+		return Object.keys(obj).length === 0
+	}
+</script>
+
+<template>
+	<VContainer>
+		<VRow v-if="!isEmptyObject(displayColors)">
+			<VCol
+				v-for="(color, name) in displayColors"
+				:key="name"
+				cols="6"
+				md="3"
+				sm="4"
+			>
+				<VCard color="grey-lighten-4">
+					<VCardTitle style="font-size: medium;">
+						{{ name }}
+					</VCardTitle>
+					<VCardSubtitle>{{ color }}</VCardSubtitle>
+					<VCard
+						height="70px"
+						class="color"
+					>
+						<div :style="{ backgroundColor: color, height: '100%', width: '100%' }" />
+					</VCard>
+				</VCard>
+			</VCol>
+		</VRow>
+		<div
+			v-else
+			class="text-grey"
+		>
+			Couleurs en cours définition.
+		</div>
+	</VContainer>
+</template>
+
+<style lang="scss" scoped>
+	.v-card--variant-elevated.color {
+		background: transparent !important;
+	}
+</style>