@cnamts/synapse 1.0.23 → 1.0.25

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

@@ -0,0 +1,76 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import * as Stories from '../ComplexDatePicker.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="ComplexDatePicker (mode combiné)"
+	iconSrc={AccessibilityIcon}
+>
+
+<CriteriaSection>
+	<CriteriaCard title="Structure sémantique" icon="🔍">
+		<ul>
+			<li><strong>Champ</strong> : conteneur <code>role="combobox"</code> qui expose <code>aria-controls</code> et <code>aria-expanded</code>; champ de saisie interne en <code>textbox</code> avec libellé dynamique. À la différence du mode calendrier simple, ce mode permet la saisie libre, justifiant l'utilisation du pattern combobox.</li>
+			<li><strong>Panneau</strong> : calendrier dans un menu <code>role="presentation"</code>, grille de boutons natifs pour les jours.</li>
+			<li><strong>Relations</strong> : l’activateur référence le panneau via <code>aria-controls</code> quand ouvert; <code>aria-labelledby</code> et <code>aria-label</code> portés par l’input.</li>
+			<li><strong>États</strong> : <code>aria-expanded</code> synchronisé, <code>aria-disabled</code> / <code>aria-readonly</code> propagés aux champs et messages.</li>
+		</ul>
+	</CriteriaCard>
+
+	<CriteriaCard title="Ouverture et focus" icon="🧭">
+		<ul>
+			<li><strong>Ouverture</strong> : clic sur le champ ou l’icône; <kbd>Entrée</kbd> sur le champ ouvre; option <code>textFieldActivator</code> active toute la zone.</li>
+			<li><strong>Fermeture</strong> : <kbd>Échap</kbd> via le piège de focus; fermeture valide et émet <code>closed</code>.</li>
+			<li><strong>Piège de focus</strong> : <kbd>Tab</kbd>/<kbd>Shift+Tab</kbd> circulent dans l’en-tête, la grille et le bouton « Aujourd’hui » tant que le panneau est ouvert.</li>
+			<li><strong>Lecture seule</strong> : aucun clear ni validation interactive, champs non éditables.</li>
+		</ul>
+	</CriteriaCard>
+
+	<CriteriaCard title="Navigation clavier dans le calendrier" icon="⌨️">
+		<ul>
+			<li><strong>Jours</strong> : flèches déplacent le focus; <code>PageUp/PageDown</code> changent de mois (<kbd>Shift</kbd> + touche change d’année).</li>
+			<li><strong>Home/End</strong> : premier/dernier jour du mois affiché.</li>
+			<li><strong>Activation</strong> : <kbd>Espace</kbd>/<kbd>Entrée</kbd> déclenchent les boutons de jour et de l’en-tête (mois/année/flèches).</li>
+			<li><strong>Dialogue mois/années</strong> : flèches et <kbd>Home</kbd>/<kbd>End</kbd>, <kbd>Espace</kbd>/<kbd>Entrée</kbd> sélectionnent l’option et conservent le focus.</li>
+		</ul>
+	</CriteriaCard>
+
+	<CriteriaCard title="Messages et annonces" icon="📣">
+		<ul>
+			<li><strong>Statuts</strong> : erreurs/avertissements/succès affichés sous le champ; bouton « Aujourd’hui » avec <code>title</code>.</li>
+			<li><strong>Formats attendus</strong> : placeholder + hint décrivent la saisie; autoClamp optionnel sur la saisie interne.</li>
+			<li><strong>Lecture/voix</strong> : libellé/placeholder alimentent <code>aria-label</code>; les messages sont reliés via <code>aria-describedby</code>.</li>
+		</ul>
+	</CriteriaCard>
+</CriteriaSection>
+
+<DemoSection title="Saisie + calendrier (mode combiné)">
+	<Story of={Stories.Default} />
+</DemoSection>
+
+<BestPracticesSection>
+- Fournir un libellé ou <code>aria-label</code> explicite, surtout si le label visuel est masqué ou tronqué.
+- Si <code>readonly</code>, laisser le calendrier fermé et désactiver l’effacement; ne pas surcharger les raccourcis.
+- En plage de dates, conserver la séparatrice <code>" - "</code> et préciser l’ordre début/fin dans le hint.
+- Ajuster <code>period</code> pour ne pas masquer des dates attendues; vérifier <code>min/max</code> cohérents avec la plage.
+- Avec <code>textFieldActivator</code>, s’assurer que le label reste lisible et que l’icône n’est pas le seul point d’entrée.
+</BestPracticesSection>
+
+<ResourcesSection>
+- Stories : <code>Default</code>, <code>DateRange</code>, <code>DisablePickerInteraction</code>, <code>AutoFormattingInput</code>, <code>WithTextFieldActivator</code>, <code>ReadonlyMode</code>.
+- Tests : <code>ComplexDatePicker.a11y.spec.ts</code> (axe) et <code>ComplexDatePicker.spec.ts</code> couvrent ouverture, focus et validation combinée.
+- Références : WAI-ARIA combobox + grid pour les schémas combobox + calendrier.
+</ResourcesSection>
+
+</AccessibilityGuideLayout>

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

