@cnamts/synapse 1.0.21 → 1.0.23

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

@@ -1,15 +1,312 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../PhoneField.stories.ts';
+import { Meta, Primary } from '@storybook/blocks';
+import * as PhoneFieldStories from '../PhoneField.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
 
-<Meta of={Stories} />
+<Meta of={PhoneFieldStories} name="Accessibility" />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<div className="accessibility-guide">
+	<div className="header">
+		<h1>Guide d'Accessibilité du Composant PhoneField</h1>
+	</div>
+
+	<div className="intro-section">
+		<img
+			src={AccessibilityIcon}
+			alt="Icône d'accessibilité"
+			className="accessibility-icon"
+		/>
+		<p className="intro-text">
+			Le composant PhoneField a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C,
+			notamment le modèle <a href="https://www.w3.org/WAI/tutorials/forms/" target="_blank" rel="noopener noreferrer">WAI-ARIA pour les champs de formulaire</a>.
+			Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience utilisateur inclusive.
+		</p>
+	</div>
+
+	<div className="criteria-section">
+		<h2>Critères d'accessibilité respectés</h2>
+
+		<div className="criteria-card">
+			<div className="criteria-header">
+				<span className="criteria-icon">🔍</span>
+				<h3>Structure sémantique</h3>
+			</div>
+			<ul>
+				<li><strong>Regroupement</strong> : Lorsque l'indicatif pays est affiché, les deux champs (indicatif et numéro) sont regroupés dans un <code>fieldset</code> avec une <code>legend</code> associée.</li>
+				<li><strong>Étiquetage explicite</strong> : Chaque champ dispose d'un label associé via la prop <code>label</code>.</li>
+				<li>
+					<strong>Attributs autocomplete</strong> : Les attributs <code>autocomplete</code> sont configurables via <code>autocompleteCountryCode</code> et <code>autocompletePhone</code>.
+					Choisissez la valeur adaptée à votre scénario (<a href="https://www.w3.org/WAI/WCAG21/quickref/#identify-input-purpose" target="_blank" rel="noopener noreferrer">WCAG 1.3.5</a>) :
+					<table className="autocomplete-table">
+						<thead>
+							<tr>
+								<th>Scénario</th>
+								<th>Prop</th>
+								<th>Valeur recommandée</th>
+								<th>Source</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td><strong>Code pays</strong> (ex : +33) — champ séparé</td>
+								<td><code>autocompleteCountryCode</code></td>
+								<td><code>tel-country-code</code></td>
+								<td><a href="https://html.spec.whatwg.org/#autofill-field-tel-country-code" target="_blank" rel="noopener noreferrer">WHATWG</a></td>
+							</tr>
+							<tr>
+								<td><strong>Numéro sans indicatif</strong> (ex : 06 12 34 56 78) — avec <code>withCountryCode</code></td>
+								<td><code>autocompletePhone</code></td>
+								<td><code>tel-national</code></td>
+								<td><a href="https://html.spec.whatwg.org/#autofill-field-tel-national" target="_blank" rel="noopener noreferrer">WHATWG</a></td>
+							</tr>
+							<tr>
+								<td><strong>Numéro complet</strong> (indicatif intégré) — sans <code>withCountryCode</code></td>
+								<td><code>autocompletePhone</code></td>
+								<td><code>tel</code></td>
+								<td><a href="https://html.spec.whatwg.org/#autofill-field-tel" target="_blank" rel="noopener noreferrer">WHATWG</a></td>
+							</tr>
+							<tr>
+								<td><strong>Extension / poste</strong></td>
+								<td><code>autocompletePhone</code></td>
+								<td><code>tel-extension</code></td>
+								<td><a href="https://html.spec.whatwg.org/#autofill-field-tel-extension" target="_blank" rel="noopener noreferrer">WHATWG</a></td>
+							</tr>
+						</tbody>
+					</table>
+				</li>
+			</ul>
+		</div>
+
+		<div className="criteria-card">
+			<div className="criteria-header">
+				<span className="criteria-icon">⌨️</span>
+				<h3>Navigation clavier complète</h3>
+			</div>
+			<ul>
+				<li><strong>Touche Tab</strong> : Navigation séquentielle entre le sélecteur d'indicatif et le champ numéro.</li>
+				<li><strong>Sélecteur d'indicatif</strong> : Navigation clavier complète dans la liste déroulante des pays.</li>
+				<li><strong>Focus visible</strong> : Indication claire de l'élément actuellement focalisé sur chaque champ.</li>
+			</ul>
+		</div>
+
+		<div className="criteria-card">
+			<div className="criteria-header">
+				<span className="criteria-icon">📱</span>
+				<h3>États et retours d'information</h3>
+			</div>
+			<ul>
+				<li><strong>État requis</strong> : Support du mode <code>required</code> et affichage d'un message d'erreur en cas de soumission invalide.</li>
+				<li><strong>État d'erreur</strong> : Un message d'erreur et une icône rouge sont affichés sous le champ lorsque la valeur saisie est invalide.</li>
+				<li><strong>État de succès</strong> : Un message de confirmation et une icône verte indiquent que la valeur saisie est valide.</li>
+				<li><strong>États disabled / readonly</strong> : Les états sont communiqués visuellement et empêchent l'interaction selon le cas.</li>
+				<li><strong>Texte d'aide</strong> : La prop <code>helpText</code> permet d'afficher une aide à la saisie sous le champ.</li>
+				<li><strong>Retour textuel</strong> : Les messages de validation sont affichés dans la zone dédiée aux détails.</li>
+			</ul>
+		</div>
+
+		<div className="criteria-card">
+			<div className="criteria-header">
+				<span className="criteria-icon">🎨</span>
+				<h3>Personnalisation accessible</h3>
+			</div>
+			<ul>
+				<li><strong>Format d'affichage</strong> : La prop <code>displayFormat</code> permet d'adapter l'affichage des indicatifs (code, pays, abréviation) sans casser l'accessibilité.</li>
+				<li><strong>Astérisque visuel</strong> : La prop <code>displayAsterisk</code> permet d'afficher un indicateur visuel de champ requis.</li>
+				<li><strong>Couleur de fond</strong> : La prop <code>bgColor</code> permet d'adapter l'apparence tout en conservant les états d'erreur (prioritaires).</li>
+			</ul>
+		</div>
+	</div>
 
