@cnamts/synapse 1.0.15 → 1.0.17

package/src/components/DatePicker/CalendarMode/DatePicker.vue

@@ -1,20 +1,21 @@
 <script lang="ts" setup>
-	import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, type ComponentPublicInstance } from 'vue'
+	import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, type ComponentPublicInstance, type Ref } from 'vue'
 	import SyTextField from '../../Customs/SyTextField/SyTextField.vue'
 	import DateTextInput from '../DateTextInput/DateTextInput.vue'
 	import ComplexDatePicker from '../ComplexDatePicker/ComplexDatePicker.vue'
 	import { VDatePicker } from 'vuetify/components'
-	import { useValidation } from '@/composables/validation/useValidation'
+	import { useValidation, type ValidationResult } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { useDateFormat } from '@/composables/date/useDateFormatDayjs'
 	import { useDateInitialization, type DateValue, type DateInput } from '@/composables/date/useDateInitializationDayjs'
 	import { useDatePickerAccessibility } from '@/composables/date/useDatePickerAccessibility'
-	import { useWeekendDays, useTodayButton, useDatePickerViewMode, useDateSelection, useMonthButtonCustomization, useDisplayedDateString, useAsteriskDisplay } from '../composables'
+	import { useWeekendDays, useTodayButton, useDatePickerViewMode, useDateSelection, useMonthButtonCustomization, useDisplayedDateString, useAsteriskDisplay, useDateValidation, useDatePickerState, useHolidayHighlighting, useCalendarKeyboardNavigation } from '../composables'
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
 	import dayjs from 'dayjs'
 	import customParseFormat from 'dayjs/plugin/customParseFormat'
-	import { mdiCalendar } from '@mdi/js'
-	import { useHolidayDay } from '@/composables/date/useHolidayDay'
+	import { mdiCalendarMonthOutline } from '@mdi/js'
+	import type { DateObjectValue } from '../types'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	// Initialiser les plugins dayjs
 	dayjs.extend(customParseFormat)
