@cnamts/synapse 1.0.20 → 1.0.22

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

@@ -0,0 +1,67 @@
+import { Meta, Primary, Story} from '@storybook/blocks';
+import * as PageContainerStories from '../PageContainer.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={PageContainerStories} />
+
+<AccessibilityGuideLayout
+	componentName="PageContainer"
+	iconSrc={AccessibilityIcon}
+>
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/PageContainer.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/4011" target="_blank" style={{color:'#0C41BD'}}>issue #4011</a>)</p>
+	</div>
+
+	<CriteriaSection>
+		<CriteriaCard icon="🔍" title="Structure sémantique">
+			<ul>
+				<li><strong>Id unique</strong> : la prop <code>uniqueId</code> génère un identifiant sur le conteneur (suffixe <code>-container</code>) et sur le contenu interne (suffixe <code>-content</code>), permettant des relations ARIA robustes</li>
+				<li><strong>Rôles ARIA disponibles via la prop <code>role</code></strong> :</li>
+				<ul style={{ listStyleType: 'none', paddingLeft: 0 }}>
+					<li style={{ listStyleType: '"- "' }}><code>role="region"</code> : contient une zone importante identifiée par un titre</li>
+					<li style={{ listStyleType: '"- "' }}><code>role="main"</code> : représente le contenu principal</li>
+					<li style={{ listStyleType: '"- "' }}><code>role="banner"</code> : pour l'en-tête du site</li>
+					<li style={{ listStyleType: '"- "' }}><code>role="contentinfo"</code> : pour le pied de page du site</li>
+					<li style={{ listStyleType: '"- "' }}><code>role="navigation"</code> : pour un conteneur de navigation</li>
+				</ul>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🏷️" title="Liaison ARIA">
+			<ul>
+				<li><strong>Prop <code>ariaLabelledby</code></strong> : permet de lier le conteneur à un titre via son <code>id</code>, renforçant la compréhension par les lecteurs d'écran — particulièrement utile avec <code>role="region"</code></li>
+				<li><strong>Avec <code>StatusPage</code></strong> : la liaison est gérée automatiquement via les props <code>role</code> et <code>uniqueId</code> de <code>StatusPage</code></li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection title="Avec rôle et liaison ARIA" componentName="PageContainer">
+		<Story of={PageContainerStories.WithAriaRole} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Toujours privilégier les balises HTML sémantiques natives avant ARIA :</li>
+			<li><code>header</code></li>
+			<li><code>nav</code></li>
+			<li><code>main</code></li>
+			<li><code>footer</code></li>
+			<li><code>section (avec un titre)</code></li>
+			<li><code>aside</code></li>
+			<li><code>article</code></li>
+			<li>Toujours associer <code>role="region"</code> à un <code>aria-labelledby</code> pointant vers un titre visible</li>
+			<li>Ne pas utiliser <code>role="main"</code> plus d'une fois par page</li>
+			<li>Fournir un <code>uniqueId</code> explicite et descriptif pour garantir l'unicité des identifiants générés</li>
+		</ul>
+	</BestPracticesSection>
+</AccessibilityGuideLayout>

