@cnamts/synapse 1.0.20 → 1.0.22

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

@@ -5,28 +5,41 @@ import { mount } from '@vue/test-utils'
 import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
 import PhoneField from '../PhoneField.vue'
-import { indicatifs } from '../indicatifs'
 
-// Scénario d’accessibilité : champ de téléphone avec indicatif et numéro renseignés.
+// 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 with country code and phone number', async () => {
-		const defaultDialCode = indicatifs[0]
+	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,
-				required: true,
-				modelValue: '0612345678',
-				dialCodeModel: defaultDialCode,
 			},
 			attachTo: document.body,
 		})
 
 		const results = await axe(wrapper.element as HTMLElement)
-		assertNoA11yViolations(results, 'PhoneField – country code + phone', {
-			ignoreRules: ['region'],
+		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/SearchListField/SearchListField.vue

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

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

@@ -1,15 +1,75 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../SearchListField.stories.ts';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../SearchListField.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+	AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="SearchListField"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<div>Rapport d’audit manuel : <a href="/audits/SearchListField.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></div>
+		<div style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>
+			Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/1499" target="_blank" style={{color:'#0C41BD'}}>issue #1499</a>)
+		</div>
+	</AuditSection>
 
+	<CriteriaSection>
+		<CriteriaCard icon="🏷️" title="Structure et rôles">
+			<ul>
+				<li>Le champ de recherche reste un champ texte natif (<code>SyTextField</code> sous-jacent) avec label obligatoire.</li>
+				<li>La liste est encapsulée dans un <code>fieldset</code> + <code>legend</code> (listLabel) et les résultats sont des <code>li</code> avec checkbox.</li>
+				<li>Les icônes de recherche sont décoratives (pas d’annonce superflue).</li>
+			</ul>
+		</CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/SearchListField.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/1499" target="_blank" style={{color:'#0C41BD'}}>issue #1499</a>)</p>
-	</div>
+		<CriteriaCard icon="⌨️" title="Navigation clavier">
+			<ul>
+				<li>Tabulation : focus successif sur le champ puis chaque option ; activation par Espace/Entrée sur la checkbox.</li>
+				<li>Focus visible sur le champ et les cases à cocher ; suppression via la case déjà cochée.</li>
+				<li>Annonces SR : nombre de résultats via le <code>role="status"</code> conditionnel.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🎨" title="Contraste et lisibilité">
+			<ul>
+				<li>Label et texte des options utilisent les couleurs du thème avec contrastes conformes.</li>
+				<li>État sélectionné signalé par classe <code>suggestion-item--selected</code> (fond/contour) + checkbox cochée.</li>
+				<li>Placeholder/texte d’aide : éviter les messages uniquement par couleur.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="SearchListField">
+		<Story of={Stories.Default} />
+		<Story of={Stories.WithReturnObject} />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournir un <code>label</code> et un <code>listLabel</code> explicites (champ + legend).</li>
+			<li>Utiliser des libellés uniques par option ; éviter les doublons qui compliquent l’annonce.</li>
+			<li>Garder le menu ouvert pour la sélection multiple ; ne pas masquer le focus.</li>
+			<li>Si l’ensemble d’options est long, guider la saisie avec un libellé contextualisé (“Rechercher une profession…”).</li>
+			<li>En retour objet (<code>returnObject</code>), vérifier que chaque item a un <code>label</code> et une <code>value</code> stables.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/" target="_blank" rel="noopener noreferrer">WAI-ARIA APG – Combobox</a> (pour les champs de recherche avec liste)</li>
+			<li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 7.1 (ARIA) et 10.8 (éléments masqués)</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,37 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SearchListField from '../SearchListField.vue'
+
+describe('SearchListField – accessibility (axe)', () => {
+	it('has no obvious axe violations on default list', async () => {
+		const wrapper = mount(defineComponent({
+			components: { SearchListField },
+			setup() {
+				const props = {
+					label: 'Rechercher une profession',
+					listLabel: 'Résultats',
+					items: [
+						{ label: 'Infirmier', value: 'infirmier' },
+						{ label: 'Pharmacien', value: 'pharmacien' },
+					],
+					modelValue: [],
+				}
+
+				return { props }
+			},
+			template: `
+				<main>
+					<SearchListField v-bind="props" />
+				</main>
+			`,
+		}))
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SearchListField – default list')
+	})
+})