+	<div className="demo-section">
+		<h2>Démonstration interactive</h2>
+		<p>
+			Explorez ci-dessous un exemple de PhoneField. Essayez de naviguer en utilisant uniquement votre clavier (Tab pour naviguer, saisie directe dans les champs)
+			pour tester l'accessibilité.
+		</p>
+		<Primary />
+	</div>
+
+	<div className="best-practices">
+		<h2>Bonnes pratiques d'utilisation</h2>
+		<ul>
+			<li>Utilisez un libellé explicite pour chaque champ téléphone afin d'informer clairement l'utilisateur du format attendu.</li>
+			<li>Les attributs <code>autocomplete</code> sont préconfigurés par défaut (<code>autocompleteCountryCode</code> : <code>"tel-country-code"</code>, <code>autocompletePhone</code> : <code>"tel-national"</code>) et couvrent la majorité des cas d'usage. Adaptez-les si nécessaire (ex. <code>"tel"</code> pour un numéro complet avec indicatif intégré).</li>
+			<li>Pour un champ requis, expliquez clairement la contrainte via la prop <code>helpText</code>.</li>
+			<li>Évitez de baser le sens uniquement sur la couleur (toujours fournir un message textuel).</li>
+			<li>Assurez-vous que les zones cliquables restent confortables sur mobile.</li>
+		</ul>
+	</div>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/PhoneField.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/797" target="_blank" style={{color:'#0C41BD'}}>issue #797</a>)</p>
+	<div className="resources-section">
+		<h2>Ressources supplémentaires</h2>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H44" target="_blank" rel="noopener noreferrer">WCAG – Utilisation des labels pour les contrôles de formulaire (H44)</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://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill" target="_blank" rel="noopener noreferrer">Spécification HTML – Attribut autocomplete</a></li>
+		</ul>
 	</div>
