@cnamts/synapse 0.0.12-alpha → 0.0.13-alpha

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

@@ -0,0 +1,102 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useDatePickerAccessibility } from '../useDatePickerAccessibility'
+
+describe('useDatePickerAccessibility', () => {
+	let { updateAccessibility } = useDatePickerAccessibility()
+
+	beforeEach(() => {
+		// Réinitialiser la fonction pour chaque tes
+		const { updateAccessibility: newUpdateAccessibility } = useDatePickerAccessibility()
+		updateAccessibility = newUpdateAccessibility
+
+		// 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 les flèches pour naviguer entre les dates et Entrée pour sélectionner une date')
+	})
+})

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,78 @@
+/**
+ * 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 Une fonction pour mettre à jour l'accessibilité du DatePicker
+ */
+export function useDatePickerAccessibility() {
+	/**
+	 * 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 les flèches pour naviguer entre les dates et Entrée pour sélectionner une date'
+
+			datePickerEl.prepend(srOnlyEl)
+		}
+	}
+
+	return {
+		updateAccessibility,
+	}
+}
+
+export default useDatePickerAccessibility