@cnamts/synapse 1.0.21 → 1.0.22

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

@@ -16,6 +16,7 @@
 	import { mdiCalendarMonthOutline } from '@mdi/js'
 	import type { DateObjectValue } from '../types'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	// Initialiser les plugins dayjs
 	dayjs.extend(customParseFormat)
@@ -74,6 +75,8 @@
 		isValidateOnBlur?: boolean
 		hint?: string
 		persistentHint?: boolean
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+
 	}>(), {
 		modelValue: undefined,
 		placeholder: undefined,
@@ -112,6 +115,7 @@
 		isValidateOnBlur: true,
 		hint: undefined,
 		persistentHint: false,
+		headingLevel: 3,
 	})
 
 	// La compatibilité entre isBirthDate et birthDate est gérée directement dans l'appel au composable
@@ -780,8 +784,8 @@
 					textInputValue.value = ''
 				}
 				else if (Array.isArray(newValue) && props.displayRange) {
-					// Pour les plages de dates, on ne modifie pas directement textInputValue
-					// car le DateTextInput gère son propre formatage
+				// Pour les plages de dates, on ne modifie pas directement textInputValue
+				// car le DateTextInput gère son propre formatage
 				}
 				else if (typeof newValue === 'string') {
 					// Pour une date unique
@@ -880,9 +884,7 @@
 </script>
 
 <template>
-	<div
-		class="date-picker-container"
-	>
+	<div class="date-picker-container">
 		<template v-if="props.noCalendar">
 			<DateTextInput
 				ref="dateTextInputRef"
@@ -925,6 +927,7 @@
 		<template v-else-if="props.useCombinedMode">
 			<ComplexDatePicker
 				ref="complexDatePickerRef"
+				:heading-level="headingLevel"
 				:model-value="props.modelValue"
 				:format="props.format"
 				:date-format-return="props.dateFormatReturn"
@@ -1022,6 +1025,7 @@
 					ref="datePickerRef"
 					v-model="selectedDates"
 					color="primary"
+					control-variant="modal"
 					:first-day-of-week="1"
 					:multiple="props.displayRange ? 'range' : false"
 					:show-adjacent-months="true"
@@ -1043,9 +1047,12 @@
 						Sélectionnez une date
 					</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"
@@ -1210,7 +1217,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;
 }
 
 .fade-enter-active,
@@ -1275,6 +1282,10 @@
 	}
 }
 
+:deep(.v-date-picker-months) {
+	flex: 1;
+}
+
 :deep(.v-date-picker-months .v-btn__content) {
 	font-size: 1rem;
 }
@@ -1303,4 +1314,5 @@
 :deep(.v-picker__body .v-btn--active .v-btn__overlay) {
 	opacity: 0;
 }
+
 </style>

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

