@cnamts/synapse 1.0.23 → 1.0.24

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

@@ -0,0 +1,82 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import * as Stories from '../DatePicker.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="DatePicker (mode calendrier)"
+	iconSrc={AccessibilityIcon}
+>
+
+<CriteriaSection>
+	<CriteriaCard title="Structure sémantique" icon="🔍">
+		<ul>
+			<li><strong>Champ</strong> : <code>&lt;input&gt;</code> readonly (texte) sans <code>role="combobox"</code> forcé; l’ouverture se fait via clic ou clavier.</li>
+			<li>
+				<strong>Attributs ARIA de l'input (aria-expanded / aria-haspopup)</strong> : Ces attributs sont volontairement retirés pour les raisons suivantes :
+				<ul>
+					<li><em>Incompatibilité avec le rôle natif</em> : Un <code>&lt;input type="text"&gt;</code> possède le rôle implicite <code>textbox</code>. Selon le W3C/WAI-ARIA, l'usage de <code>aria-expanded</code> et <code>aria-haspopup</code> sur ce rôle est invalide et lève des erreurs critiques lors des audits (Axe, Tanaguru).</li>
+					<li><em>Rejet du rôle combobox</em> : Forcer un <code>role="combobox"</code> sur l'input rendrait les attributs valides, mais serait sémantiquement inexact. Notre champ est en <code>readonly</code> et ouvre un véritable panneau de dialogue complexe (calendrier), pas une simple liste d'options de saisie.</li>
+					<li><em>Alternative robuste</em> : L'accessibilité de l'ouverture est garantie contextuellement. L'ouverture du calendrier déplace immédiatement le focus dans une modale avec un <em>focus trap</em>. Le lecteur d'écran comprend le changement de contexte et l'annonce via les régions <code>aria-live</code>, rendant l'expérience fluide et conforme aux standards.</li>
+				</ul>
+			</li>
+			<li><strong>Panneau</strong> : contenu dans un menu <code>role="presentation"</code> avec grille de boutons (<code>role=button</code> natif sur chaque jour).</li>
+			<li><strong>Relations</strong> : <code>aria-controls</code> relie l’input au panneau lorsqu’il est ouvert; <code>aria-owns/expanded/haspopup</code> ne sont pas surchargés.</li>
+			<li><strong>États</strong> : <code>aria-disabled</code> / <code>aria-readonly</code> alignés sur les props, messages d’erreur/avertissement/succès annoncés via la zone de messages du champ.</li>
+		</ul>
+	</CriteriaCard>
+
+	<CriteriaCard title="Ouverture et focus" icon="🧭">
+		<ul>
+			<li><strong>Ouverture clavier</strong> : <kbd>Entrée</kbd> sur le champ ouvre le calendrier; l’icône déclenche l’ouverture avec la souris.</li>
+			<li><strong>Fermeture</strong> : <kbd>Échap</kbd> ferme et valide, focus rendu au champ.</li>
+			<li><strong>Piège de focus</strong> : <kbd>Tab</kbd>/<kbd>Shift+Tab</kbd> restent dans le panneau ouvert (boutons d’entête, grille de jours, bouton « Aujourd’hui »).</li>
+		</ul>
+	</CriteriaCard>
+
+	<CriteriaCard title="Navigation clavier dans le calendrier" icon="⌨️">
+		<ul>
+			<li><strong>Jours</strong> : flèches déplacent le focus jour par jour; <code>PageUp/PageDown</code> changent de mois (<kbd>Shift</kbd> + touche change d’année).</li>
+			<li><strong>Home/End</strong> : vont au premier/dernier jour du mois affiché.</li>
+			<li><strong>Activation</strong> : <kbd>Espace</kbd>/<kbd>Entrée</kbd> sur un jour déclenchent le bouton du jour; même logique sur les boutons d’entête (mois/année et flèches).</li>
+			<li><strong>Dialogue mois/années</strong> : navigation par 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>Live region</strong> : le mois/année affichés sont annoncés via <code>aria-live="polite"</code> (zone masquée).</li>
+			<li><strong>Statuts</strong> : erreurs/avertissements/succès sous le champ; le bouton « Aujourd’hui » a un <code>title</code> explicite.</li>
+			<li><strong>Guidage</strong> : placeholder et libellé (ou <code>aria-label</code>) décrivent l’action attendue.</li>
+		</ul>
+	</CriteriaCard>
+</CriteriaSection>
+
+<DemoSection title="Navigation clavier (rappel)">
+	<Story of={Stories.Default} />
+</DemoSection>
+
+<BestPracticesSection>
+- Fournir un libellé explicite ou <code>aria-label</code> lorsque le label visuel est masqué ou tronqué.
+- En lecture seule, éviter de proposer l’ouverture (raccourcis désactivés dans le composant).
+- En plage de dates, préciser l’ordre attendu dans le hint et laisser la séparatrice visible.
+- Vérifier la cohérence des bornes <code>period</code> pour ne pas masquer les jours attendus.
+</BestPracticesSection>
+
+<ResourcesSection>
+- Stories DatePicker : cas standard, plage, lecture seule.
+- Tests : <code>CalendarMode/DatePicker.spec.ts</code> et <code>DatePicker.events.spec.ts</code> couvrent l’ouverture, le focus et la navigation clavier.
+- WAI-ARIA grid & boutons : référence pour les comportements clavier sur les grilles de dates.
+</ResourcesSection>
+
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,141 @@
+// @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 DatePicker from '../DatePicker.vue'
+
+// Scénario d'accessibilité : sélecteur de date en mode calendrier,
+// avec label, format jour/mois/année et navigation clavier.
+
+describe('DatePicker (CalendarMode) – accessibility (axe)', () => {
+	it('has no obvious axe violations in default calendar mode', async () => {
+		const wrapper = mount(DatePicker, {
+			props: {
+				label: 'Date de naissance',
+				format: 'DD/MM/YYYY',
+				modelValue: null,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DatePicker – default calendar mode', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with required date field', async () => {
+		const wrapper = mount(DatePicker, {
+			props: {
+				label: 'Date de rendez-vous',
+				format: 'DD/MM/YYYY',
+				modelValue: null,
+				required: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DatePicker – required date field', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with error messages', async () => {
+		const wrapper = mount(DatePicker, {
+			props: {
+				label: 'Date de début',
+				format: 'DD/MM/YYYY',
+				modelValue: '32/13/2023', // Date invalide
+				errorMessages: ['La date est invalide'],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DatePicker – with error messages', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations in no-calendar mode', async () => {
+		const wrapper = mount(DatePicker, {
+			props: {
+				label: 'Date',
+				format: 'DD/MM/YYYY',
+				modelValue: null,
+				noCalendar: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DatePicker – no-calendar mode', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations in combined mode', async () => {
+		const wrapper = mount(DatePicker, {
+			props: {
+				label: 'Période de séjour',
+				format: 'DD/MM/YYYY',
+				modelValue: null,
+				useCombinedMode: true,
+				displayRange: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DatePicker – combined mode with range', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with disabled state', async () => {
+		const wrapper = mount(DatePicker, {
+			props: {
+				label: 'Date de consultation',
+				format: 'DD/MM/YYYY',
+				modelValue: '15/03/2023',
+				disabled: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DatePicker – disabled state', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with readonly state', async () => {
+		const wrapper = mount(DatePicker, {
+			props: {
+				label: 'Date de création',
+				format: 'DD/MM/YYYY',
+				modelValue: '01/01/2023',
+				readonly: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DatePicker – readonly state', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with hint text', async () => {
+		const wrapper = mount(DatePicker, {
+			props: {
+				label: 'Date d\'échéance',
+				format: 'DD/MM/YYYY',
+				modelValue: null,
+				hint: 'Sélectionnez une date dans les 30 prochains jours',
+				persistentHint: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DatePicker – with hint text', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -335,9 +335,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	parameters: {
-		a11y: {
-			disable: false,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -409,9 +406,6 @@ export const Default: Story = {
 
 export const Required: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -495,9 +489,6 @@ export const Required: Story = {
 
 export const DateRange: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -568,9 +559,6 @@ export const DateRange: Story = {
 
 export const BirthDate: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -635,9 +623,6 @@ export const BirthDate: Story = {
 
 export const WithValidation: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -725,9 +710,6 @@ export const WithValidation: Story = {
 
 export const DifferentFormats: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -819,9 +801,6 @@ export const DifferentFormats: Story = {
 
 export const WithDateFormatReturn: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -881,9 +860,6 @@ export const WithDateFormatReturn: Story = {
 
 export const DisablePickerInteraction: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -943,9 +919,6 @@ export const DisablePickerInteraction: Story = {
 
 export const AutoFormattingInput: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1001,9 +974,6 @@ export const AutoFormattingInput: Story = {
 
 export const CustomDateFormat: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1060,9 +1030,6 @@ export const CustomDateFormat: Story = {
 
 export const ReadonlyMode: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1131,9 +1098,6 @@ export const ReadonlyMode: Story = {
 
 export const AppendIcon: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1194,9 +1158,6 @@ export const AppendIcon: Story = {
 
 export const WithCustomPeriod: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1311,9 +1272,6 @@ export const WithCustomPeriod: Story = {
 
 export const WithTextFieldActivator: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1372,9 +1330,6 @@ export const WithTextFieldActivator: Story = {
 
 export const AutoClampFeature: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1485,9 +1440,6 @@ export const AutoClampFeature: Story = {
 
 export const WithFormSubmission: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1543,9 +1495,9 @@ export const WithFormSubmission: Story = {
 				const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
 				const submitted = ref(false)
 
-				const submitForm = () => {
+				const submitForm = async () => {
 					if (!datePicker.value) return
-					const isValid = datePicker.value.validateOnSubmit()
+					const isValid = await datePicker.value.validateOnSubmit()
 					if (isValid) {
 						submitted.value = true
 					}
@@ -1582,9 +1534,6 @@ export const WithFormSubmission: Story = {
 
 export const CustomRules: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -1661,9 +1610,6 @@ export const CustomRules: Story = {
 
 export const CustomWarningRules: Story = {
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',