@cnamts/synapse 1.0.21 → 1.0.23

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,10 +662,12 @@
 				'basic-field': !hasError && !hasWarning && !hasSuccess
 			}"
 			@blur="checkErrorOnBlur"
+			@input="(e: Event) => emit('input', e)"
+			@keydown="(e: KeyboardEvent) => emit('keydown', e)"
 		>
 			<!-- Prepend -->
 			<template
-				v-if="props.prependIcon || props.prependTooltip"
+				v-if="props.prependIcon || props.prependTooltip || $slots['prepend']"
 				#prepend
 			>
 				<slot name="prepend">
@@ -672,7 +706,7 @@
 
 			<!-- Append -->
 			<template
-				v-if="props.appendIcon || props.appendTooltip"
+				v-if="props.appendIcon || props.appendTooltip || $slots['append']"
 				#append
 			>
 				<slot name="append">
@@ -709,6 +743,14 @@
 				</slot>
 			</template>
 
+			<!-- Default slot passthrough: renders inside v-field__input (flex-wrap container) -->
+			<template
+				v-if="$slots.default"
+				#default
+			>
+				<slot />
+			</template>
+
 			<!-- Prepend inner -->
 			<template #prepend-inner>
 				<slot name="prepend-inner">
@@ -761,6 +803,16 @@
 			<template #details>
 				<slot name="details" />
 			</template>
+
+			<template #loader="{ color: loaderColor, isActive: loaderActive }">
+				<VProgressLinear
+					v-if="loaderActive"
+					indeterminate
+					rounded
+					:color="loaderColor"
+					:aria-label="props.label ? `Chargement de ${props.label}` : 'Chargement en cours'"
+				/>
+			</template>
 		</VTextField>
 
 		<div

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

@@ -1,15 +1,73 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/blocks';
 import * as Stories from '../SyTextField.stories.ts';
-import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
-
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/SyTextField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+<AccessibilityGuideLayout
+	componentName="SyTextField"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/textinput/"
+>
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/SyTextField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
 		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/935" target="_blank" style={{color:'#0C41BD'}}>issue #935</a>), (<a href="https://github.com/assurance-maladie-digital/design-system/issues/4028" target="_blank" style={{color:'#0C41BD'}}>issue #4028</a>)</p>
 	</div>
+
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique et attributs">
+			<ul>
+				<li><strong>Élément input natif</strong> : Utilisation de <code>&lt;input&gt;</code> via VTextField pour une sémantique correcte.</li>
+				<li><strong>Labels explicites</strong> : Gestion automatique du <code>aria-label</code> combinant label, préfixe et suffixe. L'attribut <code>aria-required</code> est ajouté si le champ est requis.</li>
+				<li><strong>Association avec les messages</strong> : Implémentation dynamique de <code>aria-describedby</code> pour lier le champ à ses messages d'erreur, d'avertissement ou de succès.</li>
+				<li><strong>Icônes décoratives</strong> : Les icônes de validation (erreur, avertissement, succès) sont masquées aux lecteurs d'écran (<code>role="presentation"</code>) pour éviter la redondance avec les messages textuels.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+			<ul>
+				<li><strong>Focus natif</strong> : Le champ est naturellement focusable via <kbd>Tab</kbd>.</li>
+				<li><strong>Boutons accessibles</strong> : Les icônes interactives (prepend/append) sont des boutons focusables avec des labels descriptifs et gèrent les événements <kbd>Entrée</kbd> et <kbd>Espace</kbd>.</li>
+				<li><strong>Bouton de vidage</strong> : Le bouton "clear" possède un <code>aria-label</code> descriptif ("Vider [label]") et est accessible au clavier.</li>
+				<li><strong>Indicateur de focus</strong> : Styles de focus visibles sur le champ et les icônes interactives.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Styles et états visuels">
+			<ul>
+				<li><strong>Contrastes garantis</strong> : Couleurs distinctes pour les états erreur (rouge), avertissement (orange) et succès (vert) respectant les critères WCAG.</li>
+				<li><strong>États cohérents</strong> : Changements visuels clairs entre les états normal, erreur, avertissement et succès.</li>
+				<li><strong>Astérisque optionnel</strong> : Possibilité d'afficher un astérisque visuel pour les champs requis via la prop <code>display-asterisk</code>.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SyTextField">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li><strong>Labels descriptifs</strong> : Utilisez toujours un <code>label</code> clair et concis. Évitez les placeholders comme seuls indicateurs de champ.</li>
+			<li><strong>Messages d'erreur utiles</strong> : Fournissez des messages d'erreur spécifiques qui aident l'utilisateur à corriger sa saisie.</li>
+			<li><strong>Validation appropriée</strong> : Utilisez la validation au blur (<code>isValidateOnBlur</code>) pour ne pas surcharger l'utilisateur pendant la saisie.</li>
+			<li><strong>Évitez les changements de contexte automatiques</strong> : Ne soumettez pas automatiquement le formulaire ou ne changez pas de page lors de la saisie.</li>
+			<li><strong>Préfixes et suffixes accessibles</strong> : Le composant ajoute automatiquement des spans screen-reader-only pour le contenu textuel des préfixes/suffixes.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/textinput/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Champs de texte</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.9" target="_blank" rel="noopener noreferrer">RGAA : Champs de formulaire</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -24,4 +24,19 @@ describe('SyTextField – accessibility (axe)', () => {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no obvious axe violations when loading is true', async () => {
+		const wrapper = mount(SyTextField, {
+			props: {
+				label: 'Nom',
+				modelValue: '',
+				loading: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextField – loading state', {
+			ignoreRules: ['region'],
+		})
+	})
 })

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