@@ -77,8 +77,12 @@ describe('DatePicker', () => {
 		expect(result.length).toBe(2)
 		expect(result[0]).toBeInstanceOf(Date)
 		expect(result[1]).toBeInstanceOf(Date)
-		expect(result[0]?.toISOString().split('T')[0]).toBe('2023-01-01')
-		expect(result[1]?.toISOString().split('T')[0]).toBe('2023-01-05')
+		expect(result[0]?.getFullYear()).toBe(2023)
+		expect(result[0]?.getMonth()).toBe(0)
+		expect(result[0]?.getDate()).toBe(1)
+		expect(result[1]?.getFullYear()).toBe(2023)
+		expect(result[1]?.getMonth()).toBe(0)
+		expect(result[1]?.getDate()).toBe(5)
 	})
 
 	it('initializeSelectedDates returns an empty array for invalid range inputs', () => {
@@ -106,7 +110,9 @@ describe('DatePicker', () => {
 		if (!(result instanceof Date)) {
 			throw new Error('Expected initializeSelectedDates to return a Date for a single valid date')
 		}
-		expect(result.toISOString().split('T')[0]).toBe('2023-01-01')
+		expect(result.getFullYear()).toBe(2023)
+		expect(result.getMonth()).toBe(0)
+		expect(result.getDate()).toBe(1)
 	})
 
 	it('initializeSelectedDates returns an empty array when start date is after end date', () => {

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: [
 			{

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

@@ -0,0 +1,34 @@
+// @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 ComplexDatePicker from '../ComplexDatePicker.vue'
+
+// Scénario d’accessibilité : sélecteur de date combiné (champ + calendrier),
+// en mode simple, avec label et format jour/mois/année.
+
+describe('ComplexDatePicker – accessibility (axe)', () => {
+	it('has no obvious axe violations in default calendar mode', async () => {
+		const wrapper = mount(ComplexDatePicker, {
+			props: {
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+			},
+		})
+
+		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: ignoredRules,
+		})
+	})
+})

package/src/components/DatePicker/DateTextInput/tests/DateTextInput.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 DateTextInput from '../DateTextInput.vue'
+
+// Scénario d’accessibilité : champ texte de date seul, requis,
+// avec format jour/mois/année.
+
+describe('DateTextInput – accessibility (axe)', () => {
+	it('has no obvious axe violations for a required single date field', async () => {
+		const wrapper = mount(DateTextInput, {
+			props: {
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				required: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DateTextInput – required single date', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/DatePicker/docExamples/BidirectionalComplexValidation.vue

@@ -142,10 +142,12 @@
 
 <template>
 	<div class="date-picker-bidirectional-validation">
-		<h1 class="text-h5 mb-6">
+		<SyHeading
+			class="text-h5 mb-6"
+			:level="1"
+		>
 			Validation bidirectionnelle entre deux DatePickers
-		</h1>
-
+		</SyHeading>
 		<div class="text-body-2 mb-4">
 			Ce composant démontre la validation bidirectionnelle entre deux DatePickers. Les règles de validation sont appliquées dans les deux sens :
 			<ul class="ml-4">
@@ -158,12 +160,16 @@
 
 		<div class="date-range-container mb-6">
 			<div class="date-picker-wrapper">
-				<h2 class="text-subtitle-1 mb-2">
+				<SyHeading
+					class="text-subtitle-1 mb-2"
+					:level="2"
+				>
 					Date de début
-				</h2>
+				</SyHeading>
 				<DatePicker
 					ref="startDatePickerRef"
 					v-model="startDate"
+					:heading-level="2"
 					label="Date de début"
 					:custom-rules="startDateRules"
 					use-combined-mode
@@ -172,12 +178,17 @@
 				/>
 			</div>
 			<div class="date-picker-wrapper">
-				<h2 class="text-subtitle-1 mb-2">
+				<SyHeading
+					class="text-subtitle-1 mb-2"
+					:level="2"
+				>
 					Date de fin
-				</h2>
+				</SyHeading>
 				<DatePicker
 					ref="endDatePickerRef"
 					v-model="endDate"
+					:heading-level="2"
+					:heading-level-complex-date-picker="2"
 					label="Date de fin"
 					:custom-rules="endDateRules"
 					use-combined-mode
@@ -221,9 +232,12 @@
 		</div>
 
 		<div class="mt-6 pa-4 bg-grey-lighten-4 rounded">
-			<h3 class="text-subtitle-1 mb-2">
+			<SyHeading
+				class="text-subtitle-1 mb-2"
+				:level="3"
+			>
 				Comment fonctionne la validation bidirectionnelle
-			</h3>
+			</SyHeading>
 			<p class="text-body-2">
 				La validation bidirectionnelle entre les DatePickers est implémentée grâce à des règles de validation personnalisées
 				qui vérifient la relation entre les deux dates. Chaque DatePicker a sa propre règle qui vérifie sa valeur par rapport à l'autre.

package/src/components/DatePicker/docExamples/DatePickerBidirectionalValidation.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 	import { ref, computed, watch } from 'vue'
 	import DatePicker from '@/components/DatePicker/CalendarMode/DatePicker.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 	// useDateFormat n'est plus nécessaire avec les règles prédéfinies
 
 	// État des dates
@@ -142,9 +143,9 @@
 
 <template>
 	<div class="date-picker-bidirectional-validation">
-		<h1 class="text-h5 mb-6">
+		<SyHeading :level="1">
 			Validation bidirectionnelle entre deux DatePickers
-		</h1>
+		</SyHeading>
 
 		<div class="text-body-2 mb-4">
 			Ce composant démontre la validation bidirectionnelle entre deux DatePickers. Les règles de validation sont appliquées dans les deux sens :
@@ -158,12 +159,16 @@
 
 		<div class="date-range-container mb-6">
 			<div class="date-picker-wrapper">
-				<h2 class="text-subtitle-1 mb-2">
+				<SyHeading
+					class="text-subtitle-1 mb-2"
+					:level="2"
+				>
 					Date de début
-				</h2>
+				</SyHeading>
 				<DatePicker
 					ref="startDatePickerRef"
 					v-model="startDate"
+					:heading-level="2"
 					label="Date de début"
 					:custom-rules="startDateRules"
 					required
@@ -171,13 +176,18 @@
 				/>
 			</div>
 			<div class="date-picker-wrapper">
-				<h2 class="text-subtitle-1 mb-2">
+				<SyHeading
+					class="text-subtitle-1 mb-2"
+					:level="2"
+				>
 					Date de fin
-				</h2>
+				</SyHeading>
 				<DatePicker
 					ref="endDatePickerRef"
 					v-model="endDate"
 					label="Date de fin"
+					:heading-level="2"
+					:heading-level-complex-date-picker="2"
 					:custom-rules="endDateRules"
 					required
 					@update:model-value="validateStartDate"
@@ -219,9 +229,12 @@
 		</div>
 
 		<div class="mt-6 pa-4 bg-grey-lighten-4 rounded">
-			<h3 class="text-subtitle-1 mb-2">
+			<SyHeading
+				class="text-subtitle-1 mb-2"
+				:level="3"
+			>
 				Comment fonctionne la validation bidirectionnelle
-			</h3>
+			</SyHeading>
 			<p class="text-body-2">
 				La validation bidirectionnelle entre les DatePickers est implémentée grâce à des règles de validation personnalisées
 				qui vérifient la relation entre les deux dates. Chaque DatePicker a sa propre règle qui vérifie sa valeur par rapport à l'autre.