@cnamts/synapse 1.0.23 → 1.0.25

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

@@ -21,64 +21,59 @@
 
 	dayjs.extend(customParseFormat)
 
-	/**
-	 * =====================
-	 * Props / Emits
-	 * =====================
-	 */
 	const props = withDefaults(defineProps<{
-		modelValue?: DateValue
-		placeholder?: string
-		format?: string
+		autoClamp?: boolean
+		bgColor?: string
+		customRules?: ValidationRule[]
+		customWarningRules?: ValidationRule[]
 		dateFormatReturn?: string
-		label: string
-		required?: boolean
+		density?: 'default' | 'comfortable' | 'compact'
+		disableErrorHandling?: boolean
 		disabled?: boolean
-		readonly?: boolean
-		title?: string | false
-		isOutlined?: boolean
-		displayIcon?: boolean
 		displayAppendIcon?: boolean
-		noIcon?: boolean
-		customRules?: ValidationRule[]
-		customWarningRules?: ValidationRule[]
+		displayIcon?: boolean
 		displayPrependIcon?: boolean
-		disableErrorHandling?: boolean
-		showSuccessMessages?: boolean
-		bgColor?: string
 		displayRange?: boolean
-		autoClamp?: boolean
-		isValidateOnBlur?: boolean
-		density?: 'default' | 'comfortable' | 'compact'
+		externalErrorMessages?: string[]
+		format?: string
 		hint?: string
+		isOutlined?: boolean
+		isValidateOnBlur?: boolean
+		label: string
+		modelValue?: DateValue
+		noIcon?: boolean
 		persistentHint?: boolean
-		externalErrorMessages?: string[]
+		placeholder?: string
+		readonly?: boolean
+		required?: boolean
+		showSuccessMessages?: boolean
+		title?: string | false
 	}>(), {
-		modelValue: undefined,
-		placeholder: undefined,
-		format: DATE_PICKER_MESSAGES.FORMAT_DEFAULT,
+		autoClamp: true,
+		bgColor: 'white',
+		customRules: () => [],
+		customWarningRules: () => [],
 		dateFormatReturn: undefined,
-		required: false,
+		density: 'default',
+		disableErrorHandling: false,
 		disabled: false,
-		readonly: false,
-		title: false,
-		isOutlined: true,
-		displayIcon: true,
 		displayAppendIcon: false,
-		noIcon: false,
-		customRules: () => [],
-		customWarningRules: () => [],
+		displayIcon: true,
 		displayPrependIcon: true,
-		disableErrorHandling: false,
-		showSuccessMessages: true,
-		bgColor: 'white',
 		displayRange: false,
-		autoClamp: true,
-		isValidateOnBlur: true,
-		density: 'default',
+		externalErrorMessages: () => [],
+		format: DATE_PICKER_MESSAGES.FORMAT_DEFAULT,
 		hint: undefined,
+		isOutlined: true,
+		isValidateOnBlur: true,
+		modelValue: undefined,
+		noIcon: false,
 		persistentHint: false,
-		externalErrorMessages: () => [],
+		placeholder: undefined,
+		readonly: false,
+		required: false,
+		showSuccessMessages: true,
+		title: false,
 	})
 
 	const emit = defineEmits<{
@@ -149,11 +144,11 @@
 
 	const clearValidation = () => validationApi.value.clearValidation()
 
-	const validateField = (
+	const validateField = async (
 		value: unknown,
 		rules?: ValidationRule[],
 		warningRules?: ValidationRule[],
-	): ValidationResult => validationApi.value.validateField(value, rules, warningRules)
+	): Promise<ValidationResult> => await validationApi.value.validateField(value, rules, warningRules)
 
 	// Agrégation des erreurs internes et externes
 	const errorMessages = computed(() => [...errors.value, ...props.externalErrorMessages])
@@ -163,15 +158,15 @@
 	/**
 	 * Safe validate utility
 	 */
-	const safeValidateField = (
+	const safeValidateField = async (
 		value: unknown,
 		rules?: ValidationRule[],
 		warningRules?: ValidationRule[],
-	): ValidationResult => {
+	): Promise<ValidationResult> => {
 		if (readonly.value) {
 			return { hasError: false, hasWarning: false, hasSuccess: false, state: { errors: [], warnings: [], successes: [] } }
 		}
-		return validateField(value, rules, warningRules) ?? { hasError: false, hasWarning: false, hasSuccess: false, state: { errors: [], warnings: [], successes: [] } }
+		return await validateField(value, rules, warningRules) ?? { hasError: false, hasWarning: false, hasSuccess: false, state: { errors: [], warnings: [], successes: [] } }
 	}
 
 	/**
@@ -200,7 +195,7 @@
 	const isUpdatingFromInternal = ref(false)
 	const isFocused = ref(false)
 	const hasInteracted = ref(false)
-	const ariaLabel = ref('')
+	const ariaLabel = ref(props.label || props.placeholder || DATE_PICKER_MESSAGES.LABEL_DEFAULT)
 
 	const { validateDateFormat: _validateDateFormat } = useDateFormatValidation({
 		format: displayFormat.value,
@@ -231,7 +226,9 @@
 	const isValidating = ref(false)
 
 	const updateDisplayValue = (dateDisplayText: string) => (inputValue.value = dateDisplayText)
-	const updateAriaLabel = (ariaLabelText: string) => (ariaLabel.value = ariaLabelText)
+	const updateAriaLabel = (ariaLabelText: string) => {
+		ariaLabel.value = ariaLabelText || props.label || props.placeholder || DATE_PICKER_MESSAGES.LABEL_DEFAULT
+	}
 
 	const { formatDateInput, handlePaste: handlePasteSingle, isHandlingBackspace } = useDateInputEditing({
 		format: displayFormat.value,
@@ -583,9 +580,18 @@
 		emit('update:model-value', val)
 	}
 
-	function runRules(value: string): boolean {
+	async function runRules(value: string): Promise<boolean> {
 		clearValidation()
-		if (!value) {
+
+		// Vérifier si la valeur est vide ou est un squelette (ex: "__//____" pour DD/MM/YYYY)
+		// Un squelette ne contient que des underscores, des espaces et les séparateurs du format
+		const formatSeparators = props.format.replace(/[A-Za-z]/g, '')
+		// Créer un pattern qui autorise uniquement underscores, espaces et séparateurs du format
+		const allowedChars = ['_', ' ', ...new Set(formatSeparators.split(''))].map(char => char.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('')
+		const skeletonPattern = new RegExp(`^[${allowedChars}]+$`)
+		const isEmptyOrSkeleton = !value || value.trim() === '' || skeletonPattern.test(value)
+
+		if (isEmptyOrSkeleton) {
 			if (required.value && hasInteracted.value && !readonly.value && !props.disableErrorHandling) {
 				errors.value.push(DATE_PICKER_MESSAGES.ERROR_REQUIRED)
 				return false
@@ -602,7 +608,7 @@
 
 		if (isRange.value && value.includes(' - ')) {
 			const [startDateText, endDateText] = value.split(' - ')
-			if (startDateText && !endDateText) return !!validateManualInput(startDateText)
+			if (startDateText && !endDateText) return !!(await validateManualInput(startDateText))
 
 			if (startDateText && endDateText) {
 				const formatValidationResult = validateDateFormatForSingleOrRange(value)
@@ -618,14 +624,14 @@
 						errors.value.push(DATE_PICKER_MESSAGES.ERROR_END_BEFORE_START)
 						return false
 					}
-					safeValidateField(startDate, computed(() => props.customRules).value, computed(() => props.customWarningRules).value)
-					if (errors.value.length === 0) safeValidateField(endDate, computed(() => props.customRules).value, computed(() => props.customWarningRules).value)
+					await safeValidateField(startDate, computed(() => props.customRules).value, computed(() => props.customWarningRules).value)
+					if (errors.value.length === 0) await safeValidateField(endDate, computed(() => props.customRules).value, computed(() => props.customWarningRules).value)
 				}
 			}
 			return !hasError.value
 		}
 
-		return !!validateManualInput(value)
+		return !!(await validateManualInput(value))
 	}
 
 	/**
@@ -660,7 +666,7 @@
 		emit('focus')
 	}
 
-	function onBlur() {
+	async function onBlur() {
 		isFocused.value = false
 		hasInteracted.value = true
 
@@ -678,7 +684,7 @@
 
 		if (inputValue.value) {
 			const formatValidationResult = validateDateFormatForSingleOrRange(inputValue.value)
-			const customRulesValidationResult = safeValidateField(inputValue.value, computed(() => props.customRules).value, computed(() => props.customWarningRules).value)
+			const customRulesValidationResult = await safeValidateField(inputValue.value, computed(() => props.customRules).value, computed(() => props.customWarningRules).value)
 
 			if (formatValidationResult.isValid && !customRulesValidationResult.hasError && !isRange.value) {
 				const parsedDate = dayjs(inputValue.value, displayFormat.value, true).toDate()
@@ -1104,8 +1110,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 :deep(.v-icon__svg) { cursor: default; }
 
 .warning-field {
@@ -1116,10 +1120,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-warning !important;
+		color: rgb(var(--v-theme-borderWarning)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 
@@ -1127,7 +1131,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-warning !important;
+			color: rgb(var(--v-theme-borderWarning)) !important;
 		}
 	}
 }
@@ -1135,11 +1139,11 @@
 .error-field {
 	:deep(.v-input__control),
 	: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;
 	}
 }
 
@@ -1151,10 +1155,10 @@
 	}
 
 	:deep(.v-field) {
-		color: tokens.$colors-border-success !important;
+		color: rgb(var(--v-theme-borderSuccess)) !important;
 
 		.v-field__outline {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 
@@ -1162,7 +1166,7 @@
 		opacity: 1 !important;
 
 		.v-messages__message {
-			color: tokens.$colors-border-success !important;
+			color: rgb(var(--v-theme-borderSuccess)) !important;
 		}
 	}
 }

package/src/components/DatePicker/DateTextInput/NoCalendar.stories.ts

@@ -683,6 +683,7 @@ export const WithErrorDisabled: Story = {
 								v-model="date1"
 								format="DD/MM/YYYY"
 								placeholder="Date requise sans erreur"
+								label="Date requise sans erreur"
 								required
 								no-icon
 								no-calendar
@@ -695,6 +696,7 @@ export const WithErrorDisabled: Story = {
 								v-model="date2"
 								format="DD/MM/YYYY"
 								placeholder="Date requise avec erreur"
+								label="Date requise avec erreur"
 								required
 								no-icon
 								no-calendar
@@ -745,6 +747,7 @@ export const WithErrorDisabled: Story = {
 								v-model="date2"
 								format="DD/MM/YYYY"
 								placeholder="Date requise avec erreur"
+								label="Date requise avec erreur"
 								required
 								no-icon
 								no-calendar

package/src/components/DatePicker/DateTextInput/accessibilite/Accessibility.mdx

@@ -0,0 +1,66 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import * as Stories from '../NoCalendar.stories.ts'
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg'
+import '@/stories/styles/shared.css'
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx'
+
+<Meta of={Stories} />
+
+<AccessibilityGuideLayout
+	componentName="DateTextInput (saisie manuelle)"
+	iconSrc={AccessibilityIcon}
+>
+	<CriteriaSection>
+		<CriteriaCard title="Structure sémantique" icon="🔍">
+			<ul>
+				<li><strong>Rôle</strong> : input type="text" (role implicite <code>textbox</code>), <code>aria-required</code> synchronisé quand <code>required</code>.</li>
+				<li><strong>Association</strong> : label natif ou <code>aria-label</code> / <code>aria-labelledby</code> pour les champs sans libellé visible (libellé calculé dynamiquement selon label/placeholder).</li>
+				<li><strong>Descriptions</strong> : <code>aria-describedby</code> relie aides contextuelles/hints et messages d’erreur/succès/avertissements.</li>
+				<li><strong>États</strong> : <code>aria-invalid</code>, <code>aria-disabled</code>, <code>aria-readonly</code> et zones de messages reflètent la validation et les props.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard title="Saisie et clavier" icon="⌨️">
+			<ul>
+				<li><strong>Tab</strong> : entrée et sortie du champ sans piège de focus (pas de panneau).</li>
+				<li><strong>Masque léger</strong> : l’option <code>autoClamp</code> ajoute les séparateurs mais n’empêche pas la saisie ni la navigation au clavier (retours chariot, flèches, copier/coller conservés).</li>
+				<li><strong>Raccourcis</strong> : <kbd>Ctrl/Cmd+A</kbd>, <kbd>Ctrl/Cmd+C</kbd>, <kbd>Ctrl/Cmd+V</kbd> restent utilisables pour éditer la valeur.</li>
+				<li><strong>Plage de dates</strong> : la chaîne <code>start - end</code> est éditable (séparateur conservé), aucune navigation forcée.</li>
+				<li><strong>Lecture seule</strong> : aucune validation ni effacement, bouton clear désactivé.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard title="Messages et retours" icon="📣">
+			<ul>
+				<li><strong>Statuts</strong> : erreurs/avertissements/succès affichés sous le champ (zone annoncée via <code>aria-live</code> si activé côté navigateur/lecteur).</li>
+				<li><strong>Formats attendus</strong> : placeholder et hint expliquent la structure (JJ/MM/AAAA…).</li>
+				<li><strong>Validation manuelle</strong> : <code>customRules</code> / <code>customWarningRules</code> exposent des messages dédiés.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection title="Saisie clavier et autoClamp">
+		<Story of={Stories.AutoClampFeature} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		- Fournir un libellé explicite ou <code>aria-label</code> quand le label visuel est masqué ou tronqué.
+		- Afficher un placeholder cohérent avec le format attendu et conserver un hint persistent pour les formats non standards.
+		- En lecture seule, désactiver les actions d’ouverture/validation et laisser l’icône décorative optionnelle mais non interactive.
+		- En mode plage, préciser dans le hint l’ordre attendu (début puis fin) et conserver la séparatrice <code>" - "</code>.
+		- Avec <code>autoClamp</code>, signaler que les séparateurs sont ajoutés automatiquement sans bloquer les corrections clavier.
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		- Stories : <code>Default</code> (champ requis), <code>AutoClampFeature</code> (saisie assistée), <code>DifferentFormats</code> (formats multiples), <code>CustomRules</code> / <code>WarningRules</code> (messages dédiés), <code>Range</code> (plage éditable).
+		- Spécification WAI-ARIA : rôle textbox et gestion de <code>aria-invalid</code> / <code>aria-required</code> / <code>aria-describedby</code>.
+		- Tests axe : <code>DateTextInput.a11y.spec.ts</code> (scénario champ requis, vérifie les attributs aria et les messages).
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -1,7 +1,7 @@
 import { mount, flushPromises } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
 import DateTextInput from '../DateTextInput.vue'
-import SyTextField from '../../../Customs/SyTextField/SyTextField.vue'
+import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 
 describe('DateTextInput.clean', () => {
 	const mountComponent = (props: Record<string, unknown>) => mount(DateTextInput, {
@@ -282,6 +282,57 @@ describe('DateTextInput.clean', () => {
 		expect(input.element.value).toContain('01/01/2025')
 	})
 
+	it('validateOnSubmit succeeds with a valid date', async () => {
+		const wrapper = mountComponent({
+			label: 'Date',
+			format: 'DD/MM/YYYY',
+			required: true,
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('15/06/2025')
+		await input.trigger('blur')
+		await flushPromises()
+
+		const result = await wrapper.vm.validateOnSubmit()
+		expect(result).toBe(true)
+	})
+
+	it('validateOnSubmit fails with an invalid date', async () => {
+		const wrapper = mountComponent({
+			label: 'Date',
+			format: 'DD/MM/YYYY',
+			required: true,
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('99/99/9999')
+		await input.trigger('blur')
+		await flushPromises()
+
+		const result = await wrapper.vm.validateOnSubmit()
+		expect(result).toBe(false)
+	})
+
+	it('validateOnSubmit fails with a future date and notAfterToday custom rule', async () => {
+		const wrapper = mountComponent({
+			label: 'Date',
+			format: 'DD/MM/YYYY',
+			required: true,
+			customRules: [
+				{ type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd\'hui' } },
+			],
+		})
+
+		const input = wrapper.find('input')
+		await input.setValue('01/01/2100')
+		await input.trigger('blur')
+		await flushPromises()
+
+		const result = await wrapper.vm.validateOnSubmit()
+		expect(result).toBe(false)
+	})
+
 	it('does not validate on blur when isValidateOnBlur is false but validateOnSubmit still applies', async () => {
 		const wrapper = mountComponent({
 			label: 'Date',

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

@@ -24,4 +24,5 @@ export { useMonthButtonCustomization } from './useMonthButtonCustomization'
 export { useAsteriskDisplay } from './useAsteriskDisplay'
 export { useDatePickerState } from './useDatePickerState'
 export { useHolidayHighlighting } from './useHolidayHighlighting'
+export { useDatePickerFocusTrap } from './useDatePickerFocusTrap'
 export * from './useCalendarKeyboardNavigation'