@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

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

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import { formatDate, parseDate } from '../useDateFormat'
+
+describe('useDateFormat', () => {
+	describe('formatDate', () => {
+		it('formats a Date object to string according to the specified format', () => {
+			const date = new Date(2023, 0, 15) // 15 janvier 2023
+			expect(formatDate(date, 'DD/MM/YYYY')).toBe('15/01/2023')
+			expect(formatDate(date, 'YYYY-MM-DD')).toBe('2023-01-15')
+			expect(formatDate(date, 'MM.DD.YYYY')).toBe('01.15.2023')
+		})
+
+		it('returns empty string when date is null or undefined', () => {
+			expect(formatDate(null as unknown as Date, 'DD/MM/YYYY')).toBe('')
+			expect(formatDate(undefined as unknown as Date, 'DD/MM/YYYY')).toBe('')
+		})
+
+		it('handles different date formats correctly', () => {
+			const date = new Date(2023, 11, 31) // 31 décembre 2023
+			expect(formatDate(date, 'DD/MM/YYYY')).toBe('31/12/2023')
+			expect(formatDate(date, 'D/M/YYYY')).toBe('31/12/2023')
+			expect(formatDate(date, 'YYYY-MM-DD')).toBe('2023-12-31')
+			expect(formatDate(date, 'MM/DD/YYYY')).toBe('12/31/2023')
+		})
+
+		it('handles custom separators correctly', () => {
+			const date = new Date(2023, 0, 15) // 15 janvier 2023
+			expect(formatDate(date, 'DD.MM.YYYY')).toBe('15.01.2023')
+			expect(formatDate(date, 'DD-MM-YYYY')).toBe('15-01-2023')
+			expect(formatDate(date, 'YYYY/MM/DD')).toBe('2023/01/15')
+		})
+	})
+
+	describe('parseDate', () => {
+		it('parses a date string to a Date object according to the specified format', () => {
+			const dateStr = '15/01/2023'
+			const date = parseDate(dateStr, 'DD/MM/YYYY')
+			expect(date).toBeInstanceOf(Date)
+			expect(date?.getFullYear()).toBe(2023)
+			expect(date?.getMonth()).toBe(0) // Janvier = 0
+			expect(date?.getDate()).toBe(15)
+		})
+
+		it('returns null for invalid date strings', () => {
+			expect(parseDate('invalid', 'DD/MM/YYYY')).toBeNull()
+			expect(parseDate('31/02/2023', 'DD/MM/YYYY')).toBeNull() // 31 février n'existe pas
+		})
+
+		it('handles different date formats correctly', () => {
+			expect(parseDate('2023-01-15', 'YYYY-MM-DD')?.getDate()).toBe(15)
+			expect(parseDate('01/15/2023', 'MM/DD/YYYY')?.getDate()).toBe(15)
+			expect(parseDate('15.01.2023', 'DD.MM.YYYY')?.getDate()).toBe(15)
+		})
+
+		it('returns null when input is null or empty', () => {
+			expect(parseDate(null as unknown as string, 'DD/MM/YYYY')).toBeNull()
+			expect(parseDate('', 'DD/MM/YYYY')).toBeNull()
+		})
+
+		it('handles leap years correctly', () => {
+			// 2020 était une année bissextile
+			expect(parseDate('29/02/2020', 'DD/MM/YYYY')).not.toBeNull()
+			// 2023 n'est pas une année bissextile
+			expect(parseDate('29/02/2023', 'DD/MM/YYYY')).toBeNull()
+		})
+	})
+})

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

