@cnamts/synapse 1.0.23 → 1.0.24

package/src/components/DatePicker/composables/useCalendarKeyboardNavigation.ts

@@ -28,20 +28,162 @@ export const useCalendarKeyboardNavigation = (options: CalendarKeyboardNavigatio
 	} = options
 
 	const addDays = (date: Date, amount: number) => dayjs(date).add(amount, 'day').toDate()
+	const addMonths = (date: Date, amount: number) => dayjs(date).add(amount, 'month').toDate()
+	const addYears = (date: Date, amount: number) => dayjs(date).add(amount, 'year').toDate()
 
 	const toISO = (date: Date) => dayjs(date).format('YYYY-MM-DD')
 
 	let isListenerAttached = false
 
+	const focusMonthButton = (button: HTMLButtonElement | undefined | null) => {
+		button?.focus({ preventScroll: true })
+	}
+
+	const focusYearButton = (button: HTMLButtonElement | undefined | null) => {
+		if (!button) return
+		button.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+		button.focus({ preventScroll: true })
+	}
+
+	const handleMonthDialogNavigation = (event: KeyboardEvent): boolean => {
+		const targetBtn = (event.target as HTMLElement | null)?.closest<HTMLButtonElement>('.v-date-picker-months button')
+		if (!targetBtn) return false
+
+		const buttons = Array.from(document.querySelectorAll<HTMLButtonElement>('.v-date-picker-months button')).filter(btn => !btn.disabled)
+		if (buttons.length === 0) return false
+
+		const currentIndex = buttons.indexOf(targetBtn)
+		if (currentIndex === -1) return false
+
+		const key = event.key
+
+		// Enter/Space : click manuel sans scroll pour garantir l'activation
+		if (key === 'Enter' || key === ' ') {
+			event.preventDefault()
+			targetBtn.click()
+			focusMonthButton(targetBtn)
+			return true
+		}
+
+		if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(key)) return false
+
+		event.preventDefault()
+
+		const firstRowTop = buttons[0]?.offsetTop ?? 0
+		const columns = buttons.filter(btn => btn.offsetTop === firstRowTop).length || 3
+
+		const moveIndex = (delta: number) => {
+			const nextIndex = Math.min(Math.max(currentIndex + delta, 0), buttons.length - 1)
+			focusMonthButton(buttons[nextIndex])
+		}
+
+		switch (key) {
+			case 'ArrowLeft':
+				moveIndex(-1)
+				return true
+			case 'ArrowRight':
+				moveIndex(1)
+				return true
+			case 'ArrowUp':
+				moveIndex(-columns)
+				return true
+			case 'ArrowDown':
+				moveIndex(columns)
+				return true
+			case 'Home':
+				focusMonthButton(buttons[0])
+				return true
+			case 'End':
+				focusMonthButton(buttons[buttons.length - 1])
+				return true
+		}
+
+		return false
+	}
+
+	const handleYearDialogNavigation = (event: KeyboardEvent): boolean => {
+		const targetBtn = (event.target as HTMLElement | null)?.closest<HTMLButtonElement>('.v-date-picker-years button')
+		if (!targetBtn) return false
+
+		const buttons = Array.from(document.querySelectorAll<HTMLButtonElement>('.v-date-picker-years button')).filter(btn => !btn.disabled)
+		if (buttons.length === 0) return false
+
+		const currentIndex = buttons.indexOf(targetBtn)
+		if (currentIndex === -1) return false
+
+		const key = event.key
+
+		if (key === 'Enter' || key === ' ') {
+			event.preventDefault()
+			targetBtn.click()
+			focusYearButton(targetBtn)
+			return true
+		}
+
+		if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(key)) return false
+
+		event.preventDefault()
+
+		const firstRowTop = buttons[0]?.offsetTop ?? 0
+		const columns = buttons.filter(btn => btn.offsetTop === firstRowTop).length || 3
+
+		const moveIndex = (delta: number) => {
+			const nextIndex = Math.min(Math.max(currentIndex + delta, 0), buttons.length - 1)
+			focusYearButton(buttons[nextIndex])
+		}
+
+		switch (key) {
+			case 'ArrowLeft':
+				moveIndex(-1)
+				return true
+			case 'ArrowRight':
+				moveIndex(1)
+				return true
+			case 'ArrowUp':
+				moveIndex(-columns)
+				return true
+			case 'ArrowDown':
+				moveIndex(columns)
+				return true
+			case 'Home':
+				focusYearButton(buttons[0])
+				return true
+			case 'End':
+				focusYearButton(buttons[buttons.length - 1])
+				return true
+		}
+
+		return false
+	}
+
 	const getBaseDateFromEvent = (event: KeyboardEvent): { date: Date | null, fromDayCell: boolean } => {
 		const target = event.target as HTMLElement | null
+		// Chercher d'abord avec data-v-date, puis avec les classes Vuetify
 		const dayWrapper = target?.closest<HTMLElement>('[data-v-date]')
-		const iso = dayWrapper?.getAttribute('data-v-date')
+			|| target?.closest<HTMLElement>('.v-date-picker-month__day')
+
+		// Essayer d'abord l'attribut data-v-date
+		let iso = dayWrapper?.getAttribute('data-v-date')
+
+		// Si pas d'attribut data-v-date, essayer de récupérer la date depuis les classes Vuetify
+		if (!iso && dayWrapper) {
+			// Vuetify utilise souvent des classes spécifiques pour identifier les dates
+			// On peut essayer de récupérer la date depuis l'élément bouton lui-même
+			const button = dayWrapper.querySelector<HTMLElement>('.v-btn')
+			if (button) {
+				// Vuetify peut stocker la date dans un attribut data ou via aria-label
+				iso = button.getAttribute('data-date')
+					|| button.getAttribute('aria-label')?.split(' ').pop()
+			}
+		}
+
 		if (!iso) {
 			return { date: getCurrentDate(), fromDayCell: false }
 		}
 
-		const parsed = dayjs(iso, 'YYYY-MM-DD', true)
+		// Nettoyer le format si nécessaire (enlever le texte si c'est aria-label)
+		const cleanIso = iso.replace(/^\D+/, '')
+		const parsed = dayjs(cleanIso, 'YYYY-MM-DD', true)
 		if (!parsed.isValid()) {
 			return { date: getCurrentDate(), fromDayCell: false }
 		}
@@ -49,6 +191,147 @@ export const useCalendarKeyboardNavigation = (options: CalendarKeyboardNavigatio
 		return { date: parsed.toDate(), fromDayCell: true }
 	}
 
+	let latestFocusToken = 0
+
+	const focusDateButton = (date: Date, attempt = 0, token?: number) => {
+		if (attempt === 0) {
+			latestFocusToken++
+			token = latestFocusToken
+		}
+
+		// Si un autre focus a été demandé entre-temps, on annule
+		if (token !== latestFocusToken) return
+
+		// Utiliser setTimeout pour la première tentative pour laisser Vue et Vuetify commencer la mise à jour du DOM
+		if (attempt === 0) {
+			setTimeout(() => focusDateButton(date, 1, token), 10)
+			return
+		}
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const rootEl = (datePickerRef.value as any)?.$el as HTMLElement | undefined
+		if (!rootEl) return
+
+		const iso = toISO(date)
+		const dayNum = date.getDate()
+
+		// Exclure les éléments qui sont dans une fenêtre en cours de disparition
+		const isActiveContext = (el: Element) => {
+			const windowItem = el.closest('.v-window-item')
+			if (!windowItem) return true
+			const classes = Array.from(windowItem.classList)
+			const isLeaving = classes.some(c => c.includes('leave-active') || c.includes('leave-to') || c === 'v-window-item--leave')
+			return !isLeaving
+		}
+
+		const candidates: HTMLElement[] = []
+
+		// 1. Chercher par data-v-date
+		const dataDateElements = rootEl.querySelectorAll(`[data-v-date="${iso}"]`)
+		for (const el of Array.from(dataDateElements)) {
+			const btn = (el.tagName === 'BUTTON' ? el : el.querySelector('button')) as HTMLElement
+			if (btn && isActiveContext(btn)) candidates.push(btn)
+		}
+
+		// 2. Chercher par texte ou aria-label si vide
+		if (candidates.length === 0) {
+			const allButtons = rootEl.querySelectorAll<HTMLElement>('.v-date-picker-month__day .v-btn')
+			for (const btn of Array.from(allButtons)) {
+				if (!isActiveContext(btn)) continue
+				const text = btn.textContent?.trim() || ''
+				const ariaLabel = btn.getAttribute('aria-label') || ''
+				if (text === dayNum.toString() || new RegExp(`\\b${dayNum}\\b`).test(ariaLabel)) {
+					candidates.push(btn)
+				}
+			}
+		}
+
+		// Filtrer ceux qui ne sont pas visibles
+		const visibleCandidates = candidates.filter((btn) => {
+			// Autoriser les éléments en transition (opacity peut être 0 au tout début)
+			const windowItem = btn.closest('.v-window-item')
+			const isEntering = windowItem && Array.from(windowItem.classList).some(c => c.includes('enter-active') || c.includes('enter-to'))
+
+			if (!isEntering && btn.offsetParent === null) return false
+
+			const style = window.getComputedStyle(btn)
+			return style.display !== 'none' && style.visibility !== 'hidden'
+		})
+
+		if (visibleCandidates.length > 0) {
+			// Préférer les non-adjacents
+			visibleCandidates.sort((a, b) => {
+				const aAdj = a.closest('.v-date-picker-month__day--adjacent') ? 1 : 0
+				const bAdj = b.closest('.v-date-picker-month__day--adjacent') ? 1 : 0
+				return aAdj - bAdj
+			})
+
+			const bestCandidate = visibleCandidates[0]
+			if (bestCandidate) {
+				bestCandidate.focus({ preventScroll: true })
+
+				// Revérifier le focus après la durée typique d'une transition Vuetify (~350ms)
+				// car le DOM peut être re-rendu et l'élément détruit, ou le focus perdu pendant l'animation
+				if (attempt === 1) {
+					setTimeout(() => {
+						if (token === latestFocusToken && (document.activeElement !== bestCandidate || !bestCandidate.isConnected)) {
+							// Forcer un retry silencieux
+							focusDateButton(date, 2, token)
+						}
+					}, 350)
+				}
+				return
+			}
+		}
+
+		if (attempt < 15) {
+			setTimeout(() => focusDateButton(date, attempt + 1, token), 30)
+		}
+	}
+
+	const clickDateButton = (date: Date) => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+		const rootEl = (datePickerRef.value as any)?.$el as HTMLElement | undefined
+		if (!rootEl) return
+
+		const iso = toISO(date)
+
+		// Essayer plusieurs sélecteurs pour trouver le bouton du jour
+		const selectors = [
+			`[data-v-date="${iso}"] > [type="button"]`, // Bouton enfant direct avec data-v-date
+			`[data-v-date="${iso}"] button`, // N'importe quel bouton dans l'élément avec data-v-date
+			`[data-v-date="${iso}"] .v-btn`, // Bouton Vuetify spécifique avec data-v-date
+			`[data-v-date="${iso}"] [role="button"]`, // Élément avec role="button" et data-v-date
+			// Sélecteurs Vuetify sans data-v-date
+			`.v-date-picker-month__day:has(.v-btn[aria-label*="${date.getDate()}"]) .v-btn`,
+			`.v-date-picker-month__day .v-btn[aria-label*="${date.getDate()}"]`,
+		]
+
+		let dayButton: HTMLButtonElement | null = null
+		for (const selector of selectors) {
+			dayButton = rootEl.querySelector<HTMLButtonElement>(selector)
+			if (dayButton) {
+				break
+			}
+		}
+
+		// Si aucun sélecteur précis ne fonctionne, chercher par aria-label complet
+		if (!dayButton) {
+			const ariaLabelPattern = new RegExp(`\\b${date.getDate()}\\b`)
+			const allButtons = rootEl.querySelectorAll<HTMLElement>('.v-date-picker-month__day .v-btn')
+			for (const button of allButtons) {
+				const ariaLabel = button.getAttribute('aria-label')
+				if (ariaLabel && ariaLabelPattern.test(ariaLabel)) {
+					dayButton = button as HTMLButtonElement
+					break
+				}
+			}
+		}
+
+		dayButton?.click()
+		dayButton?.focus()
+	}
+
 	const handleArrowNavigation = (event: KeyboardEvent) => {
 		if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
 			return
@@ -59,47 +342,104 @@ export const useCalendarKeyboardNavigation = (options: CalendarKeyboardNavigatio
 			return
 		}
 
-		const { date: current, fromDayCell } = getBaseDateFromEvent(event)
+		// Laisser les flèches fonctionner nativement dans les contrôles d'entête
+		if ((event.target as HTMLElement | null)?.closest('.v-date-picker-controls')) return
+
+		// Si on n'a pas de date courante sélectionnée, on essaie de l'extraire du focus
+		const { date: current } = getBaseDateFromEvent(event)
+
+		// Si toujours aucune date n'est résolue, on abandonne
 		if (!current) return
 
 		event.preventDefault()
 
+		// Navigation normale des jours
 		let nextDate = current
-		// Si l'événement ne vient pas d'un jour du calendrier (par ex. après un
-		// changement de mois via les contrôles), on utilise la date de base
-		// telle quelle pour « entrer » dans le mois (souvent le 1er jour),
-		// sans appliquer immédiatement le décalage lié à la flèche. À partir du
-		// moment où le focus est sur un jour (fromDayCell = true), les flèches
-		// se comportent normalement.
-		if (fromDayCell) {
-			switch (event.key) {
-				case 'ArrowLeft':
-					nextDate = addDays(current, -1)
-					break
-				case 'ArrowRight':
-					nextDate = addDays(current, 1)
-					break
-				case 'ArrowUp':
-					nextDate = addDays(current, -7)
-					break
-				case 'ArrowDown':
-					nextDate = addDays(current, 7)
-					break
-			}
+		switch (event.key) {
+			case 'ArrowLeft':
+				nextDate = addDays(current, -1)
+				break
+			case 'ArrowRight':
+				nextDate = addDays(current, 1)
+				break
+			case 'ArrowUp':
+				nextDate = addDays(current, -7)
+				break
+			case 'ArrowDown':
+				nextDate = addDays(current, 7)
+				break
 		}
 
+		// Mettre à jour l'état (ce qui peut déclencher un changement de mois dans Vuetify)
 		setCurrentDate(nextDate)
 
-		nextTick(() => {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
-			const rootEl = (datePickerRef.value as any)?.$el as HTMLElement | undefined
-			if (!rootEl) return
+		// Forcer le focus sur le nouveau jour de manière résiliente
+		focusDateButton(nextDate)
+	}
 
-			const selector = `[data-v-date="${toISO(nextDate)}"] > [type="button"]`
-			const dayButton = rootEl.querySelector<HTMLElement>(selector)
+	const handleHomeEndPageNavigation = (event: KeyboardEvent) => {
+		if (!['Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {
+			return
+		}
 
-			dayButton?.focus()
-		})
+		// Pour la navigation de mois, toujours utiliser la date courante sélectionnée
+		// plutôt que de dépendre du DOM qui peut ne pas avoir le focus sur un jour
+		const current = getCurrentDate()
+		if (!current) return
+
+		// Respecter les combinaisons système (Ctrl/Alt/Meta), mais autoriser Shift pour année
+		if (event.altKey || event.ctrlKey || event.metaKey) {
+			return
+		}
+
+		event.preventDefault()
+
+		let nextDate = current
+		if (event.key === 'Home') {
+			nextDate = dayjs(current).startOf('month').toDate()
+		}
+		else if (event.key === 'End') {
+			nextDate = dayjs(current).endOf('month').toDate()
+		}
+		else if (event.key === 'PageUp') {
+			nextDate = event.shiftKey ? addYears(current, -1) : addMonths(current, -1)
+			// Focus sur le premier jour du mois précédent
+			nextDate = dayjs(nextDate).startOf('month').toDate()
+		}
+		else if (event.key === 'PageDown') {
+			nextDate = event.shiftKey ? addYears(current, 1) : addMonths(current, 1)
+			// Focus sur le premier jour du mois suivant
+			nextDate = dayjs(nextDate).startOf('month').toDate()
+		}
+
+		setCurrentDate(nextDate)
+		focusDateButton(nextDate)
+	}
+
+	const handleEnterSpaceNavigation = (event: KeyboardEvent) => {
+		if (!['Enter', ' '].includes(event.key)) {
+			return
+		}
+
+		// Gérer manuellement les contrôles d'entête (mois/année et flèches) car le composant natif est surchargé
+		const headerButton = (event.target as HTMLElement | null)?.closest<HTMLButtonElement>('.v-date-picker-controls button, .v-date-picker-header button')
+		if (headerButton) {
+			if (event.key === ' ' || event.key === 'Enter') {
+				event.preventDefault()
+				headerButton.click()
+				// Garder le focus sur le contrôle pour éviter la lecture de toute la grille
+				headerButton.focus({ preventScroll: true })
+				setTimeout(() => headerButton.focus({ preventScroll: true }), 0)
+			}
+			return
+		}
+
+		const { date: current, fromDayCell } = getBaseDateFromEvent(event)
+		if (!current || !fromDayCell) return
+
+		// Enter/Space : empêcher le scroll et déclencher la sélection explicite
+		event.preventDefault()
+		clickDateButton(current)
 	}
 
 	const keydownListener = (event: Event) => {
@@ -109,23 +449,89 @@ export const useCalendarKeyboardNavigation = (options: CalendarKeyboardNavigatio
 		// Ne pas interférer avec la saisie dans les champs de formulaire ou zones éditables
 		if (target) {
 			const tagName = target.tagName
-			if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT' || (target as HTMLElement).isContentEditable) {
+			if (tagName === 'INPUT' || tagName === 'TEXTAREA' || target.isContentEditable) {
 				return
 			}
 		}
 
+		// Ignorer les modificateurs sauf Shift pour PageUp/PageDown (année)
+		if (keyboardEvent.ctrlKey || keyboardEvent.altKey || keyboardEvent.metaKey) {
+			return
+		}
+
+		// Gérer les dialogues mois/année ouverts
+		if (handleMonthDialogNavigation(keyboardEvent) || handleYearDialogNavigation(keyboardEvent)) {
+			return
+		}
+
+		// Gérer la navigation fléchée
 		handleArrowNavigation(keyboardEvent)
+
+		// Gérer Home/End/Page navigation
+		handleHomeEndPageNavigation(keyboardEvent)
+
+		// Gérer Enter/Espace pour sélectionner
+		handleEnterSpaceNavigation(keyboardEvent)
 	}
 
 	const attachListeners = () => {
 		if (isListenerAttached) return
-		document.addEventListener('keydown', keydownListener as EventListener, true)
-		isListenerAttached = true
+
+		// Utiliser un watcher pour attendre que le VDatePicker soit disponible
+		const tryAttach = () => {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
+			const rootEl = (datePickerRef.value as any)?.$el as HTMLElement | undefined
+
+			// Chercher le conteneur parent avec tabindex="-1" (le focusTrap)
+			const containerEl = rootEl?.parentElement?.querySelector('[tabindex="-1"]') as HTMLElement | undefined
+				|| rootEl?.closest('[tabindex="-1"]') as HTMLElement | undefined
+
+			// Chercher le VDatePicker lui-même
+			const datePickerEl = rootEl?.querySelector('.v-date-picker') || rootEl
+
+			if (containerEl) {
+				// Attacher sur le conteneur du focusTrap (plus prioritaire que le document)
+				containerEl.addEventListener('keydown', keydownListener as EventListener, true)
+				isListenerAttached = true
+			}
+			else if (datePickerEl) {
+				// Attacher sur le VDatePicker directement
+				datePickerEl.addEventListener('keydown', keydownListener as EventListener, true)
+				isListenerAttached = true
+			}
+			else {
+				// Fallback : attacher sur le document
+				document.addEventListener('keydown', keydownListener as EventListener, true)
+				isListenerAttached = true
+			}
+		}
+
+		// Attendre plusieurs ticks pour être sûr que le focusTrap est déjà attaché
+		setTimeout(tryAttach, 100)
 	}
 
 	const detachListeners = () => {
 		if (!isListenerAttached) return
-		document.removeEventListener('keydown', keydownListener as EventListener, true)
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- sorry
+		const rootEl = (datePickerRef.value as any)?.$el as HTMLElement | undefined
+
+		// Chercher le conteneur parent avec tabindex="-1" (le focusTrap)
+		const containerEl = rootEl?.parentElement?.querySelector('[tabindex="-1"]') as HTMLElement | undefined
+			|| rootEl?.closest('[tabindex="-1"]') as HTMLElement | undefined
+
+		// Chercher le VDatePicker lui-même
+		const datePickerEl = rootEl?.querySelector('.v-date-picker') || rootEl
+
+		if (containerEl) {
+			containerEl.removeEventListener('keydown', keydownListener as EventListener, true)
+		}
+		else if (datePickerEl) {
+			datePickerEl.removeEventListener('keydown', keydownListener as EventListener, true)
+		}
+		else {
+			document.removeEventListener('keydown', keydownListener as EventListener, true)
+		}
+
 		isListenerAttached = false
 	}
 

package/src/components/DatePicker/composables/useDatePickerFocusTrap.ts

@@ -0,0 +1,92 @@
+import { type Ref } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+
+interface UseDatePickerFocusTrapOptions {
+	isDatePickerVisible: Ref<boolean>
+	datePickerRef: Ref<ComponentPublicInstance | null>
+	onClose?: () => void
+	restoreFocus?: () => void
+}
+
+const getFocusableElements = (root: HTMLElement): HTMLElement[] => {
+	const allFocusable = Array.from(root.querySelectorAll<HTMLElement>('button,[href],input,select,textarea,[tabindex]'))
+	return allFocusable.filter(el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true' && el.tabIndex !== -1)
+}
+
+export function useDatePickerFocusTrap(options: UseDatePickerFocusTrapOptions) {
+	const { isDatePickerVisible, datePickerRef, onClose, restoreFocus } = options
+
+	const handleMenuKeydown = (event: KeyboardEvent) => {
+		if (!isDatePickerVisible.value) return
+
+		// Ne gérer que Escape et Tab, laisser toutes les autres touches passer
+		if (event.key === 'Escape' || event.key === 'Esc') {
+			isDatePickerVisible.value = false
+			onClose?.()
+			restoreFocus?.()
+			event.preventDefault()
+			event.stopPropagation()
+			return
+		}
+
+		// Pour Tab, on gère mais on laisse les autres touches (flèches, etc.) passer complètement
+		if (event.key !== 'Tab') {
+			// Laisser toutes les autres touches passer sans aucune intervention
+			return
+		}
+
+		if (event.ctrlKey || event.altKey || event.metaKey) return // Laisser les combinaisons système
+
+		const root = (datePickerRef.value as ComponentPublicInstance | null)?.$el as HTMLElement | undefined
+		if (!root) return
+
+		// Empêcher la fermeture du menu avec Tab et garder le focus à l'intérieur
+		event.preventDefault()
+		event.stopPropagation()
+
+		const target = event.target as HTMLElement | null
+		const todayButton = root.querySelector<HTMLElement>('.date-picker__today-button')
+		const focusables = getFocusableElements(root)
+		const firstFocusable = focusables[0]
+		if (!firstFocusable) {
+			// Aucun focusable : rester dans le menu via le bouton Aujourd'hui si présent
+			todayButton?.focus({ preventScroll: true })
+			return
+		}
+
+		const active = document.activeElement as HTMLElement | null
+
+		// Si on appuie sur Tab (sans Shift) depuis la grille des jours, des mois ou des années,
+		// on force le focus vers le bouton Aujourd'hui (s'il existe)
+		const isFromGrid = Boolean(
+			target?.closest('.v-date-picker-months')
+			|| target?.closest('.v-date-picker-years')
+			|| target?.closest('.v-date-picker-month'),
+		)
+
+		if (!event.shiftKey && isFromGrid && todayButton) {
+			todayButton.focus({ preventScroll: true })
+			return
+		}
+
+		if (!event.shiftKey && active === focusables.at(-1)) {
+			firstFocusable.focus({ preventScroll: true })
+			return
+		}
+
+		if (event.shiftKey && active === focusables[0]) {
+			focusables.at(-1)?.focus({ preventScroll: true })
+			return
+		}
+
+		// Comportement par défaut : laisser Tab circuler mais au sein du menu
+		const baseActive = active ?? firstFocusable
+		const currentIndex = focusables.indexOf(baseActive)
+		const safeIndex = currentIndex === -1 ? 0 : currentIndex
+		const nextIndex = event.shiftKey ? (safeIndex - 1 + focusables.length) % focusables.length : (safeIndex + 1) % focusables.length
+		const nextFocusable = focusables[nextIndex]
+		nextFocusable?.focus({ preventScroll: true })
+	}
+
+	return { handleMenuKeydown }
+}

package/src/components/DatePicker/composables/useDateTextField.ts

@@ -17,14 +17,14 @@ export interface UseDateTextFieldManualValidationOptions {
 	isDateComplete: (value: string) => boolean
 	parseDate: (dateStr: string, format: string) => Date | null
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	validateField: (value: unknown, rules?: any[], warningRules?: any[]) => ValidationResult
+	validateField: (value: unknown, rules?: any[], warningRules?: any[]) => Promise<ValidationResult>
 }
 
 export interface UseDateTextFieldSubmitOptions {
 	isValidating: Ref<boolean>
 	hasInteracted: Ref<boolean>
 	inputValue: Ref<string>
-	runRules: (value: string) => boolean
+	runRules: (value: string) => Promise<boolean>
 }
 
 export interface UseDateTextFieldResetOptions {
@@ -71,15 +71,16 @@ export const useDateTextField = (options: UseDateTextFieldOptions) => {
 		isDateComplete: manualValidation.isDateComplete,
 		parseDate: manualValidation.parseDate,
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		validateField: manualValidation.validateField as (value: unknown, rules?: any[], warningRules?: any[]) => ValidationResult,
+		validateField: manualValidation.validateField as (value: unknown, rules?: any[], warningRules?: any[]) => Promise<ValidationResult>,
 	})
 
-	const validateOnSubmit = () => {
+	const validateOnSubmit = async () => {
 		if (!submit) return true
 		const { isValidating, hasInteracted, inputValue, runRules } = submit
 		isValidating.value = true
 		hasInteracted.value = true
-		const ok = runRules(inputValue.value)
+		const ok = await runRules(inputValue.value)
+		console.log('ok from validateOnSubmit:', ok)
 		isValidating.value = false
 		return ok
 	}
@@ -99,7 +100,7 @@ export const useDateTextField = (options: UseDateTextFieldOptions) => {
 			const formattedStartDate = startDateValidation.clampedDate || ''
 			const formattedEndDate = endDateValidation.clampedDate || ''
 
-			return formattedEndDate ? `${formattedStartDate} - ${formattedEndDate}` : formattedStartDate
+			return formattedEndDate ? `${formattedStartDate} - ${formattedEndDate}` : `${formattedStartDate} - `
 		}
 
 		const dateValidationResult = autoClampDate(raw, displayFormat.value)