@@ -160,6 +160,29 @@ describe('ComplexDatePicker.clean', () => {
 		expect((input.element as HTMLInputElement).value).toBe('01/01/2025 - ')
 	})
 
+	it('generates all intermediate dates when selecting a range in range mode', async () => {
+		const wrapper = mountComponent({
+			label: 'Date Field',
+			format: 'DD/MM/YYYY',
+			displayRange: true,
+		})
+
+		await wrapper.vm.handleDateSelected(['01/01/2025', '05/01/2025'])
+		await flushPromises()
+
+		const selection = wrapper.vm.selectedDates as Date[]
+		expect(Array.isArray(selection)).toBe(true)
+		// Should contain 5 dates: 01/01, 02/01, 03/01, 04/01, 05/01
+		expect(selection).toHaveLength(5)
+
+		// Verify start and end dates are correct (handle timezone differences)
+		expect(selection[0]).toBeInstanceOf(Date)
+		expect(selection[selection.length - 1]).toBeInstanceOf(Date)
+		// Use local date string to avoid timezone issues
+		expect(selection[0]?.toLocaleDateString('fr-FR')).toContain('01/01/2025')
+		expect(selection[selection.length - 1]?.toLocaleDateString('fr-FR')).toContain('05/01/2025')
+	})
+
 	it('formatDateInput formats raw digits according to the format and computes cursor position', () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',
@@ -247,7 +270,7 @@ describe('ComplexDatePicker.clean', () => {
 		expect(wrapper.vm.currentYearName).toBe('2030')
 	})
 
-	it('validateOnSubmit returns false when required and empty in text-only mode', () => {
+	it('validateOnSubmit returns false when required and empty in text-only mode', async () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',
 			noCalendar: true,
@@ -255,7 +278,7 @@ describe('ComplexDatePicker.clean', () => {
 			format: 'DD/MM/YYYY',
 		})
 
-		const result = wrapper.vm.validateOnSubmit()
+		const result = await wrapper.vm.validateOnSubmit()
 		expect(result).toBe(false)
 	})
 
@@ -269,7 +292,7 @@ describe('ComplexDatePicker.clean', () => {
 		})
 
 		await nextTick()
-		const result = wrapper.vm.validateOnSubmit()
+		const result = await wrapper.vm.validateOnSubmit()
 		expect(result).toBe(true)
 	})
 
@@ -283,20 +306,20 @@ describe('ComplexDatePicker.clean', () => {
 		expect(wrapper.exists()).toBe(true)
 	})
 
-	it('validateOnSubmit returns false when required and empty in calendar mode', () => {
+	it('validateOnSubmit returns false when required and empty in calendar mode', async () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',
 			required: true,
 			format: 'DD/MM/YYYY',
 		})
 
-		const result = wrapper.vm.validateOnSubmit()
+		const result = await wrapper.vm.validateOnSubmit()
 		expect(result).toBe(false)
 		// Should surface at least one error message
 		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
 	})
 