+</div>
+
+<style>
+{`
+  .accessibility-guide {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    color: #333;
+  }
+
+  .intro-section {
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    border-left: 5px solid #0077cc;
+  }
+
+  .accessibility-icon {
+    width: 60px;
+    height: 60px;
+    margin-right: 20px;
+    flex-shrink: 0;
+  }
+
+  .intro-text {
+    font-size: 1.1em;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .criteria-section {
+    margin-bottom: 40px;
+  }
+
+  .criteria-section h2,
+  .demo-section h2,
+  .best-practices h2,
+  .resources-section h2 {
+    border-bottom: 2px solid #eaecef;
+    padding-bottom: 10px;
+    margin-top: 30px;
+    margin-bottom: 20px;
+    color: #0077cc;
+  }
+
+  .criteria-card {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin-bottom: 20px;
+  }
+
+  .criteria-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+  }
+
+  .criteria-icon {
+    font-size: 1.8em;
+    margin-right: 15px;
+  }
+
+  .criteria-header h3 {
+    margin: 0;
+    font-size: 1.3em;
+    color: #0077cc;
+  }
+
+  .criteria-card ul {
+    margin: 0;
+    padding-left: 20px;
+  }
+
+  .criteria-card li {
+    margin-bottom: 8px;
+    line-height: 1.5;
+  }
+
+  .demo-section {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 40px;
+  }
+
+  .best-practices {
+    background-color: #f5f5f5;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+  }
+
+  .best-practices ul {
+    padding-left: 20px;
+  }
+
+  .best-practices li {
+    margin-bottom: 10px;
+    line-height: 1.5;
+  }
+
+  .resources-section {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+  }
+
+  .resources-section ul {
+    padding-left: 20px;
+  }
+
+  .resources-section li {
+    margin-bottom: 10px;
+  }
+
+  .resources-section a {
+    color: #0077cc;
+    text-decoration: none;
+  }
+
+  .resources-section a:hover {
+    text-decoration: underline;
+  }
+
+  .autocomplete-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 12px;
+    font-size: 0.9em;
+  }
+
+  .autocomplete-table th,
+  .autocomplete-table td {
+    border: 1px solid #ddd;
+    padding: 8px 12px;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .autocomplete-table th {
+    background-color: #f0f4f8;
+    color: #0077cc;
+    font-weight: 600;
+  }
+
+  .autocomplete-table tr:nth-child(even) td {
+    background-color: #f9f9f9;
+  }
+
+  code {
+    background-color: #f0f0f0;
+    padding: 2px 5px;
+    border-radius: 3px;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 0.9em;
+  }
+`}
+</style>

package/src/components/PhoneField/indicatifs.ts