@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest'
+import { initializeSelectedDates, type DateInput } from '../useDateInitialization'
+
+describe('useDateInitialization', () => {
+	describe('initializeSelectedDates', () => {
+		it('returns null when modelValue is null or undefined', () => {
+			expect(initializeSelectedDates(null, 'DD/MM/YYYY')).toBeNull()
+			expect(initializeSelectedDates(null as unknown as DateInput, 'DD/MM/YYYY')).toBeNull()
+		})
+
+		it('parses a single date string correctly', () => {
+			const result = initializeSelectedDates('15/01/2023', 'DD/MM/YYYY')
+			expect(result).toBeInstanceOf(Date)
+
+			const date = result as Date
+			expect(date.getFullYear()).toBe(2023)
+			expect(date.getMonth()).toBe(0) // Janvier = 0
+			expect(date.getDate()).toBe(15)
+		})
+
+		it('parses an array of date strings correctly', () => {
+			const result = initializeSelectedDates(['15/01/2023', '20/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+
+			const dates = result as Date[]
+			expect(dates.length).toBe(2)
+
+			expect(dates[0].getFullYear()).toBe(2023)
+			expect(dates[0].getMonth()).toBe(0)
+			expect(dates[0].getDate()).toBe(15)
+
+			expect(dates[1].getFullYear()).toBe(2023)
+			expect(dates[1].getMonth()).toBe(0)
+			expect(dates[1].getDate()).toBe(20)
+		})
+
+		it('returns empty array when dates are invalid', () => {
+			const result = initializeSelectedDates(['invalid', '20/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+			expect(result).toHaveLength(0)
+		})
+
+		it('returns empty array when first date is after second date', () => {
+			const result = initializeSelectedDates(['25/01/2023', '20/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+			expect(result).toHaveLength(0)
+		})
+
+		it('handles single element array correctly', () => {
+			const result = initializeSelectedDates(['15/01/2023'], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+
+			const dates = result as Date[]
+			expect(dates.length).toBe(1)
+
+			expect(dates[0].getFullYear()).toBe(2023)
+			expect(dates[0].getMonth()).toBe(0)
+			expect(dates[0].getDate()).toBe(15)
+		})
+
+		it('returns empty array for empty array input', () => {
+			const result = initializeSelectedDates([], 'DD/MM/YYYY')
+			expect(Array.isArray(result)).toBe(true)
+			expect(result).toHaveLength(0)
+		})
+
+		it('handles different display and return formats correctly', () => {
+			// Date au format de retour
+			const result1 = initializeSelectedDates('2023-01-15', 'DD/MM/YYYY', 'YYYY-MM-DD')
+			expect(result1).toBeInstanceOf(Date)
+			expect((result1 as Date).getDate()).toBe(15)
+
+			// Date au format d'affichage quand le format de retour est différen
+			const result2 = initializeSelectedDates('15/01/2023', 'DD/MM/YYYY', 'YYYY-MM-DD')
+			expect(result2).toBeInstanceOf(Date)
+			expect((result2 as Date).getDate()).toBe(15)
+		})
+
+		it('returns null for object input', () => {
+			const result = initializeSelectedDates({}, 'DD/MM/YYYY')
+			expect(result).toBeNull()
+		})
+
+		it('handles invalid date strings correctly', () => {
+			const result = initializeSelectedDates('invalid', 'DD/MM/YYYY')
+			expect(result).toBeNull()
+		})
+	})
+})

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

@@ -0,0 +1,180 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { useDatePickerAccessibility } from '../useDatePickerAccessibility'
+
+describe('useDatePickerAccessibility', () => {
+	let { updateAccessibility, handleKeyDown } = useDatePickerAccessibility()
+
+	beforeEach(() => {
+		// 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 = `
+			<div class="v-date-picker">
+				<div class="v-date-picker-header">
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<i class="v-icon mdi mdi-chevron-left"></i>
+						</span>
+					</button>
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<div>Janvier 2023</div>
+						</span>
+					</button>
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<i class="v-icon mdi mdi-chevron-right"></i>
+						</span>
+					</button>
+				</div>
+			</div>
+		`
+	})
+
+	it('sets correct aria-label attributes on navigation buttons', async () => {
+		// Appeler la fonction updateAccessibility
+		await updateAccessibility()
+
+		// Récupérer les boutons
+		const buttons = document.querySelectorAll('.v-date-picker-header button')
+
+		// Vérifier que les attributs aria-label sont correctement définis
+		expect(buttons[0].getAttribute('aria-label')).toBe('Mois précédent')
+		expect(buttons[1].getAttribute('aria-label')).toBe(null) // Pas d'icône, donc pas d'attribu
+		expect(buttons[2].getAttribute('aria-label')).toBe('Mois suivant')
+	})
+
+	it('handles missing elements gracefully', async () => {
+		// Supprimer les éléments du DOM
+		document.body.innerHTML = ''
+
+		// La fonction ne devrait pas générer d'erreur même si les éléments n'existent pas
+		await expect(updateAccessibility()).resolves.not.toThrow()
+	})
+
+	it('handles different icons correctly', async () => {
+		// Modifier les icônes
+		document.body.innerHTML = `
+			<div class="v-date-picker">
+				<div class="v-date-picker-header">
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<i class="v-icon mdi mdi-arrow-left"></i>
+						</span>
+					</button>
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<div>Janvier 2023</div>
+						</span>
+					</button>
+					<button class="v-btn v-btn--icon">
+						<span class="v-btn__content">
+							<i class="v-icon mdi mdi-arrow-right"></i>
+						</span>
+					</button>
+				</div>
+			</div>
+		`
+
+		// Appeler la fonction updateAccessibility
+		await updateAccessibility()
+
+		// Récupérer les boutons
+		const buttons = document.querySelectorAll('.v-date-picker-header button')
+
+		// Vérifier que les attributs aria-label sont correctement définis
+		expect(buttons[0].getAttribute('aria-label')).toBe(null) // Pas de chevron-lef
+		expect(buttons[1].getAttribute('aria-label')).toBe(null) // Pas d'icône
+		expect(buttons[2].getAttribute('aria-label')).toBe(null) // Pas de chevron-righ
+	})
+
+	it('adds sr-only instructions to the DatePicker', async () => {
+		// Appeler updateAccessibility
+		await updateAccessibility()
+
+		// 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 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/useDateFormat.ts

@@ -0,0 +1,94 @@
+/**
+ * Composable pour le formatage et le parsing des dates
+ */
+
+/**
+ * Parse une chaîne de caractères en objet Date selon un format spécifié
+ * @param dateString - La chaîne de caractères à parser
+ * @param format - Le format de la date (ex: 'DD/MM/YYYY')
+ * @returns Un objet Date ou null si la chaîne n'est pas valide
+ */
+export const parseDate = (dateString: string, format: string): Date | null => {
+	if (!dateString) return null
+
+	// Créer un mapping des positions des éléments de date selon le format
+	const separator = format.includes('/') ? '/' : format.includes('-') ? '-' : '.'
+	const parts = format.split(separator)
+	const dateParts = dateString.split(separator)
+
+	if (parts.length !== dateParts.length) return null
+
+	let day = 0, month = 0, year = 0
+
+	// Extraire les valeurs selon leur position dans le format
+	parts.forEach((part, index) => {
+		const value = parseInt(dateParts[index], 10)
+		if (isNaN(value)) return
+
+		if (part.includes('DD') || part.includes('D')) day = value
+		else if (part.includes('MM') || part.includes('M')) month = value - 1 // Les mois en JS sont 0-indexés
+		else if (part.includes('YYYY')) year = value
+		else if (part.includes('YY')) {
+			// Gestion intelligente des années à 2 chiffres
+			// Si l'année est < 50, on considère qu'elle est dans le 21ème siècle
+			// Sinon, elle est dans le 20ème siècle
+			year = value < 50 ? 2000 + value : 1900 + value
+		}
+	})
+
+	// Vérifier que nous avons toutes les parties nécessaires et qu'elles sont dans des plages valides
+	if (day < 1 || day > 31 || month < 0 || month > 11 || year < 1000 || year > 9999) return null
+
+	// Créer la date à midi (12:00) pour éviter les problèmes de décalage de fuseau horaire
+	// Cela garantit que la date reste la même lors de la conversion en UTC
+	const date = new Date(year, month, day, 12, 0, 0)
+
+	// Vérifier que la date est valide (par exemple, 31 février n'existe pas)
+	if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) return null
+
+	return date
+}
+
+/**
+ * Formate une date selon un format spécifié
+ * @param date - La date à formater
+ * @param format - Le format de sortie (ex: 'DD/MM/YYYY')
+ * @returns La date formatée en chaîne de caractères
+ */
+export const formatDate = (date: Date, format: string): string => {
+	if (!date) return ''
+
+	// Formats de base
+	const day = date.getDate().toString().padStart(2, '0')
+	const month = (date.getMonth() + 1).toString().padStart(2, '0')
+	const year = date.getFullYear().toString()
+	const shortYear = year.slice(-2)
+
+	// Formats sans padding
+	const dayNoPad = date.getDate().toString()
+	const monthNoPad = (date.getMonth() + 1).toString()
+
+	// Remplacer les tokens dans l'ordre correct (du plus spécifique au moins spécifique)
+	const result = format
+		.replace(/YYYY/g, year)
+		.replace(/YY/g, shortYear)
+		.replace(/MM/g, month)
+		.replace(/M/g, monthNoPad)
+		.replace(/DD/g, day)
+		.replace(/D/g, dayNoPad)
+
+	return result
+}
+
+/**
+ * Hook composable pour le formatage et le parsing des dates
+ * @returns Fonctions de formatage et parsing de dates
+ */
+export function useDateFormat() {
+	return {
+		parseDate,
+		formatDate,
+	}
+}
+
+export default useDateFormat

package/src/composables/date/useDateInitialization.ts

@@ -0,0 +1,92 @@
+/**
+ * Composable pour l'initialisation des dates dans le DatePicker
+ */
+import { parseDate } from './useDateFormat'
+
+// Types
+export type DateValue = string | [string, string] | null
+export type DateInput = string | string[] | null | object
+
+/**
+ * Initialise les dates sélectionnées à partir d'une valeur d'entrée
+ * @param modelValue - La valeur d'entrée (peut être une chaîne, un tableau, null ou un objet)
+ * @param displayFormat - Le format d'affichage des dates
+ * @param returnFormat - Le format de retour des dates (optionnel)
+ * @returns Une date, un tableau de dates ou null
+ */
+export const initializeSelectedDates = (
+	modelValue: DateInput | null,
+	displayFormat: string,
+	returnFormat: string = '',
+): Date | Date[] | null => {
+	if (!modelValue) return null
+
+	// Déterminer le format à utiliser pour l'analyse
+	const parseFormat = returnFormat || displayFormat
+
+	if (Array.isArray(modelValue)) {
+		if (modelValue.length >= 2) {
+			// Essayer d'abord avec le format de retour, puis avec le format d'affichage
+			let dates = [parseDate(modelValue[0], parseFormat), parseDate(modelValue[1], parseFormat)]
+
+			// Si l'une des dates est invalide avec le format de retour, essayer avec le format d'affichage
+			if (dates.some(date => date === null) && returnFormat) {
+				dates = [parseDate(modelValue[0], displayFormat), parseDate(modelValue[1], displayFormat)]
+			}
+
+			// Vérifie si l'une des dates est toujours invalide
+			if (dates.some(date => date === null)) {
+				return []
+			}
+
+			// Vérifie si la première date est après la seconde
+			if (dates[0] && dates[1] && dates[0] > dates[1]) {
+				return []
+			}
+
+			// Filtrer les dates nulles et convertir en tableau de Date
+			return dates.filter((date): date is Date => date !== null)
+		}
+
+		if (modelValue.length === 1) {
+			// Essayer d'abord avec le format de retour, puis avec le format d'affichage
+			let date = parseDate(modelValue[0], parseFormat)
+
+			// Si la date est invalide avec le format de retour, essayer avec le format d'affichage
+			if (date === null && returnFormat) {
+				date = parseDate(modelValue[0], displayFormat)
+			}
+
+			return date === null ? [] : [date]
+		}
+
+		return []
+	}
+
+	// Si modelValue est un objet, on le convertit en chaîne
+	if (typeof modelValue === 'object') {
+		return null
+	}
+
+	// Essayer d'abord avec le format de retour, puis avec le format d'affichage
+	let date = parseDate(modelValue, parseFormat)
+
+	// Si la date est invalide avec le format de retour, essayer avec le format d'affichage
+	if (date === null && returnFormat) {
+		date = parseDate(modelValue, displayFormat)
+	}
+
+	return date === null ? null : date
+}
+
+/**
+ * Hook composable pour l'initialisation des dates
+ * @returns Fonction d'initialisation des dates
+ */
+export function useDateInitialization() {
+	return {
+		initializeSelectedDates,
+	}
+}
+
+export default useDateInitialization

package/src/composables/date/useDatePickerAccessibility.ts

@@ -0,0 +1,123 @@
+/**
+ * Composable pour améliorer l'accessibilité du DatePicker
+ */
+import { nextTick } from 'vue'
+
+/**
+ * Améliore l'accessibilité du DatePicker en ajoutant des attributs ARIA et des instructions pour les lecteurs d'écran
+ * @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
+	 */
+	const updateAccessibility = async (): Promise<void> => {
+		await nextTick()
+
+		// Utiliser des attributs data pour sélectionner les éléments, ce qui est plus stable que les classes CSS
+		const datePickerEl = document.querySelector('.v-date-picker')
+		if (!datePickerEl) return
+
+		// Ajouter un attribut role="application" au conteneur principal
+		datePickerEl.setAttribute('role', 'application')
+		datePickerEl.setAttribute('aria-label', 'Sélecteur de date')
+
+		// Sélectionner tous les boutons de navigation
+		const navigationButtons = datePickerEl.querySelectorAll('button')
+
+		// Attribuer des labels significatifs basés sur la position ou l'icône
+		navigationButtons.forEach((button) => {
+			const iconEl = button.querySelector('.v-icon')
+			if (!iconEl) return
+
+			// Utiliser le contenu de l'icône pour déterminer sa fonction
+			const iconContent = iconEl.textContent || ''
+			const iconClasses = iconEl.className || ''
+
+			if (iconClasses.includes('mdi-chevron-left') || iconContent.includes('chevron-left')) {
+				button.setAttribute('aria-label', 'Mois précédent')
+			}
+			else if (iconClasses.includes('mdi-chevron-right') || iconContent.includes('chevron-right')) {
+				button.setAttribute('aria-label', 'Mois suivant')
+			}
+			else if (iconClasses.includes('mdi-chevron-down') || iconContent.includes('chevron-down')
+				|| iconClasses.includes('mdi-menu-down') || iconContent.includes('menu-down')) {
+				button.setAttribute('aria-label', 'Changer de vue')
+			}
+		})
+
+		// Ajouter des instructions pour les lecteurs d'écran
+		let srOnlyEl = datePickerEl.querySelector('.sr-only-instructions')
+		if (!srOnlyEl) {
+			srOnlyEl = document.createElement('span')
+			srOnlyEl.className = 'sr-only-instructions'
+			srOnlyEl.setAttribute('aria-live', 'polite')
+			// Utiliser HTMLElement pour accéder aux propriétés de style
+			const srOnlyHtmlEl = srOnlyEl as HTMLElement
+			srOnlyHtmlEl.style.position = 'absolute'
+			srOnlyHtmlEl.style.width = '1px'
+			srOnlyHtmlEl.style.height = '1px'
+			srOnlyHtmlEl.style.padding = '0'
+			srOnlyHtmlEl.style.margin = '-1px'
+			srOnlyHtmlEl.style.overflow = 'hidden'
+			srOnlyHtmlEl.style.clip = 'rect(0, 0, 0, 0)'
+			srOnlyHtmlEl.style.whiteSpace = 'nowrap'
+			srOnlyHtmlEl.style.border = '0'
+			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,
+	}
+}
+
+export default useDatePickerAccessibility