@cnamts/synapse 1.0.22 → 1.0.24

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

@@ -24,4 +24,51 @@ 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'],
+		})
+	})
+
+	it('has no obvious axe violations for number input', async () => {
+		const wrapper = mount(SyTextField, {
+			props: {
+				label: 'Montant',
+				modelValue: '12.5',
+				type: 'number',
+				helpText: 'Saisissez un montant numerique',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextField – number input', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations for tel input', async () => {
+		const wrapper = mount(SyTextField, {
+			props: {
+				label: 'Telephone',
+				modelValue: '+33 1 23 45 67 89',
+				type: 'tel',
+				helpText: 'Saisissez un numero de telephone',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyTextField – tel input', {
+			ignoreRules: ['region'],
+		})
+	})
 })

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { VIcon } from 'vuetify/components'
 
 import SyTextField from '../SyTextField.vue'
@@ -15,6 +15,7 @@ describe('SyTextField', () => {
 				required: true,
 				showSuccessMessages: true,
 				outlined: true,
+				label: 'Test Field',
 			},
 		})
 	})
@@ -26,7 +27,7 @@ describe('SyTextField', () => {
 
 	it('applies the correct variant style', () => {
 		wrapper = mount(SyTextField, {
-			props: { variantStyle: 'filled' },
+			props: { variantStyle: 'filled', label: 'Test Field' },
 		})
 		const textField = wrapper.findComponent({ name: 'VTextField' })
 		expect(textField.props('variant')).toBe('filled')
@@ -34,6 +35,7 @@ describe('SyTextField', () => {
 
 	it('renders default slots correctly', () => {
 		wrapper = mount(SyTextField, {
+			props: { label: 'Test Field' },
 			slots: {
 				prepend: '<div data-testid="prepend-slot">Prepend Slot Content</div>',
 				append: '<div data-testid="append-slot">Append Slot Content</div>',
@@ -49,6 +51,7 @@ describe('SyTextField', () => {
 
 	it('renders inner slots correctly', () => {
 		wrapper = mount(SyTextField, {
+			props: { label: 'Test Field' },
 			slots: {
 				'prepend-inner': '<div data-testid="prepend-inner-slot">Prepend Inner Slot Content</div>',
 				'append-inner': '<div data-testid="append-inner-slot">Append Inner Slot Content</div>',
@@ -66,35 +69,35 @@ describe('SyTextField', () => {
 
 	it('should update icon when validation state changes', async () => {
 		wrapper = mount(SyTextField, {
-			props: { appendInnerIcon: 'success' as IconType },
+			props: { appendInnerIcon: 'success' as IconType, label: 'Test Field' },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('success')
 	})
 
 	it('should update icon when validation state changes with warning', async () => {
 		wrapper = mount(SyTextField, {
-			props: { appendInnerIcon: 'warning' as IconType },
+			props: { appendInnerIcon: 'warning' as IconType, label: 'Test Field' },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('warning')
 	})
 
 	it('should update icon when validation state changes with error', async () => {
 		wrapper = mount(SyTextField, {
-			props: { appendInnerIcon: 'error' as IconType },
+			props: { appendInnerIcon: 'error' as IconType, label: 'Test Field' },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('error')
 	})
 
 	it('should update icon when validation state changes with success', async () => {
 		wrapper = mount(SyTextField, {
-			props: { appendInnerIcon: 'success' as IconType },
+			props: { appendInnerIcon: 'success' as IconType, label: 'Test Field' },
 		})
 		expect(wrapper.props('appendInnerIcon')).toBe('success')
 	})
 
 	it('emits prepend-icon-click event when prepend icon is clicked', async () => {
 		const wrapper = mount(SyTextField, {
-			props: { prependIcon: 'info' as IconType },
+			props: { prependIcon: 'info' as IconType, label: 'Test Field' },
 		})
 
 		await wrapper.vm.$nextTick()
@@ -107,7 +110,7 @@ describe('SyTextField', () => {
 
 	it('emits append-icon-click event when append icon is clicked', async () => {
 		const wrapper = mount(SyTextField, {
-			props: { appendIcon: 'info' as IconType },
+			props: { appendIcon: 'info' as IconType, label: 'Test Field' },
 		})
 
 		await wrapper.vm.$nextTick()
@@ -155,8 +158,13 @@ describe('SyTextField', () => {
 				label: 'Test Field',
 			},
 		})
+		await wrapper.find('input').trigger('focus')
+		await wrapper.vm.$nextTick()
 		await wrapper.find('input').trigger('blur')
 		await wrapper.vm.$nextTick()
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
 		expect(wrapper.find('.v-messages').text()).toContain('Le champ Test Field est requis')
 	})
 
@@ -170,12 +178,16 @@ describe('SyTextField', () => {
 		}
 
 		wrapper = mount(SyTextField, {
-			props: { customRules: [customRule] },
+			props: { customRules: [customRule], label: 'Test Field' },
 		})
 
 		await wrapper.setProps({ modelValue: 'ab' })
+		await wrapper.find('input').trigger('focus')
+		await wrapper.vm.$nextTick()
 		await wrapper.find('input').trigger('blur')
 		await wrapper.vm.$nextTick()
+		await flushPromises()
+		await wrapper.vm.$nextTick()
 
 		const messages = wrapper.find('.v-messages')
 		expect(messages.text()).toContain('Test error message')
@@ -200,23 +212,140 @@ describe('SyTextField', () => {
 			},
 		})
 
+		await wrapper.find('input').trigger('focus')
 		await wrapper.vm.$nextTick()
 		await wrapper.find('input').trigger('blur')
 		await wrapper.vm.$nextTick()
+		await flushPromises()
+		await wrapper.vm.$nextTick()
 
 		const messages = wrapper.find('.v-messages')
 		expect(messages.exists()).toBe(true)
 		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, label: '' },
+			})
+			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)
+		wrapper = mount(SyTextField, {
+			props: { label: 'Test Field' },
+		})
 		const input = wrapper.find('input')
 
 		await input.setValue('test value')
 		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test value'])
 	})
 
+	it('filters alphabetic characters when type is number', async () => {
+		wrapper = mount(SyTextField, {
+			props: {
+				label: 'Test Field',
+				type: 'number',
+			},
+		})
+
+		const input = wrapper.find('input')
+		const inputElement = input.element as HTMLInputElement
+		inputElement.value = '12ab.3e-4'
+
+		await input.trigger('input')
+
+		expect(inputElement.value).toBe('12.3e-4')
+		expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['12.3e-4'])
+	})
+
+	it('prevents invalid beforeinput data when type is number', async () => {
+		wrapper = mount(SyTextField, {
+			props: {
+				label: 'Test Field',
+				type: 'number',
+			},
+		})
+
+		const input = wrapper.find('input')
+		const event = new InputEvent('beforeinput', {
+			data: 'a',
+			cancelable: true,
+			bubbles: true,
+		})
+
+		input.element.dispatchEvent(event)
+
+		expect(event.defaultPrevented).toBe(true)
+	})
+
+	it('filters alphabetic characters when type is tel', async () => {
+		wrapper = mount(SyTextField, {
+			props: {
+				label: 'Telephone',
+				type: 'tel',
+			},
+		})
+
+		const input = wrapper.find('input')
+		const inputElement = input.element as HTMLInputElement
+		inputElement.value = '+33 ab(0)1-23.45'
+
+		await input.trigger('input')
+
+		expect(inputElement.value).toBe('+33 (0)1-23.45')
+		expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['+33 (0)1-23.45'])
+	})
+
+	it('prevents invalid beforeinput data when type is tel', async () => {
+		wrapper = mount(SyTextField, {
+			props: {
+				label: 'Telephone',
+				type: 'tel',
+			},
+		})
+
+		const input = wrapper.find('input')
+		const event = new InputEvent('beforeinput', {
+			data: 'a',
+			cancelable: true,
+			bubbles: true,
+		})
+
+		input.element.dispatchEvent(event)
+
+		expect(event.defaultPrevented).toBe(true)
+	})
+
 	it('validates field immediately when isValidateOnBlur is false', async () => {
 		const customRule = {
 			type: 'custom',
@@ -228,6 +357,8 @@ describe('SyTextField', () => {
 
 		wrapper = mount(SyTextField, {
 			props: {
+				modelValue: '',
+				label: 'Test Field',
 				customRules: [customRule],
 				isValidateOnBlur: false,
 			},
@@ -236,6 +367,12 @@ describe('SyTextField', () => {
 		await wrapper.setProps({ modelValue: 'ab' })
 		await wrapper.vm.$nextTick()
 
+		// settle all pending promises to ensure validation has completed
+		await vi.waitUntil(() => {
+			const messages = wrapper.find('.v-messages')
+			return messages.text().includes('Test error message')
+		})
+
 		const messages = wrapper.find('.v-messages')
 		expect(messages.text()).toContain('Test error message')
 
@@ -243,6 +380,14 @@ describe('SyTextField', () => {
 		await wrapper.setProps({ modelValue: 'abc' })
 		await wrapper.vm.$nextTick()
 
+		// the async validation should have updated the error messages, so we wait for the next tick before checking the messages again
+		await wrapper.vm.$nextTick()
+
+		await vi.waitUntil(() => {
+			const messages = wrapper.find('.v-messages')
+			return !messages.text().includes('Test error message')
+		})
+
 		expect(messages.text()).not.toContain('Test error message')
 	})
 })

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>