@@ -1,8 +1,8 @@
 export const indicatifs = [
 	{ code: '+1', country: 'USA/Canada', countryFr: 'États-Unis/Canada', abbreviation: 'US/CA', phoneLength: 10, mask: '### ### ####' },
 	{ code: '+7', country: 'Russia/Kazakhstan', countryFr: 'Russie/Kazakhstan', abbreviation: 'RU/KZ', phoneLength: 10, mask: '### ### ## ##' },
-	{ code: '+20', country: 'Egypt', countryFr: 'Égypte', abbreviation: 'EG', phoneLength: 9, mask: '### ### ####' },
-	{ code: '+27', country: 'South Africa', countryFr: 'Afrique du Sud', abbreviation: 'ZA', phoneLength: 9, mask: '### ### ####' },
+	{ code: '+20', country: 'Egypt', countryFr: 'Égypte', abbreviation: 'EG', phoneLength: 9, mask: '### ### ###' },
+	{ code: '+27', country: 'South Africa', countryFr: 'Afrique du Sud', abbreviation: 'ZA', phoneLength: 9, mask: '## ### ####' },
 	{ code: '+30', country: 'Greece', countryFr: 'Grèce', abbreviation: 'GR', phoneLength: 10, mask: '### ### ####' },
 	{ code: '+31', country: 'Netherlands', countryFr: 'Pays-Bas', abbreviation: 'NL', phoneLength: 9, mask: '## ### ####' },
 	{ code: '+32', country: 'Belgium', countryFr: 'Belgique', abbreviation: 'BE', phoneLength: 9, mask: '### ### ###' },

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

@@ -0,0 +1,47 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import PhoneField from '../PhoneField.vue'
+
+// Scénario d'accessibilité : champ de téléphone requis, avec et sans indicatif pays.
+
+describe('PhoneField – accessibility (axe)', () => {
+	it('has no obvious axe violations for a required phone field', async () => {
+		const wrapper = mount(PhoneField, {
+			props: {
+				modelValue: '',
+				required: true,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'PhoneField – required field', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+
+	it('has no obvious axe violations with country code selector', async () => {
+		const wrapper = mount(PhoneField, {
+			props: {
+				modelValue: '',
+				required: true,
+				withCountryCode: true,
+				countryCodeRequired: true,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'PhoneField – with country code', {
+			ignoreRules: ['region', 'aria-allowed-attr'],
+		})
+
+		wrapper.unmount()
+	})
+})

package/src/components/PhoneField/tests/PhoneField.spec.ts

@@ -18,6 +18,8 @@ describe('PhoneField', () => {
 		const input = wrapper.find('input')
 		await input.setValue('1234567890')
 		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		// change est émis au blur, pas à chaque frappe
+		await input.trigger('blur')
 		expect(wrapper.emitted('change')).toBeTruthy()
 	})
 
@@ -53,6 +55,69 @@ describe('PhoneField', () => {
 		expect((wrapper.vm as any).errors.length).toBeGreaterThan(0)
 	})
 
+	it('keeps a consistent success message before and after blur when withCountryCode is true', async () => {
+		const wrapper = mount(PhoneField, {
+			props: {
+				withCountryCode: true,
+				isValidatedOnBlur: false,
+				modelValue: '',
+			},
+		})
+
+		const textField = wrapper.findComponent({ name: 'SyTextField' })
+		const input = textField.find('input')
+		await input.setValue('0123456789')
+		await wrapper.vm.$nextTick()
+
+		const messageBeforeBlur = textField.find('.v-messages__message')
+		expect(messageBeforeBlur.exists()).toBe(true)
+		expect(messageBeforeBlur.text()).toBe('Le champ Numéro de téléphone sans indicatif est valide.')
+		expect(messageBeforeBlur.text()).not.toBe('Le champ Numéro de téléphone est valide.')
+
+		await input.trigger('blur')
+		await wrapper.vm.$nextTick()
+
+		const messageAfterBlur = textField.find('.v-messages__message')
+		expect(messageAfterBlur.exists()).toBe(true)
+		expect(messageAfterBlur.text()).toBe('Le champ Numéro de téléphone sans indicatif est valide.')
+	})
+
+	it('trims input to the expected phoneLength', async () => {
+		const wrapper = mount(PhoneField, {
+			props: {
+				withCountryCode: true,
+				modelValue: '',
+			},
+		})
+
+		wrapper.vm.dialCode = { code: '+27', abbreviation: 'ZA', country: 'South Africa', phoneLength: 9, mask: '### ### ###' }
+		await wrapper.vm.$nextTick()
+
+		const textField = wrapper.findComponent({ name: 'SyTextField' })
+		const input = textField.find('input')
+		await input.setValue('01234567890')
+		await wrapper.vm.$nextTick()
+
+		const lastModelValueEmission = wrapper.emitted('update:modelValue')?.at(-1)?.[0]
+		expect(typeof lastModelValueEmission).toBe('string')
+		expect(String(lastModelValueEmission).replace(/\D/g, '').length).toBe(9)
+	})
+
+	it('keeps counter max aligned with dial code phoneLength (+27 => 9)', async () => {
+		const wrapper = mount(PhoneField, {
+			props: {
+				withCountryCode: true,
+				modelValue: '',
+			},
+		})
+
+		wrapper.vm.dialCode = { code: '+27', abbreviation: 'ZA', country: 'South Africa', phoneLength: 9, mask: '### ### ###' }
+		await wrapper.vm.$nextTick()
+
+		const textField = wrapper.findComponent({ name: 'SyTextField' })
+		expect(textField.props('counter')).toBe(9)
+	})
+
 	it('applies default phone mask correctly', async () => {
 		const wrapper = mount(PhoneField, {
 			props: { modelValue: '0619123456' },
@@ -76,6 +141,10 @@ describe('PhoneField', () => {
 			},
 		})
 
+		// Vider le code pays manuellement (France est sélectionnée par défaut)
+		wrapper.vm.dialCode = ''
+		await wrapper.vm.$nextTick()
+
 		const result = await wrapper.vm.validateOnSubmit()
 
 		expect(result).toBe(false)
@@ -91,7 +160,8 @@ describe('PhoneField', () => {
 		})
 		wrapper.vm.dialCode = { code: '+1', phoneLength: 10, mask: '###-###-####' }
 		await wrapper.vm.$nextTick()
-		expect(wrapper.vm.phoneMask).toBe('###-###-####')
+		// dialCode is normalized against the canonical indicatifs list by code
+		expect(wrapper.vm.phoneMask).toBe('### ### ####')
 		expect(wrapper.vm.counter).toBe(10)
 	})
 
@@ -221,13 +291,14 @@ describe('PhoneField', () => {
 			},
 		})
 
-		const dialCodeValue = { code: '+33', abbreviation: 'FR', country: 'France', phoneLength: 10, mask: '## ## ## ## ##' }
+		const dialCodeValue = { code: '+34', abbreviation: 'ES', country: 'Spain', phoneLength: 9, mask: '### ### ###' }
 		wrapper.vm.dialCode = dialCodeValue
 		await wrapper.vm.$nextTick()
 
 		expect(wrapper.emitted('update:selectedDialCode')).toBeTruthy()
 		const emittedEvents = wrapper.emitted('update:selectedDialCode')
-		expect(emittedEvents && emittedEvents[0]?.[0]).toEqual(dialCodeValue)
+		const lastEmitted = emittedEvents && emittedEvents[emittedEvents.length - 1]?.[0]
+		expect(lastEmitted).toHaveProperty('code', dialCodeValue.code)
 	})
 
 	it('validates phone number on submit', async () => {
@@ -287,7 +358,8 @@ describe('PhoneField', () => {
 		wrapper.vm.dialCode = { code: '+44', abbreviation: 'UK', country: 'United Kingdom', phoneLength: 11, mask: '### ### #####' }
 		await wrapper.vm.$nextTick()
 
-		expect(wrapper.vm.counter).toBe(11)
+		// dialCode is normalized against the canonical indicatifs list by code
+		expect(wrapper.vm.counter).toBe(10)
 	})
 
 	it('handles disabled state correctly', async () => {
@@ -350,7 +422,8 @@ describe('PhoneField', () => {
 			},
 		})
 
-		expect(wrapper.vm.dialCode).toBe('')
+		// France est sélectionnée par défaut quand withCountryCode=true
+		expect(wrapper.vm.dialCode).toMatchObject({ code: '+33' })
 
 		await wrapper.setProps({
 			dialCodeModel: { code: '+1', country: 'USA', abbreviation: 'US', phoneLength: 10, mask: '###-###-####' },
@@ -778,6 +851,10 @@ describe('PhoneField', () => {
 				},
 			})
 
+			// Vider le code pays manuellement (France est sélectionnée par défaut)
+			wrapper.vm.dialCode = ''
+			await wrapper.vm.$nextTick()
+
 			// Sans code pays, la validation échoue
 			const isValidWithoutCountry = await wrapper.vm.validateOnSubmit()
 			expect(isValidWithoutCountry).toBe(false)

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

@@ -1,15 +1,83 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../RangeField.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as RangeFieldStories from '../RangeField.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={RangeFieldStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+  componentName="RangeField"
+  iconSrc={AccessibilityIcon}
+  apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/slider/"
+>
+  <div class="mt-8">
+    <p>Rapport d'audit manuel : <a href="/audits/RangeField.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/908" target="_blank" style={{color:'#0C41BD'}}>issue #908</a>)</p>
+  </div>
 
+  <CriteriaSection>
+    <CriteriaCard icon="🔍" title="Structure sémantique et regroupement">
+      <ul>
+        <li><strong>Fieldset/Legend</strong> : Utilisation de <code>&lt;fieldset&gt;</code> et <code>&lt;legend&gt;</code> lorsque <code>fieldsetLabel</code> est fourni pour regrouper sémantiquement les champs</li>
+        <li><strong>Double entrée</strong> : Composant hybride avec slider visuel et champs textuels pour une accessibilité maximale</li>
+        <li><strong>Labels explicites</strong> : Champs texte avec labels personnalisables via <code>textFieldMinLabel</code> et <code>textFieldMaxLabel</code></li>
+      </ul>
+    </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/RangeField.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/908" target="_blank" style={{color:'#0C41BD'}}>issue #908</a>)</p>
-	</div>
+    <CriteriaCard icon="⌨️" title="Navigation et interaction clavier">
+      <ul>
+        <li><strong>Input numérique</strong> : Champs texte avec <code>inputmode="numeric"</code> pour optimiser le clavier mobile</li>
+        <li><strong>Validation synchrone</strong> : Mise à jour bidirectionnelle entre slider et champs texte pour une cohérence immédiate</li>
+        <li><strong>Contraintes logiques</strong> : Validation automatique pour garantir min ≤ max avec corrections appropriées</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="🎨" title="Masque saisie et formatage">
+      <ul>
+        <li><strong>vMaska</strong> : Masque de saisie personnalisé pour gérer nombres négatifs et décimaux</li>
+        <li><strong>Pattern flexible</strong> : Support des formats comme "-123.45" avec tokens adaptés</li>
+        <li><strong>Clamp automatique</strong> : Correction des valeurs hors limites avec <code>clamp()</code></li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📱" title="Responsive et adaptabilité">
+      <ul>
+        <li><strong>Layout adaptatif</strong> : Orientation des champs qui passe de horizontal à vertical sur mobile</li>
+        <li><strong>Display Vuetify</strong> : Utilisation de <code>useDisplay()</code> pour détecter les tailles d'écran</li>
+        <li><strong>Options personnalisables</strong> : Composant entièrement configurable via <code>useCustomizableOptions</code></li>
+      </ul>
+    </CriteriaCard>
+  </CriteriaSection>
+
+  <DemoSection componentName="RangeField">
+    <Primary />
+  </DemoSection>
+
+  <BestPracticesSection>
+    <ul>
+      <li><strong>Labels descriptifs</strong> : Utilisez des labels clairs pour les champs min/max ("Prix minimum", "Âge maximum")</li>
+      <li><strong>Fieldset cohérent</strong> : Regroupez les champs avec un <code>fieldsetLabel</code> pertinent ("Fourchette de prix", "Plage d'âge")</li>
+      <li><strong>Valeurs par défaut</strong> : Initialisez toujours <code>modelValue</code> avec une plage valide [min, max]</li>
+      <li><strong>Step approprié</strong> : Choisissez un <code>step</code> logique (1 pour les entiers, 0.1 pour les décimales)</li>
+      <li><strong>Validation côté serveur</strong> : Complétez la validation client avec des vérifications serveur pour la sécurité</li>
+      <li><strong>Feedback utilisateur</strong> : Ajoutez des messages d'aide ou d'erreur pour guider l'utilisateur</li>
+    </ul>
+  </BestPracticesSection>
+
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/slider/" target="_blank" rel="noopener noreferrer">Guide des pratiques WAI-ARIA : Sliders</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.9" target="_blank" rel="noopener noreferrer">RGAA Critère 11.9 : Champs de saisie numérique</a></li>
+      <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/number" target="_blank" rel="noopener noreferrer">MDN : Champs input number et inputmode</a></li>
+    </ul>
+  </ResourcesSection>
+
+</AccessibilityGuideLayout>

package/src/components/SearchListField/SearchListField.vue

@@ -91,7 +91,7 @@
 	}
 
 	const emitChangeEvent = (value: unknown[]) => {
-		emit('update:modelValue', value)
+		emit('update:modelValue', [...value])
 	}
 
 	defineExpose({