@cnamts/synapse 1.0.24 → 1.0.26

package/src/components/Customs/SyTabs/tests/SyTabs.a11y.spec.ts

@@ -0,0 +1,88 @@
+// @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 SyTabs from '../SyTabs.vue'
+
+// Mock RouterLink component since SyTabs uses it
+const RouterLink = {
+	name: 'RouterLink',
+	props: ['to'],
+	template: '<a :href="to"><slot /></a>',
+}
+
+const testItems = [
+	{ label: 'Tab 1', value: 'tab1', content: 'Contenu du Tab 1' },
+	{ label: 'Tab 2', value: 'tab2', content: 'Contenu du Tab 2' },
+	{ label: 'Tab 3', value: 'tab3', content: 'Contenu du Tab 3', disabled: true },
+]
+
+describe('SyTabs – accessibility (axe)', () => {
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(SyTabs, {
+			props: {
+				items: testItems,
+			},
+			global: {
+				components: { RouterLink },
+				mocks: {
+					$router: {},
+				},
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTabs – default state', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations after switching tabs', async () => {
+		const wrapper = mount(SyTabs, {
+			props: {
+				items: testItems,
+			},
+			global: {
+				components: { RouterLink },
+				mocks: {
+					$router: {},
+				},
+			},
+		})
+
+		const tabs = wrapper.findAll('[role="tab"]')
+		if (tabs.length > 1) {
+			await tabs[1]?.trigger('click')
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTabs – after switching tabs', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations in navigation mode', async () => {
+		const wrapper = mount(SyTabs, {
+			props: {
+				items: [
+					{ label: 'Nav 1', value: 'nav1', to: '/path-1' },
+					{ label: 'Nav 2', value: 'nav2', href: 'https://example.com' },
+					{ label: 'Nav 3', value: 'nav3', to: '/path-3', disabled: true },
+				],
+			},
+			global: {
+				components: { RouterLink },
+				mocks: {
+					$router: {},
+				},
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTabs – navigation mode', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/Customs/SyTabs/tests/SyTabs.spec.ts

@@ -162,6 +162,51 @@ describe('SyTabs', () => {
 		})
 	})
 
+	// Tests du mode Navigation
+	describe('Mode Navigation', () => {
+		const navItems = [
+			{ label: 'Nav 1', value: 'nav1', to: '/path-1' },
+			{ label: 'Nav 2', value: 'nav2', href: 'https://example.com' },
+			{ label: 'Nav 3', value: 'nav3', to: '/path-3', disabled: true },
+		]
+
+		it('doit utiliser la sémantique de navigation', () => {
+			const wrapper = createWrapper({
+				props: {
+					...defaultMountOptions.props,
+					items: navItems,
+				},
+			})
+
+			// Vérifier les attributs du conteneur
+			const nav = wrapper.find('nav[role="navigation"]')
+			expect(nav.exists()).toBe(true)
+			expect(nav.attributes('aria-label')).toBeDefined()
+
+			// Vérifier les attributs des liens
+			const buttons = wrapper.findAll('.sy-tabs__button')
+			expect(buttons[0]!.attributes('role')).toBeUndefined()
+			expect(buttons[0]!.attributes('aria-current')).toBe('page')
+			expect(buttons[0]!.attributes('aria-selected')).toBeUndefined()
+			expect(buttons[0]!.attributes('aria-controls')).toBeUndefined()
+
+			expect(buttons[1]!.attributes('aria-current')).toBeUndefined()
+		})
+
+		it('ne doit pas générer les rôles tabpanel pour les panneaux', () => {
+			const wrapper = createWrapper({
+				props: {
+					...defaultMountOptions.props,
+					items: navItems,
+				},
+			})
+
+			const panel = wrapper.find('.sy-tabs-panel')
+			expect(panel.attributes('role')).toBeUndefined()
+			expect(panel.attributes('aria-labelledby')).toBeUndefined()
+		})
+	})
+
 	// Tests d'accessibilité et navigation clavier
 	describe('Accessibilité et navigation clavier', () => {
 		it('doit contenir les attributs ARIA appropriés', () => {
@@ -434,7 +479,7 @@ describe('SyTabs', () => {
 			expect(tabList.exists()).toBe(true)
 
 			// Vérifier que tous les items sont rendus
-			const tabItems = wrapper.findAll('.sy-tabs__item')
+			const tabItems = wrapper.findAll('.sy-tabs__button')
 			expect(tabItems.length).toBe(testItems.length)
 		})
 	})

package/src/components/Customs/SyTextField/SyTextField.stories.ts

@@ -4,6 +4,8 @@ import { VIcon } from 'vuetify/components'
 import { ref, watch } from 'vue'
 import { mdiAccountBox } from '@mdi/js'
 import { VBtn } from 'vuetify/components'
+import { getValidationDocumentation } from '@/composables/unifyValidation/documentationValidationProps'
+import { fn } from '@storybook/test'
 
 const meta = {
 	title: 'Composants/Formulaires/SyTextField',
@@ -15,7 +17,6 @@ const meta = {
 	],
 	parameters: {
 		layout: 'fullscreen',
-		controls: { exclude: ['modelValue', 'appendInnerIconColor', 'errorMessages', 'warningMessages', 'successMessages'] },
 		docs: {
 			description: {
 				component: `SyTextField`,
@@ -23,6 +24,7 @@ const meta = {
 		},
 	},
 	argTypes: {
+		...getValidationDocumentation('string'),
 		'modelValue': { control: 'text' },
 		'label': {
 			description: 'Texte affiché comme label du champ',
@@ -62,27 +64,6 @@ const meta = {
 			options: ['default', 'comfortable', 'compact'],
 			description: 'Densité du champ',
 		},
-		'customRules': {
-			description: 'Règles de validation personnalisées',
-			control: 'object',
-		},
-		'customWarningRules': {
-			description: 'Règles d\'avertissement personnalisées',
-			control: 'object',
-		},
-		'showSuccessMessages': {
-			description: 'Afficher les messages de succès',
-			control: 'boolean',
-		},
-		'isValidateOnBlur': {
-			description: 'Vérifie la validité lors de la perte de focus',
-			control: 'boolean',
-			default: true,
-		},
-		'disableErrorHandling': {
-			control: 'boolean',
-			description: 'Désactive complètement la validation des règles et l\'affichage des erreurs',
-		},
 		'isActive': {
 			description: 'Force l\'état actif du champ (label flottant et styles visuels)',
 			control: 'boolean',
@@ -107,31 +88,16 @@ const meta = {
 			options: ['top', 'bottom', 'start', 'end'],
 			default: 'top',
 		},
-		'required': {
-			description: 'Indique si le champ est obligatoire',
-			control: 'boolean',
-			default: false,
-		},
 		'displayAsterisk': {
 			description: 'Affiche un astérisque à côté du label',
 			control: 'boolean',
 			default: false,
 		},
-		'disabled': {
-			description: 'Désactive le champ',
-			control: 'boolean',
-			default: false,
-		},
 		'disableClickButton': {
 			description: 'Désactive le click sur les icônes append et prepend',
 			control: 'boolean',
 			default: true,
 		},
-		'readonly': {
-			description: 'Rend le champ en lecture seule',
-			control: 'boolean',
-			default: false,
-		},
 		'baseColor': {
 			description: 'Couleur de base du champ (par défaut hérite de color)',
 			control: 'text',
@@ -193,10 +159,6 @@ const meta = {
 			description: 'Affiche un indicateur de chargement',
 			control: 'boolean',
 		},
-		'maxErrors': {
-			description: 'Nombre maximum de messages d\'erreur à afficher',
-			control: { type: 'text' },
-		},
 		'maxWidth': {
 			description: 'Largeur maximale du champ',
 			control: { type: 'text' },
@@ -323,6 +285,24 @@ const meta = {
 				category: 'slots',
 			},
 		},
+		'showDivider': {
+			description: 'Affiche une ligne de séparation entre le champ et les icônes prepend-inner et append-inner',
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+				category: 'props',
+			},
+		},
+	},
+	args: {
+		'onUpdate:modelValue': fn(),
+		'onKeydown': fn(),
+		'onClear': fn(),
+		'onPrependIconClick': fn(),
+		'onAppendIconClick': fn(),
+		'onFocus': fn(),
+		'onBlur': fn(),
 	},
 } as Meta<typeof SyTextField>
 

package/src/components/Customs/SyTextField/SyTextField.vue

@@ -44,7 +44,6 @@
 			direction?: 'horizontal' | 'vertical'
 			isDirty?: boolean
 			disabled?: boolean
-			isOnError?: boolean
 			isFlat?: boolean
 			isFocused?: boolean
 			areDetailsHidden?: boolean | 'auto'
@@ -101,7 +100,6 @@
 			density: 'default',
 			direction: 'horizontal',
 			isDirty: false,
-			isOnError: false,
 			isFlat: false,
 			isFocused: false,
 			areDetailsHidden: false,
@@ -277,6 +275,13 @@
 		return 'rgba(0, 0, 0, 1)'
 	})
 
+	const clearButtonColorClass = computed(() => {
+		if (hasError.value) return 'error-field'
+		if (hasWarning.value) return 'warning-field'
+		if (hasSuccess.value) return 'success-field'
+		return 'text-iconBase'
+	})
+
 	const handlePrependIconClick = () => {
 		emit('prepend-icon-click')
 	}
@@ -348,7 +353,7 @@
 	const validationIcon = computed(() => {
 		if (hasError.value) return ICONS['error']
 		if (hasWarning.value) return ICONS['warning']
-		if (hasSuccess.value && props.showSuccessMessages) return ICONS['success']
+		if (hasSuccess.value) return ICONS['success']
 		return null
 	})
 
@@ -363,7 +368,7 @@
 	// Détermine s'il y a des messages d'erreur ou d'état
 	const hasMessages = computed(() => {
 		if (props.disableErrorHandling) return false
-		return (props.errorMessages?.length ?? 0) > 0 || hasError.value || hasWarning.value || hasSuccess.value
+		return (props.errorMessages?.length ?? 0) > 0 || hasError.value || hasWarning.value || (hasSuccess.value && props.showSuccessMessages)
 	})
 
 	// Détermine si le helpText doit être affiché à la position du message ou en dessous
@@ -636,7 +641,7 @@
 			:maxlength="props.maxlength"
 			:max-errors="props.maxErrors"
 			:max-width="props.maxWidth"
-			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess ? (props.showSuccessMessages ? successes : []) : messages))"
 			:min-width="props.minWidth"
 			:name="props.name"
 			:persistent-clear="props.displayPersistentClear"
@@ -780,7 +785,8 @@
 					<!-- Keyboard-focusable clear button -->
 					<VBtn
 						v-if="showClear"
-						class="v-btn v-btn--density-compact mr-1 text-iconBase"
+						class="v-btn v-btn--density-compact mr-1"
+						:class="clearButtonColorClass"
 						:aria-label="props.label ? `Vider ${props.label}` : 'Vider'"
 						:title="props.label ? `Vider ${props.label}` : 'Vider'"
 						:icon="mdiClose"
@@ -851,7 +857,11 @@
 	:deep(.v-field) {
 		color: rgb(var(--v-theme-borderWarning)) !important;
 
+		--v-medium-emphasis-opacity: 1;
+
 		.v-field__outline {
+			--v-field-border-opacity: 1;
+
 			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
@@ -865,6 +875,13 @@
 	}
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
+.text-iconBase {
+	:deep(.v-icon__svg) {
+		fill: rgb(var(--v-theme-borderAccentPrimary)) !important;
+	}
+}
+
 .error-field {
 	:deep(.v-input__details > .v-icon),
 	:deep(.v-input__prepend > .v-icon),
@@ -872,10 +889,16 @@
 		opacity: 1 !important;
 	}
 
+	:deep(.v-icon__svg) {
+		fill: rgb(var(--v-theme-textError)) !important;
+	}
+
 	:deep(.v-field) {
 		color: rgb(var(--v-theme-borderError)) !important;
 
 		.v-field__outline {
+			--v-field-border-opacity: 1;
+
 			color: rgb(var(--v-theme-borderError)) !important;
 		}
 	}
@@ -906,6 +929,8 @@
 		--v-medium-emphasis-opacity: 1;
 
 		.v-field__outline {
+			--v-field-border-opacity: 1;
+
 			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
@@ -925,13 +950,13 @@
 	}
 
 	:deep(.v-field--focused .v-field__outline) {
-		color: rgb(var(--v-theme-accentPrimary)) !important;
+		color: rgb(var(--v-theme-borderAccentPrimary)) !important;
 		opacity: 1 !important;
 	}
 
 	:deep(.v-input__prepend .v-icon:focus-visible),
 	:deep(.v-input__append .v-icon:focus-visible) {
-		outline: 2px solid rgb(var(--v-theme-accentPrimary));
+		outline: 2px solid rgb(var(--v-theme-borderAccentPrimary));
 		outline-offset: 2px;
 		opacity: 1;
 	}
@@ -939,7 +964,7 @@
 
 .help-text-below {
 	color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-	font-size: 14px;
+	font-size: var(--v-fontSize-liensEtLibelles);
 	line-height: 1.2;
 }
 

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

@@ -172,7 +172,7 @@ const meta = {
 		},
 		'birthDate': {
 			control: 'boolean',
-			description: 'Alias pour isBirthDate (pour compatibilité avec l\'attribut kebab-case birth-date dans les templates). ⚠️ Utiliser soit birthDate soit isBirthDate, mais pas les deux.',
+			description: '⚠️ **DEPRECATED** — Utilisez `isBirthDate` à la place.',
 			defaultValue: false,
 		},
 		'isOutlined': {

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

@@ -7,7 +7,7 @@
 	import { useValidation, type ValidationResult, type ValidationRule } 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 { useDateInitialization, type DateModelValue, type DateInput } from '@/composables/date/useDateInitializationDayjs'
 	import { useDatePickerAccessibility } from '@/composables/date/useDatePickerAccessibility'
 	import { useWeekendDays, useTodayButton, useDatePickerViewMode, useDateSelection, useMonthButtonCustomization, useDisplayedDateString, useAsteriskDisplay, useDateValidation, useDatePickerState, useHolidayHighlighting, useCalendarKeyboardNavigation, useDatePickerFocusTrap } from '../composables'
 	import { DATE_PICKER_MESSAGES } from '../constants/messages'
@@ -40,7 +40,8 @@
 	const props = withDefaults(defineProps<{
 		autoClamp?: boolean
 		bgColor?: string
-		birthDate?: boolean // Alias pour isBirthDate pour compatibilité avec l'attribut kebab-case birth-date
+		/** @deprecated Utilisez isBirthDate à la place */
+		birthDate?: boolean
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		customRules?: { type: string, options: any }[]
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -241,12 +242,12 @@
 	}
 
 	const emit = defineEmits<{
-		(e: 'update:modelValue', value: DateValue): void
+		(e: 'update:modelValue', value: DateModelValue): void
 		(e: 'closed'): void
 		(e: 'focus'): void
 		(e: 'blur'): void
-		(e: 'input', value: DateValue): void
-		(e: 'date-selected', value: DateValue): void
+		(e: 'input', value: DateModelValue): void
+		(e: 'date-selected', value: DateModelValue): void
 	}>()
 
 	const validation = useValidation({
@@ -309,7 +310,8 @@
 
 	const errorMessages = errors
 	const warningMessages = warnings
-	const successMessages = successes
+	const successMessages = validation.displaySuccesses
+	const isOnSuccess = computed(() => successes.value.length > 0 && errors.value.length === 0 && warnings.value.length === 0)
 
 	// Variable pour éviter les mises à jour récursives
 	const isUpdatingFromInternal = ref(false)
@@ -392,7 +394,7 @@
 	}
 
 	// Fonction centralisée pour mettre à jour le modèle
-	const updateModel = async (value: DateValue) => {
+	const updateModel = async (value: DateModelValue) => {
 		// Éviter les mises à jour inutiles
 		if (JSON.stringify(value) === JSON.stringify(props.modelValue)) return
 
@@ -434,7 +436,7 @@
 				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]
+					const end = newValue[newValue.length - 1]
 					if (start && end) {
 						textInputValue.value = `${formatDate(start, props.format)} - ${formatDate(end, props.format)}`
 					}
@@ -465,7 +467,7 @@
 	})
 
 	// Utilisation du composable pour gérer la sélection de dates
-	const { updateSelectedDates, rangeBoundaryDates, resetRange } = useDateSelection(
+	const { updateSelectedDates, rangeBoundaryDates, generateDateRange, resetRange } = useDateSelection(
 		parseDate,
 		selectedDates,
 		props.format,
@@ -490,10 +492,11 @@
 		initializeSelectedDates,
 		validateDates,
 		updateModel,
+		generateDateRange,
 	})
 
 	// Gestionnaire pour les mises à jour du DateTextInput en mode no-calendar
-	const handleDateTextInputUpdate = async (value: DateValue) => {
+	const handleDateTextInputUpdate = async (value: DateModelValue) => {
 		if (isUpdatingFromInternal.value) return
 
 		try {
@@ -514,7 +517,7 @@
 				const endDate = parseDate(endDateStr, props.dateFormatReturn || props.format)
 
 				if (startDate && endDate) {
-					selectedDates.value = [startDate, endDate]
+					selectedDates.value = generateDateRange(startDate, endDate)
 					displayFormattedDate.value = `${formatDate(startDate, props.format)} - ${formatDate(endDate, props.format)}`
 				}
 			}
@@ -535,7 +538,7 @@
 	}
 
 	// Gestionnaire pour les événements date-selected du DateTextInput
-	const handleDateTextInputSelection = async (value: DateValue) => {
+	const handleDateTextInputSelection = async (value: DateModelValue) => {
 		if (isUpdatingFromInternal.value) return
 
 		// Mettre à jour le modèle avec la valeur sélectionnée
@@ -774,7 +777,6 @@
 
 	// 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)
 		() => props.isBirthDate || props.birthDate,
 		// Fonction qui retourne l'état de la date sélectionnée
 		() => selectedDates.value,
@@ -1061,7 +1063,8 @@
 							:class="[getMessageClasses(), 'label-hidden-on-focus']"
 							:error-messages="errorMessages"
 							:warning-messages="warningMessages"
-							:success-messages="props.showSuccessMessages ? successMessages : []"
+							:success-messages="successMessages"
+							:has-success="isOnSuccess"
 							:disabled="props.disabled"
 							:disable-click-button="false"
 							:readonly="true"
@@ -1170,8 +1173,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .date-picker-title {
 	display: block;
 	text-transform: lowercase;
@@ -1185,7 +1186,7 @@
 /* Style pour les jours fériés */
 :deep(.holiday-day) {
 	background-color: rgb(255 193 7 / 10%);
-	border: 2px dotted tokens.$neutral-black;
+	border: 2px dotted rgb(var(--v-theme-grey-darken60));
 	border-radius: 50%;
 }
 
@@ -1216,13 +1217,13 @@
 .v-messages__message--success {
 	:deep(.v-input__control),
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-success !important;
+		color: rgb(var(--v-theme-textSuccess)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 	}
 }
 
@@ -1240,38 +1241,38 @@
 
 .v-messages__message--error {
 	:deep(.v-input__control) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-error !important;
+		color: rgb(var(--v-theme-textError)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-border-error !important;
+		color: rgb(var(--v-theme-borderError)) !important;
 	}
 }
 
 .v-messages__message--warning {
 	:deep(.v-input__control) {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 
 		--v-medium-emphasis-opacity: 1;
 	}
 
 	:deep(.v-messages__message) {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 	}
 
 	.v-field--active & {
-		color: tokens.$colors-text-warning !important;
+		color: rgb(var(--v-theme-textWarning)) !important;
 	}
 }
 
 :deep(.v-btn__content) {
-	font-size: tokens.$font-size-body-text + 3;
+	font-size: var(--v-fontSize-corpsDeTexte) + 3;
 	font-weight: bold;
 }
 
@@ -1307,7 +1308,7 @@
 }
 
 :deep(.v-date-picker-month__day .v-btn:hover) {
-	background-color: tokens.$colors-background-main;
+	background-color: rgb(var(--v-theme-backgroundMain));
 }
 
 :deep(.v-date-picker-month__day--selected, .v-date-picker-month__day--adjacent) {
@@ -1315,7 +1316,7 @@
 }
 
 :deep(.v-date-picker-month__day--selected .v-btn:hover) {
-	background-color: tokens.$colors-background-accent-primary-contrasted !important;
+	background-color: rgb(var(--v-theme-backgroundAccentContrasted)) !important;
 }
 
 .fade-enter-active,

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

@@ -309,7 +309,7 @@ const meta = {
 		},
 		'birthDate': {
 			control: 'boolean',
-			description: 'Alias pour isBirthDate (pour compatibilité avec l\'attribut kebab-case birth-date dans les templates). ⚠️ Utiliser soit birthDate soit isBirthDate, mais pas les deux.',
+			description: '⚠️ **DEPRECATED** — Utilisez `isBirthDate` à la place.',
 			defaultValue: false,
 		},
 		'useCombinedMode': {