package/src/components/PageContainer/tests/PageContainer.a11y.spec.ts

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, afterEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
@@ -9,6 +9,10 @@ import PageContainer from '../PageContainer.vue'
 // Scénario d’accessibilité : conteneur de page enveloppant un contenu principal.
 
 describe('PageContainer – accessibility (axe)', () => {
+	afterEach(() => {
+		document.body.innerHTML = ''
+	})
+
 	it('has no obvious axe violations with main content slot', async () => {
 		const wrapper = mount(PageContainer, {
 			slots: {
@@ -113,7 +117,7 @@ describe('PageContainer – accessibility (axe)', () => {
 					role: 'navigation',
 				},
 				slots: {
-					default: '<nav><ul><li><a href="#home">Accueil</a></li><li><a href="#about">À propos</a></li></ul></nav>',
+					default: '<ul><li><a href="#home">Accueil</a></li><li><a href="#about">À propos</a></li></ul>',
 				},
 				attachTo: document.body,
 			})
@@ -154,7 +158,7 @@ describe('PageContainer – accessibility (axe)', () => {
 					role: 'contentinfo',
 				},
 				slots: {
-					default: '<footer><p>&copy; 2026 - Tous droits réservés</p></footer>',
+					default: '<div><p>&copy; 2026 - Tous droits réservés</p></div>',
 				},
 				attachTo: document.body,
 			})
@@ -175,7 +179,7 @@ describe('PageContainer – accessibility (axe)', () => {
 					role: 'banner',
 				},
 				slots: {
-					default: '<header><h1>Logo</h1></header>',
+					default: '<div><h1>Logo</h1></div>',
 				},
 				attachTo: document.body,
 			})
@@ -286,7 +290,7 @@ describe('PageContainer – accessibility (axe)', () => {
 					uniqueId: 'footer',
 				},
 				slots: {
-					default: '<footer><p>Informations de pied de page</p></footer>',
+					default: '<div><p>Informations de pied de page</p></div>',
 				},
 				attachTo: document.body,
 			})
@@ -310,7 +314,7 @@ describe('PageContainer – accessibility (axe)', () => {
 					uniqueId: 'header',
 				},
 				slots: {
-					default: '<header><h1>En-tête</h1></header>',
+					default: '<div><h1>En-tête</h1></div>',
 				},
 				attachTo: document.body,
 			})
@@ -461,9 +465,12 @@ describe('PageContainer – accessibility (axe)', () => {
 		it('has proper color contrast with different background colors', async () => {
 			const wrapper = mount(PageContainer, {
 				props: {
-					role: 'main',
+					role: 'region',
 					color: 'surface',
 				},
+				attrs: {
+					'aria-label': 'Bloc coloré',
+				},
 				slots: {
 					default: '<h1>Texte contrasté</h1><p>Paragraphe avec contraste de couleur.</p>',
 				},

package/src/components/PaginatedTable/PaginatedTable.mdx

@@ -1,15 +1,15 @@
-import {Meta, Canvas, Controls, Source} from '@storybook/blocks';
+import {Meta, Canvas, Controls, Source, Story} from '@storybook/blocks';
 import * as PaginatedTableStories from "./PaginatedTable.stories.ts";
 
 <Meta of={PaginatedTableStories}/>
 
+<Story of={PaginatedTableStories.DeprecationNotice} />
+
 <div className="header">
   <h1>PaginatedTable</h1>
   <p>Le composant `PaginatedTable` est utilisé pour afficher une `VDataTable` de Vuetify avec une pagination persistante.</p>
 </div>
 
-> **⚠️ Attention** : Ce composant est déprécié au profit des composants [SyTable](?path=/docs/composants-tableaux-sytable--docs) et [SyServerTable](?path=/docs/composants-tableaux-syservertable--docs).
-
 <Canvas story={{height: '550px'}} of={PaginatedTableStories.Default}/>
 
 # API

package/src/components/PaginatedTable/PaginatedTable.stories.ts

@@ -4,6 +4,7 @@ import { StateEnum } from './constants/StateEnum'
 import type { DataOptions } from './types'
 import { ref } from 'vue'
 import type { VDataTable } from 'vuetify/components'
+import { createDeprecationNotice } from '@/stories/DeprecationNotice/DeprecationNotice'
 
 interface User {
 	[key: string]: string
@@ -22,7 +23,7 @@ const meta = {
 	component: PaginatedTable,
 	decorators: [
 		() => ({
-			template: '<div style="padding: 20px;"><story/></div>',
+			template: '<div><story/></div>',
 		}),
 	],
 	parameters: {
@@ -767,3 +768,10 @@ export const ManyTables: Story = {
 		}
 	},
 }
+
+export const DeprecationNotice = {
+	...createDeprecationNotice([
+		{ label: 'SyTable', url: '?path=/docs/composants-tableaux-sytable--docs' },
+	]),
+	tags: ['!dev'],
+}

package/src/components/PeriodField/PeriodField.vue

@@ -32,6 +32,7 @@
 		bgColor?: string
 		density?: 'default' | 'comfortable' | 'compact'
 		hideDetails?: boolean | 'auto'
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		modelValue: () => ({ from: null, to: null }),
 		placeholderFrom: 'Début',
@@ -54,6 +55,7 @@
 		bgColor: 'white',
 		density: 'default',
 		hideDetails: false,
+		headingLevel: 2,
 	})
 
 	const emit = defineEmits(['update:modelValue'])
@@ -345,6 +347,7 @@
 				:error-message="fromDateValidation.hasError"
 				:format="props.format"
 				:disabled="props.disabled"
+				:heading-level="props.headingLevel"
 				:is-outlined="props.isOutlined"
 				:no-calendar="props.noCalendar"
 				:no-icon="props.noIcon"
@@ -371,6 +374,7 @@
 				:display-append-icon="props.displayAppendIcon"
 				:display-icon="props.displayIcon"
 				:error-message="toDateValidation.hasError"
+				:heading-level="props.headingLevel"
 				:format="props.format"
 				:disabled="props.disabled"
 				:is-outlined="props.isOutlined"

package/src/components/PeriodField/tests/PeriodField.a11y.spec.ts

@@ -21,9 +21,18 @@ describe('PeriodField – accessibility (axe)', () => {
 			attachTo: document.body,
 		})
 
+		// TODO : https://github.com/assurance-maladie-digital/design-system-v3/issues/1960
+		// 'aria-valid-attr-value' is ignored because Vuetify sets aria-owns on the
+		// DatePicker input referencing the VMenu id, but in JSDOM the menu is
+		// rendered via <Teleport> and not present in the scanned subtree.
+		const ignoreRules = ['region', 'aria-valid-attr-value']
+
 		const results = await axe(wrapper.element as HTMLElement)
+		if (results.violations.filter(violation => !ignoreRules.includes(violation.id)).length > 0) {
+			console.log(JSON.stringify(results.violations, null, 2))
+		}
 		assertNoA11yViolations(results, 'PeriodField – valid period', {
-			ignoreRules: ['region'],
+			ignoreRules: ignoreRules,
 		})
 
 		wrapper.unmount()

package/src/components/PhoneField/PhoneField.stories.ts

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/vue3'
 import PhoneField from './PhoneField.vue'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { indicatifs } from './indicatifs'
 
 const meta = {
@@ -8,47 +8,54 @@ const meta = {
 	component: PhoneField,
 	parameters: {
 		layout: 'fullscreen',
+		actions: {
+			handles: ['update:modelValue', 'update:selectedDialCode', 'update:dialCodeModel', 'change'],
+		},
 		controls: { exclude: ['computedValue', 'phoneMask', 'counter', 'hasError', 'phoneNumber', 'mergedDialCodes'] },
 	},
 	argTypes: {
-		modelValue: { control: false },
-		dialCodeModel: { control: false },
-		required: { control: 'boolean' },
-		outlined: { control: 'boolean' },
-		outlinedIndicatif: { control: 'boolean' },
-		withCountryCode: { control: 'boolean' },
-		countryCodeRequired: { control: 'boolean' },
-		displayFormat: {
+		'modelValue': { control: false },
+		'dialCodeModel': { control: false },
+		'onUpdate:modelValue': { action: 'update:modelValue' },
+		'onUpdate:selectedDialCode': { action: 'update:selectedDialCode' },
+		'onUpdate:dialCodeModel': { action: 'update:dialCodeModel' },
+		'onChange': { action: 'change' },
+		'required': { control: 'boolean' },
+		'outlined': { control: 'boolean' },
+		'outlinedIndicatif': { control: 'boolean' },
+		'withCountryCode': { control: 'boolean' },
+		'countryCodeRequired': { control: 'boolean' },
+		'displayFormat': {
 			control: { type: 'select' },
 			description: 'Format d\'affichage des items',
 			options: ['code', 'code-abbreviation', 'code-country', 'country', 'abbreviation'],
 		},
-		customIndicatifs: {
+		'customIndicatifs': {
 			control: 'object',
 			description: 'Permet d\'ajouter des indicatifs à la liste pre-existante',
 		},
-		useCustomIndicatifsOnly: {
+		'useCustomIndicatifsOnly': {
 			control: 'boolean',
 			description: 'Permet d\'utiliser uniquement les indicatifs que vous renseignez dans la props customIndicatifs',
 		},
-		helpText: {
+		'helpText': {
 			control: 'text',
 			description: 'Texte d\'aide affiché sous le champ. Lorsque présent, les messages d\'erreur incluent un exemple concret distinct du texte d\'aide.',
 		},
-		autocompleteCountryCode: {
+		'autocompleteCountryCode': {
 			control: 'text',
-			description: 'Valeur de l\'attribut autocomplete pour le champ indicatif pays (par défaut: "tel-country-code")',
+			description: 'Valeur de l\'attribut `autocomplete` pour le champ indicatif pays. Utiliser `tel-country-code` (défaut) lorsque le numéro est séparé en deux champs (indicatif + numéro national), conformément à [WHATWG](https://html.spec.whatwg.org/#autofill-field-tel-country-code) et [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose).',
 		},
-		autocompletePhone: {
+		'autocompletePhone': {
 			control: 'text',
-			description: 'Valeur de l\'attribut autocomplete pour le champ numéro de téléphone (par défaut: "tel-national")',
+			description: 'Valeur de l\'attribut `autocomplete` pour le champ numéro de téléphone. Valeurs recommandées selon le scénario :\n\n- `tel-national` (défaut) — numéro sans indicatif, lorsque le composant est en mode deux champs (`withCountryCode`).\n- `tel` — numéro complet avec indicatif intégré, pour un champ unique sans sélecteur de pays.\n- `tel-extension` — poste ou extension téléphonique.',
 		},
-		isValidatedOnBlur: { control: 'boolean' },
-		displayAsterisk: { control: 'boolean' },
-		disableErrorHandling: { control: 'boolean' },
-		disabled: { control: 'boolean' },
-		readonly: { control: 'boolean' },
-	},
+		'isValidatedOnBlur': { control: 'boolean' },
+		'displayAsterisk': { control: 'boolean' },
+		'disableErrorHandling': { control: 'boolean' },
+		'disabled': { control: 'boolean' },
+		'readonly': { control: 'boolean' },
+	} as Record<string, unknown>,
 } satisfies Meta<typeof PhoneField>
 
 export default meta
@@ -58,7 +65,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -99,7 +106,7 @@ export const Default: Story = {
 	},
 	args: {
 		modelValue: '',
-		required: true,
+		required: false,
 		outlined: true,
 		outlinedIndicatif: true,
 		withCountryCode: true,
@@ -133,7 +140,7 @@ export const Default: Story = {
 export const Required: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -216,7 +223,7 @@ export const RequiredWithAsterisk: Story = {
 	},
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		docs: {
 			description: {
@@ -269,7 +276,7 @@ const phoneNumber = ref('')
 export const HelpText: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -392,7 +399,21 @@ const selectedDialCode = ref('')
 export const Autocomplete: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
+		},
+		docs: {
+			description: {
+				story: `
+Les attributs \`autocomplete\` permettent aux navigateurs et aux outils d'assistance de remplir automatiquement les champs avec les bonnes informations utilisateur, conformément à [WCAG 1.3.5 — Identifier la finalité de la saisie](https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose).
+
+| Scénario | Prop à utiliser | Valeur recommandée | Source |
+|---|---|---|---|
+| **Code pays** (ex : +33) — champ séparé | \`autocompleteCountryCode\` | \`tel-country-code\` | [WHATWG](https://html.spec.whatwg.org/#autofill-field-tel-country-code) |
+| **Numéro sans indicatif** (ex : 06 12 34 56 78) — avec \`withCountryCode\` | \`autocompletePhone\` | \`tel-national\` | [WHATWG](https://html.spec.whatwg.org/#autofill-field-tel-national) |
+| **Numéro complet** (indicatif intégré) — sans \`withCountryCode\` | \`autocompletePhone\` | \`tel\` | [WHATWG](https://html.spec.whatwg.org/#autofill-field-tel) |
+| **Extension / poste** | \`autocompletePhone\` | \`tel-extension\` | [WHATWG](https://html.spec.whatwg.org/#autofill-field-tel-extension) |
+				`,
+			},
 		},
 		sourceCode: [
 			{
@@ -465,7 +486,7 @@ const phoneValue3 = ref('')
 		],
 	},
 	args: {
-		required: true,
+		required: false,
 		withCountryCode: true,
 		autocompleteCountryCode: 'tel-country-code',
 		autocompletePhone: 'tel-national',
@@ -547,7 +568,7 @@ const phoneValue3 = ref('')
 export const CustomIndicatifs: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -631,7 +652,7 @@ export const CustomIndicatifs: Story = {
 export const NotValidatedOnBlur: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -705,7 +726,7 @@ export const NotValidatedOnBlur: Story = {
 export const DisplayFormatCode: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -754,7 +775,7 @@ export const DisplayFormatCode: Story = {
 		displayFormat: 'code',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
@@ -779,7 +800,7 @@ export const DisplayFormatCode: Story = {
 export const DisplayFormatCodeAbbreviation: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -828,7 +849,7 @@ export const DisplayFormatCodeAbbreviation: Story = {
 		displayFormat: 'code-abbreviation',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
@@ -853,7 +874,7 @@ export const DisplayFormatCodeAbbreviation: Story = {
 export const DisplayFormatCodeCountry: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -902,7 +923,7 @@ export const DisplayFormatCodeCountry: Story = {
 		displayFormat: 'code-country',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
@@ -927,7 +948,7 @@ export const DisplayFormatCodeCountry: Story = {
 export const DisplayFormatCountry: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -976,7 +997,7 @@ export const DisplayFormatCountry: Story = {
 		displayFormat: 'country',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
@@ -1001,7 +1022,7 @@ export const DisplayFormatCountry: Story = {
 export const DisplayFormatAbbreviation: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1050,7 +1071,7 @@ export const DisplayFormatAbbreviation: Story = {
 		displayFormat: 'abbreviation',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		disabled: false,
 		bgColor: 'white',
@@ -1075,7 +1096,7 @@ export const DisplayFormatAbbreviation: Story = {
 export const DefaultDialCode: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1129,7 +1150,7 @@ export const DefaultDialCode: Story = {
 	args: {
 		modelValue: '',
 		dialCodeModel: { code: '+3433', country: 'Exemple', abbreviation: 'EX', phoneLength: 10, mask: '## ## ## ## ##' },
-		required: true,
+		required: false,
 		outlined: true,
 		outlinedIndicatif: true,
 		withCountryCode: true,
@@ -1168,7 +1189,7 @@ export const DefaultDialCode: Story = {
 export const DefaultDialCodeStandard: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1246,7 +1267,7 @@ export const DefaultDialCodeStandard: Story = {
 export const DisplayModels: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1254,7 +1275,7 @@ export const DisplayModels: Story = {
 				code: `
         <template>
         	<span>
-				{{ args.selectedDialCode }} - {{ args.modelValue }}
+				Indicatif: {{ selectedDialCode }}<br/>Numéro: {{ modelValue }}
 			</span>
           <PhoneField
             v-model="modelValue"
@@ -1301,28 +1322,51 @@ export const DisplayModels: Story = {
 		displayFormat: 'code-country',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		readonly: false,
 		bgColor: 'white',
 	},
-	render: (args) => {
-		return {
-			components: { PhoneField },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="pa-4">
-					<div class="pa-4">
-						{{ args.dialCodeModel }} - {{ args.modelValue }}
-					</div>
-					<PhoneField
-						v-bind="args"
-					/>
-				</div>
-			`,
-		}
-	},
+	render: args => ({
+		components: { PhoneField },
+		setup() {
+			const modelValue = ref(args.modelValue)
+			const selectedDialCode = ref(args.dialCodeModel)
+
+			// Sync ref -> args (pour afficher les modèles dans la story)
+			watch(modelValue, (val) => {
+				args.modelValue = val
+			})
+			watch(selectedDialCode, (val) => {
+				args.dialCodeModel = val
+			})
+			// Sync args -> ref (quand on change les controls Storybook)
+			watch(() => args.modelValue, (val) => {
+				modelValue.value = val
+			})
+			watch(() => args.dialCodeModel, (val) => {
+				selectedDialCode.value = val
+			})
+
+			return {
+				args,
+				modelValue,
+				selectedDialCode,
+			}
+		},
+		template: `
+    <div class="pa-4">
+      <div class="pa-4">
+        Indicatif: {{ selectedDialCode }}<br/>Numéro: {{ modelValue }}
+      </div>
+
+      <PhoneField
+        v-bind="args"
+        v-model="modelValue"
+        v-model:selectedDialCode="selectedDialCode"
+      />
+    </div>
+  `,
+	}),
 }
 
 /**
@@ -1332,7 +1376,7 @@ export const DisplayModels: Story = {
 export const DisabledErrorHandling: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1403,6 +1447,7 @@ export const DisabledErrorHandling: Story = {
 						<p>Ce champ est requis et affichera une erreur s'il est vide.</p>
 						<PhoneField
 							v-bind="args"
+							:disable-error-handling="false"
 						/>
 					</div>
 				</div>
@@ -1414,7 +1459,7 @@ export const DisabledErrorHandling: Story = {
 export const FormValidation: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -1430,7 +1475,7 @@ export const FormValidation: Story = {
 							:outlinedIndicatif="true"
 							:withCountryCode="true"
 							:country-code-required="true"
-							:isValidatedOnBlur="false"
+							:isValidatedOnBlur="true"
 							:readonly="readonly"
 							:disabled="disabled"
 						/>
@@ -1485,7 +1530,7 @@ export const FormValidation: Story = {
 		displayFormat: 'code',
 		customIndicatifs: [],
 		useCustomIndicatifsOnly: false,
-		isValidatedOnBlur: false,
+		isValidatedOnBlur: true,
 		bgColor: 'white',
 		readonly: false,
 		disabled: false,
@@ -1519,6 +1564,7 @@ export const FormValidation: Story = {
 				<div class="pa-4">
 					<form @submit.prevent="submitForm" class="d-flex flex-column">
 						<PhoneField
+							ref="phoneFieldRef"
 							v-bind="args"
 						/>
 						<v-btn type="submit" color="primary" class="mt-4" style="width: 200px;">Soumettre le formulaire</v-btn>