@@ -31,7 +32,7 @@
 
 	const props = withDefaults(defineProps<{
 		modelValue?: DateInput
-		label?: string
+		label: string
 		placeholder?: string
 		format?: string
 		dateFormatReturn?: string
@@ -43,9 +44,9 @@
 		displayIcon?: boolean
 		displayAppendIcon?: boolean
 		displayPrependIcon?: boolean
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		customRules?: { type: string, options: any }[]
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock Axios headers
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		customWarningRules?: { type: string, options: any }[]
 		disabled?: boolean
 		noIcon?: boolean
@@ -75,8 +76,7 @@
 		persistentHint?: boolean
 	}>(), {
 		modelValue: undefined,
-		label: DATE_PICKER_MESSAGES.LABEL_DEFAULT,
-		placeholder: DATE_PICKER_MESSAGES.PLACEHOLDER_DEFAULT,
+		placeholder: undefined,
 		format: DATE_PICKER_MESSAGES.FORMAT_DEFAULT,
 		dateFormatReturn: '',
 		isBirthDate: false,
@@ -121,7 +121,7 @@
 	const { todayInString, headerDate } = useTodayButton(props)
 	const { labelWithAsterisk } = useAsteriskDisplay(props)
 
-	const selectedDates = ref<Date | Date[] | null>(
+	const selectedDates = ref<Date | (Date | null)[] | null>(
 		initializeSelectedDates(props.modelValue as DateInput | null, props.format, props.dateFormatReturn),
 	)
 
@@ -198,16 +198,59 @@
 			clearValidation: () => {},
 		}
 
+	const validateFieldForDateValidation = (
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- compat signature with useDateValidation
+		value: any,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- compat signature with useDateValidation
+		rules: any[] = [],
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- compat signature with useDateValidation
+		warningRules: any[] = [],
+	): ValidationResult => {
+		if (props.readonly) {
+			return {
+				hasError: false,
+				hasWarning: false,
+				hasSuccess: false,
+				state: {
+					errors: [],
+					warnings: [],
+					successes: [],
+				},
+			}
+		}
+
+		return validateField(value, rules, warningRules, []) as ValidationResult
+	}
+
 	const errorMessages = errors
 	const warningMessages = warnings
 	const successMessages = successes
-	const displayFormattedDate = ref('')
-
-	const textInputValue = ref<string>('')
 
 	// Variable pour éviter les mises à jour récursives
 	const isUpdatingFromInternal = ref(false)
+	const preventCloseOnKeyboardNavigation = ref(false)
 	const isInitialValidation = ref(true)
+	const currentRangeIsValid = ref(true)
+	const getRangeValidationError = ref('')
+
+	const { validateDates: coreValidateDates } = useDateValidation({
+		noCalendar: props.noCalendar,
+		// On garde la logique "required" spécifique à CalendarMode
+		required: false,
+		displayRange: props.displayRange,
+		disableErrorHandling: props.disableErrorHandling,
+		customRules: computed(() => props.customRules),
+		customWarningRules: computed(() => props.customWarningRules),
+		selectedDates: selectedDates as Ref<DateObjectValue>,
+		isUpdatingFromInternal,
+		currentRangeIsValid,
+		getRangeValidationError,
+		clearValidation,
+		validateField: validateFieldForDateValidation,
+		errors,
+		warnings,
+		successes,
+	})
 
 	// Fonction pour valider les dates
 	const validateDates = (forceValidation = false) => {
@@ -239,28 +282,27 @@
 			return
 		}
 		// Permettre aux custom rules de s'exécuter même sur des champs vides
-		if (!selectedDates.value && (!props.customRules || props.customRules.length === 0)) return
+		if (!selectedDates.value) {
+			if (!props.customRules || props.customRules.length === 0) return
 
-		// Préparer les dates à valider
-		const datesToValidate = Array.isArray(selectedDates.value)
-			? selectedDates.value
-			: [selectedDates.value]
-
-		// Valider chaque date
-		// Ne pas afficher d'erreurs de custom rules si on est dans le contexte du mounted initial
-		if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
-			datesToValidate.forEach((date) => {
+			if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
+				// Comportement historique : exécuter directement les règles personnalisées même si la valeur est vide
 				validateField(
-					date,
+					selectedDates.value,
 					props.customRules,
 					props.customWarningRules,
 				)
-			})
+				// Dédoublonner les messages comme auparavant
+				errors.value = [...new Set(errors.value)]
+				warnings.value = [...new Set(warnings.value)]
+				successes.value = [...new Set(successes.value)]
+			}
+			return
+		}
 
-			// Dédoublonner les messages (au cas où plusieurs dates auraient les mêmes messages)
-			errors.value = [...new Set(errors.value)]
-			warnings.value = [...new Set(warnings.value)]
-			successes.value = [...new Set(successes.value)]
+		// Ne pas afficher d'erreurs de custom rules si on est dans le contexte du mounted initial
+		if (shouldDisplayErrors && (!isInitialValidation.value || forceValidation)) {
+			coreValidateDates(forceValidation)
 		}
 	}
 
