@cnamts/synapse 1.0.21 → 1.0.22

package/src/components/Customs/SyIcon/SyIcon.vue

@@ -34,10 +34,12 @@
 		size?: string
 	}>()
 
+	const resolvedDecorative = computed(() => props.decorative ?? true)
+
 	// Configuration pour la directive rgaaSvgFix
 	const rgaaSvgFixConfig = computed(() => {
 		return {
-			isDecorative: props.decorative,
+			isDecorative: resolvedDecorative.value,
 			role: props.role,
 			autoDetectButton: props.autoDetectButton,
 		}
@@ -45,16 +47,16 @@
 
 	// Vérification à l'initialisation du composant
 	onMounted(() => {
-		checkAccessibility(props.icon, props.decorative, props.label)
+		checkAccessibility(props.icon, resolvedDecorative.value, props.label)
 	})
 
 	// Vérification à chaque changement des props concernées
 	watch(
 		[() => props.decorative, () => props.label, () => props.icon],
-		([decorative, label, icon]) => {
+		([, label, icon]) => {
 			checkAccessibility(
 				icon as string,
-				decorative as boolean | undefined,
+				resolvedDecorative.value,
 				label as string | undefined,
 			)
 		},
@@ -66,7 +68,9 @@
 		v-rgaa-svg-fix="rgaaSvgFixConfig"
 		:color="props.color"
 		:size="props.size"
-		:aria-label="props.label"
+		:role="props.role"
+		:aria-label="resolvedDecorative ? undefined : props.label"
+		:aria-hidden="resolvedDecorative ? 'true' : undefined"
 	>
 		{{ icon }}
 	</v-icon>

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

@@ -41,6 +41,10 @@ const meta: Meta<typeof SyPagination> = {
 		'append': {
 			description: 'Slot pour ajouter du contenu après la pagination',
 		},
+		'headingLevel': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
 	},
 } as Meta<typeof SyPagination>
 
@@ -57,6 +61,7 @@ export const Default: Story = {
 		},
 	},
 	args: {
+		'headingLevel': 2,
 		'modelValue': 1,
 		'pages': 5,
 		'visible': 5,
@@ -74,6 +79,7 @@ export const Default: Story = {
 				<SyPagination
 					v-model="currentPage"
 					:pages="args.pages"
+					:headingLevel="args.headingLevel"
 					:visible="args.visible"
 					:label="args.label"
 					@update:model-value="args['onUpdate:modelValue']"
@@ -92,6 +98,7 @@ export const ManyPages: Story = {
 		},
 	},
 	args: {
+		'headingLevel': 2,
 		'modelValue': 5,
 		'pages': 20,
 		'visible': 5,
@@ -111,6 +118,7 @@ export const ManyPages: Story = {
 					:pages="args.pages"
 					:visible="args.visible"
 					:label="args.label"
+					:headingLevel="args.headingLevel"
 					@update:model-value="args['onUpdate:modelValue']"
 				/>
 			</div>
@@ -127,6 +135,7 @@ export const CustomButtons: Story = {
 		},
 	},
 	args: {
+		'headingLevel': 2,
 		'modelValue': 5,
 		'pages': 20,
 		'visible': 5,
@@ -145,6 +154,7 @@ export const CustomButtons: Story = {
 					v-model="currentPage"
 					:pages="args.pages"
 					:visible="args.visible"
+					:headingLevel="args.headingLevel"
 					:label="args.label"
 					@update:model-value="args['onUpdate:modelValue']"
 				>
@@ -175,6 +185,7 @@ export const Slots: Story = {
 		},
 	},
 	args: {
+		'headingLevel': 2,
 		'modelValue': 3,
 		'pages': 10,
 		'visible': 5,
@@ -186,11 +197,11 @@ export const Slots: Story = {
 			const currentPage = ref(args.modelValue)
 			const itemsPerPage = 10
 			const totalItems = 100
-
+			const headingLevel = 2
 			const startItem = computed(() => (currentPage.value - 1) * itemsPerPage + 1)
 			const endItem = computed(() => Math.min(currentPage.value * itemsPerPage, totalItems))
 
-			return { args, currentPage, totalItems, startItem, endItem }
+			return { args, currentPage, totalItems, startItem, endItem, headingLevel }
 		},
 		template: `
 			<div>
@@ -199,6 +210,7 @@ export const Slots: Story = {
 					:pages="args.pages"
 					:visible="args.visible"
 					:label="args.label"
+					:headingLevel="args.headingLevel"
 					@update:model-value="args['onUpdate:modelValue']"
 				>
 					<template #prepend>

package/src/components/Customs/SyPagination/SyPagination.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	// Props definition
-	const props = defineProps<{
+	const props = withDefaults(defineProps<{
 		/**
 		 * Current page number
 		 */
@@ -23,7 +24,18 @@
 		 * ID of the element controlled by this pagination
 		 */
 		ariaControls?: string
-	}>()
+		/**
+		 * Heading level for the pagination label (for accessibility)
+		 */
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+
+	}>(), {
+		pages: undefined,
+		visible: undefined,
+		label: undefined,
+		ariaControls: undefined,
+		headingLevel: 2,
+	})
 
 	// Default values for optional props
 	const visiblePages = computed(() => props.visible || 5)
@@ -187,12 +199,13 @@
 			:aria-labelledby="uniqueId"
 			:aria-controls="ariaControls"
 		>
-			<h2
+			<SyHeading
 				:id="uniqueId"
 				class="d-sr-only"
+				:level="headingLevel"
 			>
 				{{ `${label}` }}
-			</h2>
+			</SyHeading>
 			<ul class="list">
 				<!-- First page button (optional) -->
 				<li v-if="$slots['first-page']">
@@ -390,7 +403,9 @@
 				}
 
 				&.disabled {
-					color: rgb(0 0 0 / 60%); /* Increased from 40% to 60% for better contrast */
+					color: rgb(0 0 0 / 60%);
+
+					/* Increased from 40% to 60% for better contrast */
 					border-color: rgb(0 0 0 / 20%);
 					pointer-events: none;
 				}

package/src/components/Customs/SyPagination/accessibilite/Accessibility.mdx

@@ -1,10 +1,81 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as SyPagination from '../SyPagination.stories';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as SyPaginationStories from '../SyPagination.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={SyPagination} />
+<Meta of={SyPaginationStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+	componentName="SyPagination"
+	iconSrc={AccessibilityIcon}
+>
+	<CriteriaSection>
+<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
+  <ul>
+    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h2, défini dans l’implémentation du composant.</li>
+      <code>&lt;SyPagination
+          :heading-level="2" /&gt; </code>
+    
+    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
+  </ul>
+</CriteriaCard>
+		<CriteriaCard icon="🔍" title="Structure sémantique">
+			<ul>
+				<li><strong>Zone de navigation</strong> : utilisation de <code>&lt;nav&gt;</code> et <code>&lt;ul&gt;</code> pour structurer la pagination.</li>
+				<li><strong>Nom accessible</strong> : titre <code>&lt;h2&gt;</code> caché (classe <code>d-sr-only</code>) relié au <code>nav</code> via <code>aria-labelledby</code>; libellé personnalisable avec la prop <code>label</code> (par défaut «&nbsp;Pagination&nbsp;»).</li>
+				<li><strong>Association au contenu</strong> : prise en charge de <code>aria-controls</code> pour relier la pagination à la zone paginée.</li>
+				<li><strong>Page active</strong> : l’attribut <code>aria-current="page"</code> est appliqué au lien de la page courante.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation clavier">
+			<ul>
+				<li><strong>Tabulation</strong> : l’ordre de tab suit la séquence logique (Précédent → numéros → Suivant).</li>
+				<li><strong>Activation</strong> : les liens de pagination se déclenchent à l’Entrée (ou Espace selon le navigateur).</li>
+				<li><strong>Focus visible</strong> : le focus natif reste apparent sur les liens (<code>&lt;a&gt;</code>).</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="📱" title="États et retours d’information">
+			<ul>
+				<li><strong>Boutons indisponibles</strong> : <code>aria-disabled="true"</code> est ajouté sur «&nbsp;Précédent&nbsp;» / «&nbsp;Suivant&nbsp;» / premières/dernières pages lorsque non actionnables.</li>
+				<li><strong>Ellipses non interactives</strong> : les séparateurs «&nbsp;…&nbsp;» sont rendus non cliquables pour éviter la confusion.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Personnalisation accessible">
+			<ul>
+				<li>Slots pour <code>first-page</code>, <code>previous</code>, <code>next</code>, <code>last-page</code> et <code>page-number</code> afin d’adapter les libellés ou ajouter des icônes.</li>
+				<li>Possibilité d’ajouter du contexte via <code>prepend</code> / <code>append</code> (ex. compteur «&nbsp;Éléments 21-40 sur 200&nbsp;»).</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SyPagination">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Renseigner un <strong>label</strong> explicite (ex. «&nbsp;Pagination des résultats de recherche&nbsp;») pour nommer la navigation.</li>
+			<li>Relier la pagination à la zone de contenu avec <code>aria-controls</code> et un <code>id</code> stable sur le conteneur paginé.</li>
+			<li>Conserver des libellés textuels même si des icônes sont utilisées dans les slots (ou ajouter du texte masqué).</li>
+			<li>S’assurer d’un <strong>contraste suffisant</strong> et d’une taille de cible d’au moins 44px pour les liens.</li>
+			<li>Limiter le nombre de pages affichées en choisissant un <code>visible</code> adapté et en gardant des libellés courts.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/TR/wai-aria-1.2/#navigation" target="_blank" rel="noopener noreferrer">Rôle ARIA « navigation »</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/#navigation-mechanisms-headings-and-labels" target="_blank" rel="noopener noreferrer">WCAG 2.4 - Mécanismes de navigation</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+
+import { afterEach, beforeEach, describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyPagination from '../SyPagination.vue'
+
+describe('SyPagination – accessibility (axe)', () => {
+	beforeEach(() => {
+		const content = document.createElement('div')
+		content.id = 'paginated-content'
+		document.body.appendChild(content)
+	})
+
+	afterEach(() => {
+		document.body.innerHTML = ''
+	})
+
+	const baseProps = {
+		modelValue: 1,
+		pages: 5,
+		visible: 5,
+		ariaControls: 'paginated-content',
+		label: 'Pagination des résultats',
+	}
+
+	it('has no obvious axe violations on default pagination', async () => {
+		const wrapper = mount(SyPagination, {
+			props: baseProps,
+			attachTo: document.body,
+		})
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'SyPagination – default')
+		wrapper.unmount()
+	})
+
+	it('has no obvious axe violations with ellipses and disabled controls', async () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 1,
+				pages: 10,
+				visible: 3,
+				ariaControls: 'paginated-content',
+				label: 'Pagination ellipses',
+			},
+			attachTo: document.body,
+		})
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'SyPagination – ellipsis variant')
+		wrapper.unmount()
+	})
+})

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

@@ -6,6 +6,7 @@ describe('SyPagination', () => {
 	it('renders correctly with default props', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 			},
@@ -20,6 +21,7 @@ describe('SyPagination', () => {
 	it('does not render pagination if pages is 1', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 1,
 			},
@@ -31,6 +33,7 @@ describe('SyPagination', () => {
 	it('emits update:modelValue when page is changed', async () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 			},
@@ -58,6 +61,7 @@ describe('SyPagination', () => {
 	it('disables previous button on first page', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 			},
@@ -70,6 +74,7 @@ describe('SyPagination', () => {
 	it('disables next button on last page', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 10,
 				pages: 10,
 			},
@@ -82,6 +87,7 @@ describe('SyPagination', () => {
 	it('shows correct aria-current attribute', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 3,
 				pages: 10,
 			},
@@ -94,6 +100,7 @@ describe('SyPagination', () => {
 	it('respects visible prop for number of visible pages', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 5,
 				pages: 10,
 				visible: 3,
@@ -113,6 +120,7 @@ describe('SyPagination', () => {
 	it('uses custom label when provided', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 				label: 'Test Pagination',
@@ -125,6 +133,7 @@ describe('SyPagination', () => {
 	it('sets aria-controls when provided', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 				ariaControls: 'test-content',
@@ -137,6 +146,7 @@ describe('SyPagination', () => {
 	it('uses d-sr-only class for screen reader text', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 1,
 				pages: 10,
 			},
@@ -149,6 +159,7 @@ describe('SyPagination', () => {
 	it('shows start ellipsis when current page is far from first page', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 8, // Current page far from first page
 				pages: 10,
 				visible: 3, // Small visible count to ensure ellipsis appears
@@ -163,6 +174,7 @@ describe('SyPagination', () => {
 	it('shows both ellipses when current page is in the middle of a large range', () => {
 		const wrapper = mount(SyPagination, {
 			props: {
+				headingLevel: 2,
 				modelValue: 10, // Middle page
 				pages: 20,
 				visible: 3, // Small visible count to ensure ellipsis appears

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

@@ -185,6 +185,10 @@ const meta = {
 			description: 'Texte d\'aide affiché sous le champ',
 			control: 'text',
 		},
+		'maxlength': {
+			description: 'Nombre maximal de caractères autorisés dans le champ',
+			control: { type: 'text' },
+		},
 		'loading': {
 			description: 'Affiche un indicateur de chargement',
 			control: 'boolean',

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

@@ -90,6 +90,8 @@
 			disableClickButton?: boolean
 			autocomplete?: string
 			helpText?: string
+			maxlength?: string | number
+			title?: string | false
 		}>(),
 		{
 			modelValue: undefined,
@@ -159,6 +161,8 @@
 			disableClickButton: true,
 			autocomplete: 'off',
 			helpText: '',
+			maxlength: undefined,
+			title: undefined,
 		},
 	)
 
@@ -173,6 +177,8 @@
 
 	const emit = defineEmits([
 		'update:modelValue',
+		'input',
+		'keydown',
 		'clear',
 		'prepend-icon-click',
 		'append-icon-click',
@@ -197,6 +203,11 @@
 			Object.entries(attrs).filter(([key]) => key !== 'display-asterisk'),
 		) as Record<string, unknown>
 
+		// aria-controls coming from menu activators is invalid on the input itself; drop it
+		if ('aria-controls' in filteredAttrs) {
+			delete filteredAttrs['aria-controls']
+		}
+
 		if (!('validate-on' in filteredAttrs) && 'rules' in filteredAttrs && props.isValidateOnBlur) {
 			filteredAttrs['validate-on'] = 'blur lazy'
 		}
@@ -300,7 +311,11 @@
 		}
 	})
 
-	const hasError = computed(() => validation.hasError.value || props.hasError)
+	const hasError = computed(() =>
+		validation.hasError.value
+		|| (props.errorMessages?.length ?? 0) > 0
+		|| props.hasError,
+	)
 	const hasWarning = computed(() => validation.hasWarning.value || props.hasWarning)
 	const hasSuccess = computed(() => ((validation.hasSuccess.value && !hasError.value && !hasWarning.value) || props.hasSuccess) && props.showSuccessMessages)
 
@@ -355,7 +370,13 @@
 		return props.helpText && hasMessages.value && !props.areDetailsHidden
 	})
 
-	// Accessible label that includes prefix and suffix content for screen readers
+	// Use title prop if provided, otherwise fall back to accessible label
+	const titleValue = computed(() => {
+		// If title is explicitly false, don't show any title
+		if (props.title === false) return undefined
+		// Otherwise use title if provided, or accessibleLabel as fallback
+		return props.title || accessibleLabel.value
+	})
 	const accessibleLabel = computed(() => {
 		let label = labelWithAsterisk.value
 
@@ -449,7 +470,12 @@
 					const describedbyIds = existingIds.join(' ').trim()
 
 					// Associate input with messages via aria-describedby (preserve existing IDs)
-					inputElement.setAttribute('aria-describedby', describedbyIds)
+					if (describedbyIds) {
+						inputElement.setAttribute('aria-describedby', describedbyIds)
+					}
+					else {
+						inputElement.removeAttribute('aria-describedby')
+					}
 
 					// Remove problematic ARIA attributes from details container (parent)
 					if (detailsContainer) {
@@ -517,7 +543,12 @@
 					const describedbyIds = existingIds.join(' ').trim()
 
 					// Associate input with messages via aria-describedby (preserve existing IDs)
-					inputElement.setAttribute('aria-describedby', describedbyIds)
+					if (describedbyIds) {
+						inputElement.setAttribute('aria-describedby', describedbyIds)
+					}
+					else {
+						inputElement.removeAttribute('aria-describedby')
+					}
 
 					// Remove problematic ARIA attributes from details container (parent)
 					if (detailsContainer) {
@@ -579,7 +610,7 @@
 			v-model="model"
 			:autocomplete="props.autocomplete"
 			:active="props.isActive"
-			:title="accessibleLabel"
+			:title="titleValue"
 			:aria-label="accessibleLabel"
 			:aria-required="props.required ? 'true' : undefined"
 			:base-color="props.baseColor"
@@ -600,6 +631,7 @@
 			:hint="showHelpTextAsMessage ? props.helpText : props.hint"
 			:label="labelWithAsterisk"
 			:loading="props.loading"
+			:maxlength="props.maxlength"
 			:max-errors="props.maxErrors"
 			:max-width="props.maxWidth"
 			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
@@ -630,6 +662,8 @@
 				'basic-field': !hasError && !hasWarning && !hasSuccess
 			}"
 			@blur="checkErrorOnBlur"
+			@input="(e: Event) => emit('input', e)"
+			@keydown="(e: KeyboardEvent) => emit('keydown', e)"
 		>
 			<!-- Prepend -->
 			<template

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

@@ -38,6 +38,10 @@ const meta = {
 		},
 	},
 	argTypes: {
+		'headingLevel': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
 		'onUpdate:modelValue': {
 			description: 'Émis lorsque la valeur du champ est mise à jour',
 			table: {
@@ -345,6 +349,7 @@ export const Default: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'isBirthDate': false,
@@ -417,6 +422,7 @@ export const Required: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'isBirthDate': false,
@@ -489,6 +495,7 @@ export const DateRange: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une période',
 		'label': 'Sélectionner une période',
 		'format': 'DD/MM/YYYY',
@@ -575,6 +582,7 @@ export const WithCustomPeriod: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'isBirthDate': false,
@@ -671,6 +679,7 @@ export const WithAppendIcon: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -738,6 +747,7 @@ export const WithoutIcon: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -805,6 +815,7 @@ export const BirthDate: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Date de naissance',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -873,6 +884,7 @@ export const WithError: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -948,6 +960,7 @@ export const WithWarning: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Date avec avertissement',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -1026,6 +1039,7 @@ export const WithSuccess: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Date valide',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -1222,6 +1236,7 @@ export const WithDateFormatReturn: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -1333,6 +1348,7 @@ export const WithDayjsFormat: Story = {
 		],
 	},
 	args: {
+		headingLevel: 3,
 		placeholder: 'Sélectionner une date',
 		format: 'DD/MM/YYYY',
 		isBirthDate: false,
@@ -1465,6 +1481,7 @@ export const UTC: Story = {
 		],
 	},
 	args: {
+		'headingLevel': 3,
 		'placeholder': 'Sélectionner une date',
 		'format': 'DD/MM/YYYY',
 		'dateFormatReturn': '',
@@ -1496,12 +1513,20 @@ export const UTC: Story = {
 
 				const dateString = computed({
 					get() {
-						return dayjs.utc(utcIso.value).tz(selectedTimeZone.value).format(DISPLAY_FORMAT.value)
+						return dayjs.utc(utcIso.value).format(DISPLAY_FORMAT.value)
 					},
 					set(v: string) {
-						const parsed = dayjs.tz(v, DISPLAY_FORMAT.value, selectedTimeZone.value)
+						const parsed = dayjs.utc(v, DISPLAY_FORMAT.value, true)
 						if (!parsed.isValid() || parsed.format(DISPLAY_FORMAT.value) !== v) return
-						utcIso.value = parsed.utc().toISOString()
+						utcIso.value = dayjs.utc()
+							.year(parsed.year())
+							.month(parsed.month())
+							.date(parsed.date())
+							.hour(0)
+							.minute(0)
+							.second(0)
+							.millisecond(0)
+							.toISOString()
 						args['onUpdate:modelValue']?.(v)
 					},
 				})