@@ -209,6 +209,42 @@ describe('SyTextField', () => {
 		expect(messages.text()).toContain('Attention : Test Field peut contenir une erreur')
 	})
 
+	describe('loading', () => {
+		it('shows progress bar when loading is true', async () => {
+			wrapper = mount(SyTextField, {
+				props: { loading: true, label: 'Nom' },
+			})
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.v-progress-linear').exists()).toBe(true)
+		})
+
+		it('does not show progress bar when loading is false', async () => {
+			wrapper = mount(SyTextField, {
+				props: { loading: false, label: 'Nom' },
+			})
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.v-progress-linear').exists()).toBe(false)
+		})
+
+		it('sets aria-label with field label when loading', async () => {
+			wrapper = mount(SyTextField, {
+				props: { loading: true, label: 'Nom' },
+			})
+			await wrapper.vm.$nextTick()
+			const bar = wrapper.find('.v-progress-linear')
+			expect(bar.attributes('aria-label')).toBe('Chargement de Nom')
+		})
+
+		it('sets generic aria-label when no label and loading', async () => {
+			wrapper = mount(SyTextField, {
+				props: { loading: true },
+			})
+			await wrapper.vm.$nextTick()
+			const bar = wrapper.find('.v-progress-linear')
+			expect(bar.attributes('aria-label')).toBe('Chargement en cours')
+		})
+	})
+
 	it('maintains input value without validation rules', async () => {
 		wrapper = mount(SyTextField)
 		const input = wrapper.find('input')

package/src/components/DataList/accessibilite/Accessibility.mdx

@@ -1,15 +1,83 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../DataList.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as DataListStories from '../DataList.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+  AccessibilityGuideLayout,
+  CriteriaSection,
+  CriteriaCard,
+  DemoSection,
+  BestPracticesSection,
+  ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={DataListStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+  componentName="DataList"
+  iconSrc={AccessibilityIcon}
+  apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/"
+>
+  <div class="mt-8">
+    <p>Rapport d'audit manuel : <a href="/audits/DataList.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+    <p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4030" target="_blank" style={{color:'#0C41BD'}}>issue #4030</a>)</p>
+  </div>
 
+  <CriteriaSection>
+    <CriteriaCard icon="🔍" title="Structure sémantique des listes">
+      <ul>
+        <li><strong>Élément dl/dt/dd</strong> : Utilisation native des balises de liste de définitions pour une sémantique correcte</li>
+        <li><strong>Section avec titre</strong> : Conteneur <code>&lt;section&gt;</code> avec <code>aria-labelledby</code> lorsque <code>listTitle</code> est fourni</li>
+        <li><strong>Titre personnalisable</strong> : Tag de titre configurable (<code>titleTag</code>) avec ID unique pour l'association ARIA</li>
+      </ul>
+    </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/DataList.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4030" target="_blank" style={{color:'#0C41BD'}}>issue #4030</a>)</p>
-	</div>
+    <CriteriaCard icon="⌨️" title="Navigation et interaction">
+      <ul>
+        <li><strong>Boutons d'action</strong> : Utilisation de <code>VBtn</code> natif pour les actions avec focus clavier correct</li>
+        <li><strong>Focus visible</strong> : Style <code>:focus-visible::after</code> pour une indication claire de navigation</li>
+        <li><strong>Événements accessibles</strong> : Émission d'événements <code>click:item-action</code> pour les interactions</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="🎨" title="Icônes et éléments visuels">
+      <ul>
+        <li><strong>Icônes décoratives</strong> : Icônes avec <code>decorative="true"</code> pour masquer aux lecteurs d'écran</li>
+        <li><strong>Contrastes adaptatifs</strong> : Couleurs de label adaptées au thème clair/sombre</li>
+        <li><strong>Chips accessibles</strong> : Utilisation de <code>VChip</code> pour les valeurs avec contraste approprié</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📱" title="Flexibilité et responsive">
+      <ul>
+        <li><strong>Layout adaptable</strong> : Mode <code>row</code> pour les affichages horizontaux avec flexbox</li>
+        <li><strong>Widthable</strong> : Gestion des dimensions via <code>useWidthable</code> pour le responsive</li>
+        <li><strong>Slots personnalisables</strong> : Slots <code>value</code>, <code>action</code>, <code>icon</code> pour une flexibilité maximale</li>
+      </ul>
+    </CriteriaCard>
+  </CriteriaSection>
+
+  <DemoSection componentName="DataList">
+    <Primary />
+  </DemoSection>
+
+  <BestPracticesSection>
+    <ul>
+      <li><strong>Titres descriptifs</strong> : Utilisez toujours <code>listTitle</code> pour fournir un contexte aux listes importantes</li>
+      <li><strong>Labels clairs</strong> : Assurez-vous que les <code>key</code> (labels) sont concis et descriptifs</li>
+      <li><strong>Actions explicites</strong> : Utilisez des verbes d'action clairs pour les boutons ("Modifier", "Supprimer", "Voir")</li>
+      <li><strong>Ordre logique</strong> : Maintenez un ordre cohérent des paires label/valeur dans toute l'application</li>
+      <li><strong>Slots sécurisés</strong> : Préférez le slot <code>value</code> à <code>renderHtmlValue</code> pour le contenu HTML</li>
+      <li><strong>États de chargement</strong> : Utilisez <code>loading</code> avec <code>DataListLoading</code> pour les données asynchrones</li>
+    </ul>
+  </BestPracticesSection>
+
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Listbox</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.10" target="_blank" rel="noopener noreferrer">RGAA Critère 11.10 : Listes de définitions</a></li>
+      <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/dl" target="_blank" rel="noopener noreferrer">MDN : Élément dl - Liste de définitions</a></li>
+    </ul>
+  </ResourcesSection>
+
+</AccessibilityGuideLayout>

package/src/components/DataListGroup/accessibilite/Accessibility.mdx

@@ -1,14 +1,83 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../DataListGroup.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as DataListGroupStories from '../DataListGroup.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={DataListGroupStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/DataListGroup.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+<AccessibilityGuideLayout
+	componentName="DataListGroup"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/"
+>
+	<div class="mt-8">
+		<p>Rapport d'audit manuel : <a href="/audits/DataListGroup.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
 		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/651" target="_blank" style={{color:'#0C41BD'}}>issue #651</a>)</p>
-	</div>
+	</div>
+
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique des groupes">
+			<ul>
+				<li><strong>Élément ul/li</strong> : Utilisation native de liste non ordonnée pour regrouper les DataList</li>
+				<li><strong>Composition sémantique</strong> : Chaque élément contient un DataList avec structure dl/dt/dd héritée</li>
+				<li><strong>Titres hiérarchiques</strong> : Tags de titre configurables (<code>titlesTag</code>) pour chaque sous-liste</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation et interactions">
+			<ul>
+				<li><strong>Focus séquentiel</strong> : Navigation logique entre les différents groupes et leurs éléments</li>
+				<li><strong>Actions contextualisées</strong> : Événements <code>click:list-item</code> avec indices doubles (dataListIndex, itemIndex)</li>
+				<li><strong>Boutons accessibles</strong> : Actions héritées des DataList avec focus clavier correct</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Mise en page et responsive">
+			<ul>
+				<li><strong>Layout flexbox</strong> : Utilisation de <code>d-flex</code> pour l'affichage horizontal des groupes</li>
+				<li><strong>Largeurs configurables</strong> : <code>itemWidth</code> pour contrôler la taille de chaque groupe</li>
+				<li><strong>Marges négatives</strong> : <code>ma-n4</code> sur le conteneur avec <code>ma-4</code> sur les éléments pour un espacement optimal</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="📱" title="États et chargement">
+			<ul>
+				<li><strong>États de chargement</strong> : Propagation de <code>loading</code> à tous les DataList enfants</li>
+				<li><strong>Slots avancés</strong> : Slot <code>item</code> avec contexte enrichi (dataListIndex inclus)</li>
+				<li><strong>Gestion HTML</strong> : Support de <code>renderHtmlValue</code> avec avertissement de dépréciation</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="DataListGroup">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li><strong>Groupes cohérents</strong> : Organisez les DataList par thématiques logiques (informations personnelles, coordonnées, etc.)</li>
+			<li><strong>Titres distinctifs</strong> : Utilisez des <code>title</code> uniques et descriptifs pour chaque groupe</li>
+			<li><strong>Largeurs adaptées</strong> : Choisissez <code>itemWidth</code> en fonction du contenu (plus large pour les textes longs)</li>
+			<li><strong>Actions groupées</strong> : Maintenez la cohérence des actions entre les différents groupes</li>
+			<li><strong>États synchronisés</strong> : Utilisez <code>loading</code> au niveau du groupe pour des chargements coordonnés</li>
+			<li><strong>Slots contextuels</strong> : Exploitez le <code>data-list-index</code> dans les slots pour des personnalisations avancées</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Listbox</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+			<li><a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.10" target="_blank" rel="noopener noreferrer">RGAA Critère 11.10 : Listes de définitions</a></li>
+			<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/ul" target="_blank" rel="noopener noreferrer">MDN : Élément ul - Liste non ordonnée</a></li>
+		</ul>
+	</ResourcesSection>
+
+</AccessibilityGuideLayout>

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)
 					},
 				})