@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.stories.ts

@@ -336,7 +336,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -345,6 +345,7 @@ export const Default: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Sélectionner une date"
 						placeholder="Sélectionner une date"
 						useCombinedMode
 						format="DD/MM/YYYY"
@@ -366,6 +367,7 @@ export const Default: Story = {
 		],
 	},
 	args: {
+		'label': 'Sélectionner une date',
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'isBirthDate': false,
@@ -417,6 +419,7 @@ export const Required: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Sélectionner une date"
 						placeholder="Sélectionner une date"
 						useCombinedMode
 						required
@@ -424,6 +427,7 @@ export const Required: Story = {
 					/>
 					<DatePicker
 						v-model="date"
+						label="Sélectionner une date"
 						placeholder="Sélectionner une date"
 						useCombinedMode
 						required
@@ -501,6 +505,7 @@ export const DateRange: Story = {
 				<template>
 					<DatePicker
 						v-model="dateRange"
+						label="Sélectionner une période"
 						placeholder="Sélectionner une période"
 						format="DD/MM/YYYY"
 						display-range
@@ -523,6 +528,7 @@ export const DateRange: Story = {
 		],
 	},
 	args: {
+		'label': 'Sélectionner une période',
 		'placeholder': 'Sélectionner une période',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -572,6 +578,7 @@ export const BirthDate: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Date de naissance"
 						placeholder="Date de naissance"
 						format="DD/MM/YYYY"
 						isBirthDate
@@ -594,6 +601,7 @@ export const BirthDate: Story = {
 		],
 	},
 	args: {
+		label: 'Date de naissance',
 		placeholder: 'Date de naissance',
 		format: 'DD/MM/YYYY',
 		isBirthDate: true,
@@ -637,6 +645,7 @@ export const WithValidation: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Date requise"
 						placeholder="Date requise"
 						format="DD/MM/YYYY"
 						required
@@ -676,6 +685,7 @@ export const WithValidation: Story = {
 		],
 	},
 	args: {
+		label: 'Date requise',
 		placeholder: 'Date requise',
 		format: 'DD/MM/YYYY',
 		required: true,
@@ -726,6 +736,7 @@ export const DifferentFormats: Story = {
 					<div class="d-flex flex-column">
 						<DatePicker
 							v-model="europeanDate"
+							label="Format européen"
 							placeholder="Format européen"
 							format="DD/MM/YYYY"
 							class="mb-4"
@@ -733,6 +744,7 @@ export const DifferentFormats: Story = {
 						/>
 						<DatePicker
 							v-model="americanDate"
+							label="Format américain"
 							placeholder="Format américain"
 							format="MM/DD/YYYY"
 							class="mb-4"
@@ -740,6 +752,7 @@ export const DifferentFormats: Story = {
 						/>
 						<DatePicker
 							v-model="isoDate"
+							label="Format ISO"
 							placeholder="Format ISO"
 							format="YYYY-MM-DD"
 							useCombinedMode
@@ -777,6 +790,7 @@ export const DifferentFormats: Story = {
               <div class="d-flex flex-column pa-4">
                 <DatePicker
                   v-model="europeanDate"
+				  label="Format européen"
                   placeholder="Format européen"
                   format="DD/MM/YYYY"
                   class="mb-4"
@@ -784,6 +798,7 @@ export const DifferentFormats: Story = {
                 />
                 <DatePicker
                   v-model="americanDate"
+				  label="Format américain"
                   placeholder="Format américain"
                   format="MM/DD/YYYY"
                   class="mb-4"
@@ -791,6 +806,7 @@ export const DifferentFormats: Story = {
                 />
                 <DatePicker
                   v-model="isoDate"
+				  label="Format ISO"
                   placeholder="Format ISO"
                   format="YYYY-MM-DD"
 				  useCombinedMode
@@ -814,6 +830,7 @@ export const WithDateFormatReturn: Story = {
 					<div class="d-flex flex-column">
 						<DatePicker
 							v-model="date"
+							label="Format d'affichage: JJ/MM/AAAA, Format de retour: AAAA-MM-JJ"
 							placeholder="Format d'affichage: JJ/MM/AAAA, Format de retour: AAAA-MM-JJ"
 							format="DD/MM/YYYY"
 							dateFormatReturn="YYYY-MM-DD"
@@ -849,10 +866,10 @@ export const WithDateFormatReturn: Story = {
               <div class="d-flex flex-column pa-4">
                 <DatePicker
                   v-model="date"
+				  label="Format d'affichage: JJ/MM/AAAA, Format de retour: AAAA-MM-JJ"
                   placeholder="Format d'affichage: JJ/MM/AAAA, Format de retour: AAAA-MM-JJ"
                   format="DD/MM/YYYY"
                   dateFormatReturn="YYYY-MM-DD"
-                  class="mb-4"
 				  useCombinedMode
                 />
                 <div>Valeur du modèle: {{ date }}</div>
@@ -874,6 +891,7 @@ export const DisablePickerInteraction: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Saisie manuelle uniquement"
 						placeholder="Saisie manuelle uniquement"
 						format="DD/MM/YYYY"
 						useCombinedMode
@@ -896,6 +914,7 @@ export const DisablePickerInteraction: Story = {
 		],
 	},
 	args: {
+		label: 'Saisie manuelle uniquement',
 		placeholder: 'Saisie manuelle uniquement',
 		format: 'DD/MM/YYYY',
 		displayIcon: true,
@@ -935,6 +954,7 @@ export const AutoFormattingInput: Story = {
 					<div class="d-flex flex-column">
 						<DatePicker
 							v-model="date"
+							label="Saisie avec formatage automatique"
 							placeholder="Saisie avec formatage automatique"
 							format="DD-MM-YYYY"
 							useCombinedMode
@@ -957,6 +977,7 @@ export const AutoFormattingInput: Story = {
 		],
 	},
 	args: {
+		label: 'Saisie avec formatage automatique',
 		placeholder: 'Saisie avec formatage automatique',
 		format: 'DD-MM-YYYY',
 		useCombinedMode: true,
@@ -990,6 +1011,7 @@ export const CustomDateFormat: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Format AAAA.MM.JJ"
 						placeholder="Format AAAA.MM.JJ"
 						format="AAAA.MM.JJ"
 						useCombinedMode
@@ -1011,6 +1033,7 @@ export const CustomDateFormat: Story = {
 		],
 	},
 	args: {
+		label: 'Format AAAA.MM.JJ',
 		placeholder: 'Format AAAA.MM.JJ',
 		format: 'YYYY.MM.DD',
 		useCombinedMode: true,
@@ -1047,6 +1070,7 @@ export const ReadonlyMode: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Date en lecture seule"
 						placeholder="Date en lecture seule"
 						format="DD/MM/YYYY"
 						useCombinedMode
@@ -1074,6 +1098,7 @@ export const ReadonlyMode: Story = {
 		],
 	},
 	args: {
+		label: 'Date en lecture seule',
 		placeholder: 'Date en lecture seule',
 		format: 'DD/MM/YYYY',
 		useCombinedMode: true,
@@ -1116,6 +1141,7 @@ export const AppendIcon: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Date avec icône à la fin"
 						placeholder="Date avec icône à la fin"
 						format="DD/MM/YYYY"
 						useCombinedMode
@@ -1139,6 +1165,7 @@ export const AppendIcon: Story = {
 		],
 	},
 	args: {
+		label: 'Date avec icône à la fin',
 		placeholder: 'Date avec icône à la fin',
 		format: 'DD/MM/YYYY',
 		useCombinedMode: true,
@@ -1177,6 +1204,7 @@ export const WithCustomPeriod: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Date avec icône à la fin"
 						placeholder="Date avec icône à la fin"
 						format="DD/MM/YYYY"
 						useCombinedMode
@@ -1226,6 +1254,7 @@ export const WithCustomPeriod: Story = {
 		],
 	},
 	args: {
+		label: 'Date avec icône à la fin',
 		placeholder: 'Date avec icône à la fin',
 		format: 'DD/MM/YYYY',
 		useCombinedMode: true,
@@ -1292,6 +1321,7 @@ export const WithTextFieldActivator: Story = {
 				<template>
 					<DatePicker
 						v-model="date"
+						label="Cliquez sur le champ pour ouvrir"
 						placeholder="Cliquez sur le champ pour ouvrir"
 						format="DD/MM/YYYY"
 						useCombinedMode
@@ -1314,6 +1344,7 @@ export const WithTextFieldActivator: Story = {
 		],
 	},
 	args: {
+		label: 'Cliquez sur le champ pour ouvrir',
 		placeholder: 'Cliquez sur le champ pour ouvrir',
 		format: 'DD/MM/YYYY',
 		useCombinedMode: true,
@@ -1355,6 +1386,7 @@ export const AutoClampFeature: Story = {
 						<h4 class="mt-4">Format JJ/MM/AAAA (séparateur /)</h4>
 						<DatePicker
 							v-model="dateSlash"
+							label="Saisie avec auto clamp - séparateur /"
 							placeholder="Saisie avec auto clamp - séparateur /"
 							format="DD/MM/YYYY"
 							useCombinedMode
@@ -1364,6 +1396,7 @@ export const AutoClampFeature: Story = {
 						<h4 class="mt-4">Format JJ-MM-AAAA (séparateur -)</h4>
 						<DatePicker
 							v-model="dateDash"
+							label="Saisie avec auto clamp - séparateur -"
 							placeholder="Saisie avec auto clamp - séparateur -"
 							format="DD-MM-YYYY"
 							useCombinedMode
@@ -1373,6 +1406,7 @@ export const AutoClampFeature: Story = {
 						<h4 class="mt-4">Format AAAA.MM.JJ (séparateur .)</h4>
 						<DatePicker
 							v-model="dateDot"
+							label="Saisie avec auto clamp - séparateur ."
 							placeholder="Saisie avec auto clamp - séparateur ."
 							format="YYYY.MM.DD"
 							useCombinedMode
@@ -1414,6 +1448,7 @@ export const AutoClampFeature: Story = {
                 <h4 class="mb-2">Format JJ/MM/AAAA (séparateur /)</h4>
                 <DatePicker
                   v-model="dateSlash"
+				  label="Saisie avec auto clamp - séparateur /"
                   placeholder="Saisie avec auto clamp - séparateur /"
                   format="DD/MM/YYYY"
                   useCombinedMode
@@ -1424,6 +1459,7 @@ export const AutoClampFeature: Story = {
                 <h4 class="mb-2">Format JJ-MM-AAAA (séparateur -)</h4>
                 <DatePicker
                   v-model="dateDash"
+				  label="Saisie avec auto clamp - séparateur -"
                   placeholder="Saisie avec auto clamp - séparateur -"
                   format="DD-MM-YYYY"
                   useCombinedMode
@@ -1434,6 +1470,7 @@ export const AutoClampFeature: Story = {
                 <h4 class="mb-2">Format AAAA.MM.JJ (séparateur .)</h4>
                 <DatePicker
                   v-model="dateDot"
+				  label="Saisie avec auto clamp - séparateur ."
                   placeholder="Saisie avec auto clamp - séparateur ."
                   format="YYYY.MM.DD"
                   useCombinedMode
@@ -1460,6 +1497,7 @@ export const WithFormSubmission: Story = {
 						<DatePicker
 							ref="datePicker"
 							v-model="date"
+							label="Date requise"
 							placeholder="Date requise"
 							format="DD/MM/YYYY"
 							required
@@ -1524,10 +1562,11 @@ export const WithFormSubmission: Story = {
                   <DatePicker
                     ref="datePicker"
                     v-model="date"
+					label="Date requise"
                     placeholder="Date requise"
                     format="DD/MM/YYYY"
                     required
-                    class="mb-4"
+					class="mb-4"
 					useCombinedMode
                   />
                   <v-btn type="submit" color="primary">Soumettre</v-btn>
@@ -1553,6 +1592,7 @@ export const CustomRules: Story = {
 					<template>
 						<DatePicker
 							v-model="date"
+							label="Date de rendez-vous"
 							placeholder="Date requise"
 							format="DD/MM/YYYY"
 							required
@@ -1631,6 +1671,7 @@ export const CustomWarningRules: Story = {
 					<template>
 						<DatePicker
 							v-model="date"
+							label="Date requise"
 							placeholder="Date requise"
 							format="DD/MM/YYYY"
 							required

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.vue

@@ -46,6 +46,7 @@
 	import { getDateDescription as getDateDescriptionUtil } from '../utils/dateFormattingUtils'
 	import customParseFormat from 'dayjs/plugin/customParseFormat'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	dayjs.extend(customParseFormat)
 
@@ -170,6 +171,8 @@
 			density?: 'default' | 'comfortable' | 'compact'
 			hint?: string
 			persistentHint?: boolean
+			headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+
 		}>(),
 		{
 			modelValue: undefined,
@@ -207,6 +210,7 @@
 			density: 'default',
 			hint: undefined,
 			persistentHint: false,
+			headingLevel: 3,
 		},
 	)
 
@@ -591,7 +595,9 @@
 	 */
 	const dateTextInputRef = ref<null | ComponentPublicInstance<typeof DateTextInput>>()
 	const dateCalendarTextInputRef = ref<null | ComponentPublicInstance<typeof SyTextField>>()
+	const menuActivatorRef = ref<HTMLElement | undefined>(undefined)
 	const datePickerRef = ref<null | ComponentPublicInstance<typeof VDatePicker>>()
+	const datePickerContentId = `date-picker-${Math.random().toString(36).slice(2)}`
 
 	/**
 	 * Holiday marking (partagé via useHolidayHighlighting)
@@ -1050,7 +1056,7 @@
 		<template v-else>
 			<VMenu
 				v-model="isDatePickerVisible"
-				activator="parent"
+				:activator="menuActivatorRef"
 				:min-width="0"
 				location="bottom"
 				:close-on-content-click="false"
@@ -1059,55 +1065,65 @@
 				transition="fade-transition"
 				:offset="[0, 10]"
 			>
-				<template #activator="{ props: menuProps }">
-					<DateTextInput
-						v-bind="menuProps"
-						ref="dateCalendarTextInputRef"
-						:key="fieldKey"
-						:model-value="textInputValue"
-						:label="labelWithAsterisk"
-						:placeholder="props.placeholder"
-						:format="props.format"
-						:date-format-return="props.dateFormatReturn"
-						:required="props.required"
-						:disabled="props.disabled"
-						:readonly="props.readonly"
-						:title="props.title"
-						:is-outlined="props.isOutlined"
-						:display-icon="props.displayIcon"
-						:display-append-icon="props.displayAppendIcon"
-						:display-prepend-icon="props.displayPrependIcon"
-						:no-icon="props.noIcon"
-						:custom-rules="props.customRules"
-						:custom-warning-rules="props.customWarningRules"
-						:display-asterisk="props.displayAsterisk"
-						:disable-error-handling="props.disableErrorHandling"
-						:show-success-messages="props.showSuccessMessages"
-						:bg-color="props.bgColor"
-						:display-range="props.displayRange"
-						:is-validate-on-blur="props.isValidateOnBlur"
-						:external-error-messages="errorMessages"
-						:class="[getMessageClasses(), 'label-hidden-on-focus']"
-						:auto-clamp="props.autoClamp"
-						:density="props.density"
-						:hint="props.hint"
-						:persistent-hint="props.persistentHint"
-						@update:model-value="handleDateTextInputUpdate"
-						@click="openDatePickerOnClick"
-						@focus="openDatePickerOnFocus"
-						@blur="handleInputBlur"
-						@input="handleInput"
-						@keydown="handleKeydown"
-						@date-selected="handleDateSelected"
-						@prepend-icon-click="openDatePickerOnIconClick"
-						@append-icon-click="openDatePickerOnIconClick"
-					/>
+				<template #activator>
+					<div
+						ref="menuActivatorRef"
+						class="date-text-input-activator"
+						role="combobox"
+						aria-haspopup="dialog"
+						:aria-expanded="isDatePickerVisible"
+						:aria-controls="datePickerContentId"
+					>
+						<DateTextInput
+							ref="dateCalendarTextInputRef"
+							:key="fieldKey"
+							:model-value="textInputValue"
+							:label="labelWithAsterisk"
+							:placeholder="props.placeholder"
+							:format="props.format"
+							:date-format-return="props.dateFormatReturn"
+							:required="props.required"
+							:disabled="props.disabled"
+							:readonly="props.readonly"
+							:title="props.title"
+							:is-outlined="props.isOutlined"
+							:display-icon="props.displayIcon"
+							:display-append-icon="props.displayAppendIcon"
+							:display-prepend-icon="props.displayPrependIcon"
+							:no-icon="props.noIcon"
+							:custom-rules="props.customRules"
+							:custom-warning-rules="props.customWarningRules"
+							:display-asterisk="props.displayAsterisk"
+							:disable-error-handling="props.disableErrorHandling"
+							:show-success-messages="props.showSuccessMessages"
+							:bg-color="props.bgColor"
+							:display-range="props.displayRange"
+							:is-validate-on-blur="props.isValidateOnBlur"
+							:external-error-messages="errorMessages"
+							:class="[getMessageClasses(), 'label-hidden-on-focus']"
+							:auto-clamp="props.autoClamp"
+							:density="props.density"
+							:hint="props.hint"
+							:persistent-hint="props.persistentHint"
+							@update:model-value="handleDateTextInputUpdate"
+							@click="openDatePickerOnClick"
+							@focus="openDatePickerOnFocus"
+							@blur="handleInputBlur"
+							@input="handleInput"
+							@keydown="handleKeydown"
+							@date-selected="handleDateSelected"
+							@prepend-icon-click="openDatePickerOnIconClick"
+							@append-icon-click="openDatePickerOnIconClick"
+						/>
+					</div>
 				</template>
 
 				<VDatePicker
 					v-if="isDatePickerVisible"
+					:id="datePickerContentId"
 					ref="datePickerRef"
 					v-model="selectedDates"
+					control-variant="modal"
 					color="primary"
 					:class="props.displayWeekendDays ? 'weekend' : ''"
 					:first-day-of-week="1"
@@ -1142,9 +1158,12 @@
 						</span>
 					</template>
 					<template #header>
-						<h3 class="mx-auto my-auto ml-5 mb-4">
+						<SyHeading
+							class="mx-auto my-auto ml-5 mb-4"
+							:level="headingLevel"
+						>
 							{{ selectedDates ? displayedDateString : headerDate }}
-						</h3>
+						</SyHeading>
 					</template>
 					<template
 						v-if="props.displayTodayButton"
@@ -1299,7 +1318,7 @@
 }
 
 :deep(.v-date-picker-month__day--selected .v-btn:hover) {
-	background-color: tokens.$colors-background-accent-contrasted !important;
+	background-color: tokens.$colors-background-accent-primary-contrasted !important;
 }
 
 :deep(.weekend .v-date-picker-month__day--week-end .v-btn) {
@@ -1355,6 +1374,10 @@
 	}
 }
 
+:deep(.v-date-picker-months) {
+	flex: 1;
+}
+
 :deep(.v-date-picker-months .v-btn__content) {
 	font-size: 1rem;
 }

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

@@ -18,9 +18,17 @@ describe('ComplexDatePicker – accessibility (axe)', () => {
 			},
 		})
 
+		const ignoredRules = ['region'] // Ignoring 'region' rule as per test configuration
+
 		const results = await axe(wrapper.element as HTMLElement)
+		// Debug aid: log violations details when present
+		if (results.violations.filter(
+			v => !ignoredRules.includes(v.id), // Ignoring specified rules as per test configuration
+		).length > 0) {
+			console.log(JSON.stringify(results.violations, null, 2))
+		}
 		assertNoA11yViolations(results, 'ComplexDatePicker – default calendar mode', {
-			ignoreRules: ['region'],
+			ignoreRules: ignoredRules,
 		})
 	})
 })

package/src/components/DatePicker/DateTextInput/DateTextInput.vue

@@ -103,30 +103,57 @@
 
 	/**
 	 * =====================
-	 * Validation setup (safe wrapper for readonly)
+	 * Validation setup (safe wrapper for readonly, reactive to toggles)
 	 * =====================
 	 */
-	const validationApi = !readonly.value
-		? useValidation({
-			showSuccessMessages: props.showSuccessMessages,
-			fieldIdentifier: props.label || props.placeholder,
-			disableErrorHandling: props.disableErrorHandling,
-		})
-		: {
-			errors: ref<string[]>([]),
-			warnings: ref<string[]>([]),
-			successes: ref<string[]>([]),
-			hasError: ref(false),
-			clearValidation: () => {},
-			validateField: () => ({
-				hasError: false,
-				hasWarning: false,
-				hasSuccess: false,
-				state: { errors: [], warnings: [], successes: [] },
-			} as ValidationResult),
-		}
+	const baseValidation = useValidation({
+		showSuccessMessages: props.showSuccessMessages,
+		fieldIdentifier: props.label || props.placeholder,
+		disableErrorHandling: props.disableErrorHandling,
+	})
 
-	const { errors, warnings, successes, hasError, clearValidation, validateField } = validationApi
+	const readonlyValidation = {
+		errors: ref<string[]>([]),
+		warnings: ref<string[]>([]),
+		successes: ref<string[]>([]),
+		hasError: ref(false),
+		clearValidation: () => {},
+		validateField: () => ({
+			hasError: false,
+			hasWarning: false,
+			hasSuccess: false,
+			state: { errors: [], warnings: [], successes: [] },
+		} as ValidationResult),
+	}
+
+	const validationApi = computed(() => (readonly.value ? readonlyValidation : baseValidation))
+
+	const errors = computed({
+		get: () => validationApi.value.errors.value,
+		set: (value) => { validationApi.value.errors.value = value },
+	})
+	const warnings = computed({
+		get: () => validationApi.value.warnings.value,
+		set: (value) => { validationApi.value.warnings.value = value },
+	})
+	const successes = computed({
+		get: () => validationApi.value.successes.value,
+		set: (value) => { validationApi.value.successes.value = value },
+	})
+	const hasError = computed(() => {
+		const api = validationApi.value
+		// baseValidation exposes a computed hasError, readonly stub exposes a ref
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- computed/ref dual shape
+		return (api as any).hasError?.value ?? api.errors.value.length > 0
+	})
+
+	const clearValidation = () => validationApi.value.clearValidation()
+
+	const validateField = (
+		value: unknown,
+		rules?: ValidationRule[],
+		warningRules?: ValidationRule[],
+	): ValidationResult => validationApi.value.validateField(value, rules, warningRules)
 
 	// Agrégation des erreurs internes et externes
 	const errorMessages = computed(() => [...errors.value, ...props.externalErrorMessages])