@@ -272,8 +314,10 @@
 		try {
 			isUpdatingFromInternal.value = true
 			emit('update:modelValue', value)
-			isDatePickerVisible.value = false
-			emit('closed')
+			if (!preventCloseOnKeyboardNavigation.value) {
+				isDatePickerVisible.value = false
+				emit('closed')
+			}
 			validateDates()
 		}
 		finally {
@@ -298,20 +342,17 @@
 			// Mettre à jour textInputValue pour le DateTextInput
 			try {
 				isUpdatingFromInternal.value = true
-				if (Array.isArray(newValue)) {
-					// Pour les plages de dates, formater correctement la plage complète
-					if (props.displayRange && newValue.length >= 2) {
-						// Formater la plage complète pour l'affichage
-						textInputValue.value = `${formatDate(newValue[0], props.format)} - ${formatDate(newValue[1], props.format)}`
-					}
-					else if (newValue.length > 0) {
-						// Si on n'a qu'une date ou mode non-range, utiliser la première date
-						textInputValue.value = formatDate(newValue[0], props.format)
+				if (Array.isArray(newValue) && props.displayRange && newValue.length >= 2 && props.noCalendar) {
+					// Cas spécifique noCalendar + displayRange : conserver la chaîne de plage complète
+					const start = newValue[0]
+					const end = newValue[1]
+					if (start && end) {
+						textInputValue.value = `${formatDate(start, props.format)} - ${formatDate(end, props.format)}`
 					}
 				}
 				else {
-					// Pour une date unique
-					textInputValue.value = formatDate(newValue, props.format)
+					// Cas générique : déléguer au composable pour synchroniser l'input
+					syncTextInputFromSelection()
 				}
 			}
 			finally {
@@ -342,50 +383,26 @@
 		props.displayRange,
 	)
 
-	// Date(s) formatée(s) en chaîne de caractères pour la valeur de retour
-	const formattedDate = computed<DateValue>(() => {
-		if (!selectedDates.value) return ''
-
-		const returnFormat = props.dateFormatReturn || props.format
-
-		// Pour les plages de dates, utiliser rangeBoundaryDates s'il est disponible
-		if (props.displayRange && rangeBoundaryDates.value) {
-			return [
-				formatDate(rangeBoundaryDates.value[0], returnFormat),
-				formatDate(rangeBoundaryDates.value[1], returnFormat),
-			] as [string, string]
-		}
-		else if (Array.isArray(selectedDates.value)) {
-			if (selectedDates.value.length >= 2) {
-				return [
-					formatDate(selectedDates.value[0], returnFormat),
-					formatDate(selectedDates.value[selectedDates.value.length - 1], returnFormat),
-				] as [string, string]
-			}
-			return ''
-		}
-
-		return formatDate(selectedDates.value, returnFormat)
+	const {
+		textInputValue,
+		displayFormattedDate,
+		formattedDate,
+		displayFormattedFromSelectedDates,
+		syncFromModelValue,
+		syncTextInputFromSelection,
+	} = useDatePickerState({
+		selectedDates,
+		rangeBoundaryDates,
+		format: props.format,
+		dateFormatReturn: props.dateFormatReturn,
+		displayRange: props.displayRange,
+		parseDate,
+		formatDate,
+		initializeSelectedDates,
+		validateDates,
+		updateModel,
 	})
 
-	watch(formattedDate, (newValue) => {
-		if (!newValue || newValue === '') {
-			textInputValue.value = ''
-		}
-		else if (typeof newValue === 'string') {
-			// Si on a un format de retour différent, on doit convertir la date
-			if (props.dateFormatReturn) {
-				const date = parseDate(newValue, props.dateFormatReturn)
-				if (date) {
-					textInputValue.value = formatDate(date, props.format)
-				}
-			}
-			else {
-				textInputValue.value = newValue
-			}
-		}
-	}, { immediate: true })
-
 	// Gestionnaire pour les mises à jour du DateTextInput en mode no-calendar
 	const handleDateTextInputUpdate = (value: DateValue) => {
 		if (isUpdatingFromInternal.value) return
@@ -493,22 +510,8 @@
 		}
 	})
 
-	// Date(s) formatée(s) en chaîne de caractères pour l'affichage
-	const displayFormattedDateComputed = computed(() => {
-		if (!selectedDates.value) return null
-
-		if (Array.isArray(selectedDates.value)) {
-			if (selectedDates.value.length >= 2) {
-				return `${formatDate(selectedDates.value[0], props.format)} - ${formatDate(
-					selectedDates.value[selectedDates.value.length - 1],
-					props.format,
-				)}`
-			}
-			return formatDate(selectedDates.value[0], props.format)
-		}
-
-		return formatDate(selectedDates.value, props.format)
-	})
+	// Date(s) formatée(s) en chaîne de caractères pour l'affichage (centralisée dans useDatePickerState)
+	const displayFormattedDateComputed = displayFormattedFromSelectedDates
 
 	watch(displayFormattedDateComputed, (newValue) => {
 		if (!props.noCalendar && newValue) {
@@ -589,6 +592,28 @@
 		document.removeEventListener('click', handleClickOutside)
 	})
 
+	useCalendarKeyboardNavigation({
+		isDatePickerVisible,
+		datePickerRef: datePickerRef as unknown as Ref<ComponentPublicInstance | null>,
+		getCurrentDate: () => {
+			const value = selectedDates.value
+			if (!value) return null
+
+			if (Array.isArray(value)) {
+				return value[0] ?? null
+			}
+
+			return value
+		},
+		setCurrentDate: (date: Date) => {
+			preventCloseOnKeyboardNavigation.value = true
+			updateSelectedDates([date])
+			queueMicrotask(() => {
+				preventCloseOnKeyboardNavigation.value = false
+			})
+		},
+	})
+
 	const validateOnSubmit = () => {
 		// Si le mode noCalendar est activé, on délègue la validation au DateTextInput
 		if (props.noCalendar) {
@@ -642,59 +667,16 @@
 		})
 	}
 
-	// Propriété calculée pour récupérer les jours fériés de l'année courante
-	const holidays = computed(() => {
-		// Utiliser le composable useHolidayDay pour récupérer les jours fériés
-		const { getJoursFeries } = useHolidayDay()
-
-		// Convertir l'année en nombre, utiliser l'année courante comme valeur par défaut
-		const year = parseInt(currentYear.value || new Date().getFullYear().toString(), 10)
-
-		// Récupérer les jours fériés au format DD/MM/YYYY
-		const joursFeries = getJoursFeries(year)
-
-		// Tableau pour stocker les jours fériés
-		const holidayDates: Date[] = []
-
-		// Convertir les dates du format string en objets Date
-		joursFeries.forEach((dateStr) => {
-			const [day, month, yearStr] = dateStr.split('/')
-			// Mois -1 car les mois dans Date sont indexés à partir de 0
-			holidayDates.push(new Date(parseInt(yearStr), parseInt(month) - 1, parseInt(day)))
-		})
-
-		// Retourner le tableau des jours fériés
-		return holidayDates
+	// Marquage des jours fériés partagé via le composable dédié
+	const { markHolidayDays } = useHolidayHighlighting({
+		currentMonth,
+		currentYear,
+		isDisplayHolidayDays: () => props.displayHolidayDays,
+		rootElement: computed(
+			() => datePickerRef.value?.$el as HTMLElement | null,
+		),
 	})
 
-	// Fonction pour marquer les jours fériés dans le calendrier
-	const markHolidayDays = () => {
-		if (!props.displayHolidayDays) return
-		// Attendre que le DOM soit mis à jour
-		nextTick(() => {
-			// Récupérer l'année et le mois courants
-			const year = parseInt(currentYear.value || new Date().getFullYear().toString(), 10)
-			// Utiliser currentMonth.value !== null pour vérifier si la valeur est définie, même si c'est 0
-			const month = parseInt(currentMonth.value !== null ? currentMonth.value : new Date().getMonth().toString(), 10)
-
-			// Récupérer les jours fériés pour ce mois
-			const monthHolidays = holidays.value.filter((holiday) => {
-				// La comparaison doit tenir compte du fait que getMonth() retourne 0-11
-				return holiday.getMonth() === month
-			})
-
-			// Pour chaque jour férié, trouver l'élément DOM correspondant et ajouter la classe
-			monthHolidays.forEach((holiday) => {
-				const day = holiday.getDate()
-				const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
-				const dayElements = document.querySelectorAll(`[data-v-date="${dateStr}"]`)
-				dayElements.forEach((element) => {
-					element.classList.add('holiday-day')
-				})
-			})
-		})
-	}
-
 	// Utilisation du composable pour gérer le mode d'affichage du CalendarMode
 	const { currentViewMode, handleViewModeUpdate, handleYearUpdate, handleMonthUpdate, resetViewMode } = useDatePickerViewMode(
 		// Fonction qui retourne la valeur actuelle de isBirthDate (combinaison de isBirthDate et birthDate)
@@ -717,6 +699,7 @@
 			resetViewMode()
 			// Marquer les jours fériés lorsque le calendrier devient visible
 			markHolidayDays()
+			customizeMonthButton()
 		}
 		if (!isVisible && props.isBirthDate) {
 			// Réinitialiser le mode d'affichage au type birthdate
@@ -738,45 +721,6 @@
 		}
 	})
 
-	const getIcon = () => {
-		if (props.noCalendar || props.disableErrorHandling) {
-			return
-		}
-		switch (true) {
-		case errorMessages.value.length > 0:
-			return 'error'
-		case warningMessages.value.length > 0:
-			return 'warning'
-		case successMessages.value.length > 0:
-			return 'success'
-		default:
-			return
-		}
-	}
-
-	const syncFromModelValue = (newValue: DateInput | undefined) => {
-		if (!newValue || newValue === '') {
-			selectedDates.value = null
-			textInputValue.value = ''
-			displayFormattedDate.value = ''
-			validateDates()
-			return
-		}
-
-		selectedDates.value = initializeSelectedDates(newValue, props.format, props.dateFormatReturn)
-
-		if (selectedDates.value) {
-			const firstDate = Array.isArray(selectedDates.value)
-				? selectedDates.value[0]
-				: selectedDates.value
-
-			textInputValue.value = formatDate(firstDate, props.format)
-			displayFormattedDate.value = displayFormattedDateComputed.value || ''
-		}
-
-		validateDates()
-	}
-
 	watch(() => props.modelValue, (newValue) => {
 		if (isUpdatingFromInternal.value) {
 			if (props.displayRange) {
@@ -894,6 +838,8 @@
 		initializeSelectedDates,
 		updateAccessibility,
 		openDatePicker,
+		updateSelectedDates,
+		handleSelectToday,
 	})
 </script>
 
@@ -969,7 +915,7 @@
 				:show-week-number="props.showWeekNumber"
 				:is-birth-date="props.isBirthDate || props.birthDate"
 				:text-field-activator="props.textFieldActivator"
-				:title="props.title || props.placeholder || undefined"
+				:title="props.title"
 				:period="period"
 				:auto-clamp="props.autoClamp"
 				:label="props.label"
@@ -1003,7 +949,6 @@
 						ref="dateCalendarTextInputRef"
 						v-model="displayFormattedDate"
 						:append-icon="displayIcon && displayAppendIcon ? 'calendar' : undefined"
-						:append-inner-icon="getIcon()"
 						:class="[getMessageClasses(), 'label-hidden-on-focus']"
 						:error-messages="errorMessages"
 						:warning-messages="warningMessages"
@@ -1011,9 +956,8 @@
 						:disabled="props.disabled"
 						:disable-click-button="false"
 						:readonly="true"
-						:label="labelWithAsterisk || ''"
+						:label="labelWithAsterisk"
 						:placeholder="props.placeholder"
-						:display-persistent-placeholder="true"
 						:no-icon="props.noIcon"
 						:prepend-icon="displayIcon && !displayAppendIcon ? 'calendar' : undefined"
 						:variant-style="props.isOutlined ? 'outlined' : 'underlined'"
@@ -1025,7 +969,7 @@
 						:display-asterisk="props.displayAsterisk"
 						:is-clearable="!props.readonly"
 						:auto-clamp="props.autoClamp"
-						:title="props.title || props.placeholder || undefined"
+						:title="props.title"
 						:hint="props.hint"
 						:persistent-hint="props.persistentHint"
 						@click="openDatePickerOnClick"
@@ -1077,15 +1021,15 @@
 								size="x-small"
 								color="primary"
 								:title="DATE_PICKER_MESSAGES.BUTTON_TODAY"
-								class="my-2 pa-2 mt-2"
+								class="date-picker__today-button my-2 pa-2 mt-2"
 								:ripple="false"
 								@click="handleSelectToday"
 							>
-								<VIcon
-									class="mr-1"
-								>
-									{{ mdiCalendar }}
-								</VIcon>
+								<SyIcon
+									size="16px"
+									decorative
+									:icon="mdiCalendarMonthOutline"
+								/>
 								{{ DATE_PICKER_MESSAGES.BUTTON_TODAY }}
 							</v-btn>
 						</div>
@@ -1099,6 +1043,16 @@
 <style lang="scss" scoped>
 @use '@/assets/tokens';
 
+.date-picker-title {
+	display: block;
+	text-transform: lowercase;
+	font-size: 0.875rem;
+
+	&::first-letter {
+		text-transform: uppercase;
+	}
+}
+
 /* Style pour les jours fériés */
 :deep(.holiday-day) {
 	background-color: rgb(255 193 7 / 10%);
@@ -1127,7 +1081,7 @@
 }
 
 .dp-width {
-	width: v-bind('props.width');
+	width: v-bind(width);
 }
 
 .v-messages__message--success {
@@ -1211,10 +1165,18 @@
 	}
 }
 
+:deep(.v-date-picker-month__day .v-btn:hover) {
+	background-color: tokens.$colors-background-main;
+}
+
 :deep(.v-date-picker-month__day--selected, .v-date-picker-month__day--adjacent) {
 	opacity: 1;
 }
 
+:deep(.v-date-picker-month__day--selected .v-btn:hover) {
+	background-color: tokens.$colors-background-accent-contrasted !important;
+}
+
 .fade-enter-active,
 .fade-leave-active {
 	transition: opacity 0.5s ease;
@@ -1226,12 +1188,12 @@
 }
 
 :deep(.weekend .v-date-picker-month__day--week-end .v-btn) {
-	background-color: #afb1b1;
+	background-color: #b0b1b1;
 }
 
 /* div avant la class .v-date-picker-month__day--week-end */
 :deep(.weekend .v-date-picker-month__day:has(+ .v-date-picker-month__day--week-end) .v-btn) {
-	background-color: #afb1b1;
+	background-color: #b0b1b1;
 }
 
 :deep(.v-date-picker-controls__mode-btn) {
@@ -1242,4 +1204,67 @@
 	padding: 13px;
 }
 
+:deep(.custom-year-btn) {
+	width: auto;
+	height: 28px;
+}
+
+:deep(.custom-year-btn::after) {
+	background-color: #b0b1b1;
+	padding: 10px 40px;
+	text-decoration: none;
+	display: inline-block;
+	margin-left: -22px !important;
+	cursor: pointer;
+	border-radius: 9999px;
+}
+
+:deep(.custom-month-btn::after) {
+	background-color: #b0b1b1;
+	text-decoration: none;
+	display: inline-block;
+	cursor: pointer;
+	border-radius: 9999px;
+}
+
+:deep(.v-picker__body .v-btn:focus-visible) {
+	outline: 2px solid rgb(var(--v-theme-primary, '12, 65, 154'));
+
+	.v-btn__overlay {
+		display: none;
+	}
+
+	&::after {
+		display: none;
+	}
+}
+
+:deep(.v-date-picker-months .v-btn__content) {
+	font-size: 1rem;
+}
+
+.date-picker__today-button {
+	height: auto;
+
+	:deep(.v-btn__content) {
+		font-size: 1rem;
+		gap: 8px;
+	}
+
+	&:focus-visible {
+		outline: 2px solid rgb(var(--v-theme-primary, '12, 65, 154'));
+
+		:deep(.v-btn__overlay) {
+			display: none;
+		}
+
+		&::after {
+			display: none;
+		}
+	}
+}
+
+:deep(.v-picker__body .v-btn--active .v-btn__overlay) {
+	opacity: 0;
+}
 </style>

package/src/components/DatePicker/CalendarMode/tests/DatePicker.a11y.spec.ts

@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import DatePicker from '../DatePicker.vue'
+
+// Scénario d’accessibilité : champ de date en mode calendrier,
+// avec label et champ requis, calendrier fermé (état par défaut).
+
+describe('DatePicker (CalendarMode) – accessibility (axe)', () => {
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(DatePicker, {
+			props: {
+				label: 'Date de naissance',
+				format: 'DD/MM/YYYY',
+				required: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DatePicker (CalendarMode) – default state', {
+			ignoreRules: ['region'],
+		})
+	})
+})