-	it('validateDates flags an error when end date is before start date in range mode', () => {
+	it('validateDates flags an error when end date is before start date in range mode', async () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',
 			format: 'DD/MM/YYYY',
@@ -309,12 +332,12 @@ describe('ComplexDatePicker.clean', () => {
 			new Date(2025, 0, 1),
 		]
 
-		const result = wrapper.vm.validateDates(true)
+		const result = await wrapper.vm.validateDates(true)
 		expect(result.hasError).toBe(true)
-		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
+		expect(result.state.errors.length).toBeGreaterThan(0)
 	})
 
-	it('validateDates does not flag an error for an incomplete range when not forced', () => {
+	it('validateDates does not flag an error for an incomplete range when not forced', async () => {
 		const wrapper = mountComponent({
 			label: 'Date Field',
 			format: 'DD/MM/YYYY',
@@ -341,7 +364,7 @@ describe('ComplexDatePicker.clean', () => {
 
 		// Simuler une erreur required
 		wrapper.vm.selectedDates = null
-		wrapper.vm.validateDates(true)
+		await wrapper.vm.validateDates(true)
 		expect(wrapper.vm.errorMessages.length).toBeGreaterThan(0)
 
 		// Ouvrir le calendrier puis réinitialiser

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

@@ -51,8 +51,8 @@ export const Required: StoryObj = {
 					const datePicker1 = ref()
 					const date1 = ref('')
 
-					const handleSubmit = () => {
-						const isValid1 = datePicker1.value?.validateOnSubmit()
+					const handleSubmit = async () => {
+						const isValid1 = await datePicker1.value?.validateOnSubmit()
 						
 						if (!isValid1) {
 							alert('Corrigez les erreurs avant de soumettre !')
@@ -71,8 +71,8 @@ export const Required: StoryObj = {
 			const datePicker1 = ref()
 			const date1 = ref('')
 
-			const handleSubmit = () => {
-				const isValid1 = datePicker1.value?.validateOnSubmit()
+			const handleSubmit = async () => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
 
 				if (!isValid1) {
 					alert('Corrigez les erreurs avant de soumettre !')
@@ -151,8 +151,8 @@ export const WithCustomRulesAndRequired: StoryObj = {
 					const datePicker1 = ref()
 					const date1 = ref('01/01/2100')
 
-					const handleSubmit = () => {
-						const isValid1 = datePicker1.value?.validateOnSubmit()
+					const handleSubmit = async () => {
+						const isValid1 = await datePicker1.value?.validateOnSubmit()
 						
 						if (!isValid1) {
 							alert('Corrigez les erreurs avant de soumettre !')
@@ -171,8 +171,8 @@ export const WithCustomRulesAndRequired: StoryObj = {
 			const datePicker1 = ref()
 			const date1 = ref('01/01/2100')
 
-			const handleSubmit = () => {
-				const isValid1 = datePicker1.value?.validateOnSubmit()
+			const handleSubmit = async () => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
 
 				if (!isValid1) {
 					alert('Corrigez les erreurs avant de soumettre !')

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

@@ -52,8 +52,8 @@ export const Required: StoryObj = {
                     const datePicker1 = ref()
                     const date1 = ref('')
 
-                    const handleSubmit = () => {
-                        const isValid1 = datePicker1.value?.validateOnSubmit()
+                    const handleSubmit = async () => {
+                        const isValid1 = await datePicker1.value?.validateOnSubmit()
                         
                         if (!isValid1) {
                             alert('Corrigez les erreurs avant de soumettre !')
@@ -72,8 +72,8 @@ export const Required: StoryObj = {
 			const datePicker1 = ref()
 			const date1 = ref(null)
 
-			const handleSubmit = () => {
-				const isValid1 = datePicker1.value?.validateOnSubmit()
+			const handleSubmit = async () => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
 
 				if (!isValid1) {
 					alert('Corrigez les erreurs avant de soumettre !')
@@ -114,6 +114,104 @@ export const Required: StoryObj = {
 	}),
 }
 
+export const NotRequired: StoryObj = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+                <template>
+                    <v-form @submit.prevent="handleSubmit">
+                        <div style="display: flex; flex-direction: column; gap: 16px;">
+                            <div>
+                                <h3 class="mb-4">Avec calendrier</h3>
+                                <DatePicker
+                                    ref="datePicker1"
+                                    v-model="date1"
+                                    format="DD/MM/YYYY"
+                                    placeholder="Date requise"
+                                    useCombinedMode
+                                />
+                            </div>
+                        </div>
+                        <button type="submit" style="margin-top: 16px; padding: 8px 16px; background-color:#0c419a; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                            Soumettre
+                        </button>
+                    </v-form>
+                </template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `
+                <script setup lang="ts">
+                    import { ref } from 'vue'
+                    import { DatePicker } from '@cnamts/synapse'
+
+                    const datePicker1 = ref()
+                    const date1 = ref('')
+
+                    const handleSubmit = async () => {
+                        const isValid1 = await datePicker1.value?.validateOnSubmit()
+                        
+                        if (!isValid1) {
+                            alert('Corrigez les erreurs avant de soumettre !')
+                        } else {
+                            alert('Formulaire soumis avec succès !')
+                        }
+                    }
+                </script>
+                `,
+			},
+		],
+	},
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const datePicker1 = ref()
+			const date1 = ref(null)
+
+			const handleSubmit = async () => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
+
+				if (!isValid1) {
+					alert('Corrigez les erreurs avant de soumettre !')
+				}
+				else {
+					alert('Formulaire soumis avec succès !')
+				}
+			}
+
+			return {
+				datePicker1,
+				date1,
+				handleSubmit,
+			}
+		},
+		template: `
+            <div class="d-flex flex-wrap align-center pa-4">
+                <form @submit.prevent="handleSubmit" style="width: 100%;">
+                    <div style="display: flex; flex-direction: column; gap: 16px;">
+                        <div>
+                            <DatePicker
+                                ref="datePicker1"
+                                v-model="date1"
+                                format="DD/MM/YYYY"
+                                placeholder="Date requise"
+                                useCombinedMode
+                                :is-validate-on-blur="false"
+                            />
+                        </div>
+                    </div>
+                    <button type="submit" style="margin-top: 16px; padding: 8px 16px; background-color:#0c419a; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                        Soumettre
+                    </button>
+                </form>
+            </div>
+        `,
+	}),
+}
+
 export const WithCustomRulesAndRequired: StoryObj = {
 	parameters: {
 		sourceCode: [
@@ -154,8 +252,8 @@ export const WithCustomRulesAndRequired: StoryObj = {
                     const datePicker1 = ref()
                     const date1 = ref('01/01/2100')
 
-                    const handleSubmit = () => {
-                        const isValid1 = datePicker1.value?.validateOnSubmit()
+                    const handleSubmit = async () => {
+                        const isValid1 = await datePicker1.value?.validateOnSubmit()
                         
                         if (!isValid1) {
                             alert('Corrigez les erreurs avant de soumettre !')
@@ -174,8 +272,8 @@ export const WithCustomRulesAndRequired: StoryObj = {
 			const datePicker1 = ref()
 			const date1 = ref('01/01/2100')
 
-			const handleSubmit = () => {
-				const isValid1 = datePicker1.value?.validateOnSubmit()
+			const handleSubmit = async () => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
 
 				if (!isValid1) {
 					alert('Corrigez les erreurs avant de soumettre !')

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

@@ -52,8 +52,8 @@ export const Required: StoryObj = {
                     const datePicker1 = ref()
                     const date1 = ref('')
 
-                    const handleSubmit = () => {
-                        const isValid1 = datePicker1.value?.validateOnSubmit()
+                    const handleSubmit = async () => {
+                        const isValid1 = await datePicker1.value?.validateOnSubmit()
                         
                         if (!isValid1) {
                             alert('Corrigez les erreurs avant de soumettre !')
@@ -72,8 +72,8 @@ export const Required: StoryObj = {
 			const datePicker1 = ref()
 			const date1 = ref('')
 
-			const handleSubmit = () => {
-				const isValid1 = datePicker1.value?.validateOnSubmit()
+			const handleSubmit = async () => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
 				if (!isValid1) {
 					alert('Corrigez les erreurs avant de soumettre !')
 				}
@@ -131,7 +131,7 @@ export const WithCustomRulesAndRequired: StoryObj = {
                                     placeholder="Date requise"
                                     noCalendar
                                     :customRules="[
-            { type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd'hui' } },
+            { type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd\\'hui' } },
         ]"
                                 />
                             </div>
@@ -153,8 +153,8 @@ export const WithCustomRulesAndRequired: StoryObj = {
                     const datePicker1 = ref()
                     const date1 = ref('01/01/2100')
 
-                    const handleSubmit = () => {
-                        const isValid1 = datePicker1.value?.validateOnSubmit()
+                    const handleSubmit = async (): Promise<void> => {
+                        const isValid1 = await datePicker1.value?.validateOnSubmit()
                         
                         if (!isValid1) {
                             alert('Corrigez les erreurs avant de soumettre !')
@@ -170,11 +170,11 @@ export const WithCustomRulesAndRequired: StoryObj = {
 	render: () => ({
 		components: { DatePicker },
 		setup() {
-			const datePicker1 = ref()
+			const datePicker1 = ref<typeof DatePicker>()
 			const date1 = ref('01/01/2100')
 
-			const handleSubmit = () => {
-				const isValid1 = datePicker1.value?.validateOnSubmit()
+			const handleSubmit = async (): Promise<void> => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
 
 				if (!isValid1) {
 					alert('Corrigez les erreurs avant de soumettre !')
@@ -197,13 +197,14 @@ export const WithCustomRulesAndRequired: StoryObj = {
                         <div>
                             <DatePicker
                                 ref="datePicker1"
+                                label="Date"
                                 v-model="date1"
                                 required
                                 format="DD/MM/YYYY"
                                 placeholder="Date requise"
                                 noCalendar
                                 :custom-rules="[
-            { 		type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourdhui' } },
+            { 		type: 'notAfterToday', options: { message: 'La date ne peut pas être après aujourd\\'hui' } },
         ]"
                             />
                         </div>

package/src/components/DatePicker/DatePickerValidationExample/MultiMode.stories.ts

@@ -63,9 +63,9 @@ export const Required: StoryObj = {
                     const datePicker2 = ref()
                     const date2 = ref('')
 
-                    const handleSubmit = () => {
-                        const isValid1 = datePicker1.value?.validateOnSubmit()
-                        const isValid2 = datePicker2.value?.validateOnSubmit()
+                    const handleSubmit = async () => {
+                        const isValid1 = await datePicker1.value?.validateOnSubmit()
+                        const isValid2 = await datePicker2.value?.validateOnSubmit()
                         
                         if (!isValid1 || !isValid2) {
                             alert('Corrigez les erreurs avant de soumettre !')
@@ -87,9 +87,9 @@ export const Required: StoryObj = {
 			const datePicker2 = ref()
 			const date2 = ref('')
 
-			const handleSubmit = () => {
-				const isValid1 = datePicker1.value?.validateOnSubmit()
-				const isValid2 = datePicker2.value?.validateOnSubmit()
+			const handleSubmit = async () => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
+				const isValid2 = await datePicker2.value?.validateOnSubmit()
 
 				if (!isValid1 || !isValid2) {
 					alert('Corrigez les erreurs avant de soumettre !')
@@ -197,9 +197,9 @@ export const WithCustomRulesAndRequired: StoryObj = {
                     const datePicker2 = ref()
                     const date2 = ref('01/01/2100')
 
-                    const handleSubmit = () => {
-                        const isValid1 = datePicker1.value?.validateOnSubmit()
-                        const isValid2 = datePicker2.value?.validateOnSubmit()
+                    const handleSubmit = async (): Promise<void> => {
+                        const isValid1 = await datePicker1.value?.validateOnSubmit()
+                        const isValid2 = await datePicker2.value?.validateOnSubmit()
                         
                         if (!isValid1 || !isValid2) {
                             alert('Corrigez les erreurs avant de soumettre !')
@@ -221,9 +221,9 @@ export const WithCustomRulesAndRequired: StoryObj = {
 			const datePicker2 = ref()
 			const date2 = ref('01/01/2100')
 
-			const handleSubmit = () => {
-				const isValid1 = datePicker1.value?.validateOnSubmit()
-				const isValid2 = datePicker2.value?.validateOnSubmit()
+			const handleSubmit = async (): Promise<void> => {
+				const isValid1 = await datePicker1.value?.validateOnSubmit()
+				const isValid2 = await datePicker2.value?.validateOnSubmit()
 
 				if (!isValid1 || !isValid2) {
 					alert('Corrigez les erreurs avant de soumettre !')

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

@@ -180,9 +180,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -240,9 +237,6 @@ export const Default: Story = {
 
 export const WithInitialValue: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -299,9 +293,6 @@ export const WithInitialValue: Story = {
 
 export const WithCustomFormat: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -356,9 +347,6 @@ export const WithCustomFormat: Story = {
 
 export const WithValidation: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',