@cnamts/synapse 1.0.22 → 1.0.24

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',

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()

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>