@cnamts/synapse 1.0.19 → 1.0.21

package/src/components/Customs/Selects/{SySelect → SyAutocomplete/accessibilite}/Accessibilite.stories.ts

@@ -1,21 +1,16 @@
-import { VIcon, VTable } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
-import { mdiCheckboxMarkedCircle, mdiKeyboard } from '@mdi/js'
-
-const checkIcon = mdiCheckboxMarkedCircle
+import { mdiKeyboard } from '@mdi/js'
 
 const keyboardIcon = mdiKeyboard
 
 export default {
-	title: 'Composants/Formulaires/Selects/SySelect/Accessibilité',
+	title: 'Composants/Formulaires/Selects/SyAutocomplete/Accessibility',
 }
 
-// Story masquée qui n'apparaît que dans le MDX
 export const ComboboxKeyboardNavigation: StoryObj = {
 	tags: ['!dev'],
 	render: () => {
 		return {
-			components: { VTable, VIcon },
 			setup() {
 				const keyboardData = [
 					{
@@ -38,6 +33,10 @@ export const ComboboxKeyboardNavigation: StoryObj = {
 						touche: 'Échap',
 						action: 'Ferme le menu sans modifier la sélection',
 					},
+					{
+						touche: 'Saisie de texte',
+						action: 'Filtre les options en temps réel basé sur le texte saisi',
+					},
 					{
 						touche: 'Caractères imprimables',
 						action: 'Déplace le focus sur l\'option commençant par le(s) caractère(s) saisi(s)',
@@ -48,7 +47,7 @@ export const ComboboxKeyboardNavigation: StoryObj = {
 			template: `
 				<div>
 					<h3><v-icon :icon="keyboardIcon" style="margin-right: 8px;"/>Navigation au clavier</h3>
-					<p>Le composant SySelect implémente le pattern de navigation au clavier recommandé par le W3C pour les combobox select-only.</p>
+					<p>Le composant SyAutocomplete implémente le pattern de navigation au clavier recommandé par le W3C pour les combobox avec auto-complétion.</p>
 					<v-table density="compact" style="margin-top: 16px;">
 						<thead>
 							<tr>
@@ -69,33 +68,3 @@ export const ComboboxKeyboardNavigation: StoryObj = {
 		}
 	},
 }
-
-export const Legende: StoryObj = {
-	args: {
-		icon: checkIcon,
-	},
-	render: (args) => {
-		return {
-			components: { VIcon },
-			setup() {
-				return { args }
-			},
-			template: `
-			   
-		 
-        <div class="mt-4">
-					  <p>Rapport d’audit manuel : <a href="/audits/SySelect.xlsx" style="color:#0C41BD;">Voir le
-						  rapport</a></p>
-					  <p style="color: grey; font-size: 14px">Correctifs associés (<a
-						  href="https://github.com/assurance-maladie-digital/design-system-v3/issues/787" target="_blank"
-						  style="color:#0C41BD;"
-					  >issue #787</a>, <a
-						  href="https://github.com/assurance-maladie-digital/design-system-v3/issues/931" target="_blank"
-						  style="color:#0C41BD;"
-					  >issue #931</a>)</p>
-				  </div>
-            `,
-		}
-	},
-	tags: ['!dev'],
-}

package/src/components/Customs/Selects/{SySelect/Accessibilite.mdx → SyAutocomplete/accessibilite/Accessibility.mdx}

@@ -1,12 +1,13 @@
 import { Meta, Story } from '@storybook/addon-docs';
-import * as AccessStories from './Accessibilite.stories.ts';
+import * as AutocompleteStories from '../SyAutocomplete.stories';
+import * as AccessStories from './Accessibilite.stories';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
-import '../../../../stories/styles/shared.css';
+import '@/stories/styles/shared.css';
 
-<Meta of={AccessStories} />
+<Meta of={AutocompleteStories} name="Accessibility" />
 
 <div className="accessibility-guide">
-  <h1>Guide d'Accessibilité du Composant SySelect</h1>
+  <h1>Guide d'Accessibilité du Composant SyAutocomplete</h1>
   
   <div className="intro-section">
     <img 
@@ -15,8 +16,8 @@ import '../../../../stories/styles/shared.css';
       className="accessibility-icon"
     />
     <p className="intro-text">
-      Le composant SySelect a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C, 
-      notamment le modèle <a href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/" target="_blank" rel="noopener noreferrer">WAI-ARIA pour les combobox select-only</a>. 
+      Le composant SyAutocomplete a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C, 
+      notamment le modèle <a href="https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/" target="_blank" rel="noopener noreferrer">WAI-ARIA pour les combobox avec auto-complétion</a>. 
       Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience utilisateur inclusive.
     </p>
 </div>
@@ -32,8 +33,9 @@ import '../../../../stories/styles/shared.css';
       <ul>
         <li><strong>Rôles ARIA appropriés</strong> : <code>role="combobox"</code> sur l'input, <code>role="listbox"</code> sur le menu déroulant</li>
         <li><strong>Relations entre éléments</strong> : <code>aria-controls</code> pour lier le combobox au listbox</li>
-        <li><strong>Type d'interaction</strong> : <code>aria-haspopup="listbox"</code> et <code>aria-autocomplete="list"</code></li>
+        <li><strong>Type d'interaction</strong> : <code>aria-haspopup="listbox"</code> et <code>aria-autocomplete="list"</code> pour indiquer l'auto-complétion</li>
         <li><strong>État du menu</strong> : <code>aria-expanded</code> indique si le menu est ouvert ou fermé</li>
+        <li><strong>Prévention de l'auto-complétion navigateur</strong> : <code>autocomplete="off"</code> pour éviter les conflits avec l'auto-complétion native du navigateur</li>
       </ul>
     </div>
     
@@ -46,6 +48,7 @@ import '../../../../stories/styles/shared.css';
         <li><strong>Flèches haut/bas</strong> : Navigation entre les options sans modifier la sélection</li>
         <li><strong>Entrée</strong> : Sélection de l'option active et fermeture du menu</li>
         <li><strong>Échap</strong> : Fermeture du menu sans modifier la sélection</li>
+        <li><strong>Saisie de texte</strong> : Filtrage dynamique des options basé sur le texte saisi</li>
         <li><strong>Caractères imprimables</strong> : Navigation vers l'option commençant par le(s) caractère(s) saisi(s)</li>
       </ul>
     </div>
@@ -60,6 +63,7 @@ import '../../../../stories/styles/shared.css';
         <li><strong>Option sélectionnée</strong> : <code>aria-selected="true"</code> sur l'option sélectionnée</li>
         <li><strong>État de validation</strong> : <code>aria-required="true"</code> et <code>aria-invalid="true"</code> pour les champs obligatoires et en erreur</li>
         <li><strong>Scroll automatique</strong> : Les options sont automatiquement scrollées dans la vue lors de la navigation</li>
+        <li><strong>Annonces dynamiques</strong> : Mise à jour des annonces pour les technologies d'assistance lors du filtrage</li>
       </ul>
     </div>
   </div>
@@ -72,28 +76,19 @@ import '../../../../stories/styles/shared.css';
   <div className="implementation-section">
     <h2>Spécificités d'implémentation</h2>
     <p>
-      Conformément aux recommandations WAI-ARIA pour les combobox select-only, notre implémentation :
+      Conformément aux recommandations WAI-ARIA pour les combobox avec auto-complétion, notre implémentation :
     </p>
     <ul>
       <li>Maintient le focus DOM sur l'input combobox pendant toute l'interaction</li>
       <li>Utilise <code>aria-activedescendant</code> pour indiquer l'option active aux technologies d'assistance</li>
       <li>Sépare clairement la navigation (flèches) de la sélection (Entrée)</li>
       <li>Gère correctement les états visuels et programmatiques des options</li>
+      <li>Implémente un filtrage en temps réel des options basé sur la saisie utilisateur</li>
+      <li>Désactive l'auto-complétion du navigateur pour éviter les conflits</li>
     </ul>
   </div>
 </div>
 
-<div className="accessibility-guide">
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Informations sur l'accessibilité du composant</p>
-</div>
-
-<Story of={AccessStories.Legende} />
-<br />
-
-</div>
-
 <style>
 {
 `
@@ -209,4 +204,4 @@ import '../../../../stories/styles/shared.css';
   }
 `
 }
-</style>
+</style>

package/src/components/Customs/Selects/SyAutocomplete/tests/SyAutocomplete.a11y.spec.ts

@@ -0,0 +1,72 @@
+// @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 SyAutocomplete from '../SyAutocomplete.vue'
+
+const items = [
+	{ text: 'Option 1', value: '1' },
+	{ text: 'Option 2', value: '2' },
+	{ text: 'Option 3', value: '3' },
+]
+
+describe('SyAutocomplete – accessibility (axe)', () => {
+	it('has no obvious axe violations for basic autocomplete', async () => {
+		const wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: null,
+				items,
+				label: 'Choisir une option',
+				textKey: 'text',
+				valueKey: 'value',
+				required: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAutocomplete – basic field', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations for multiple selection', async () => {
+		const wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: [],
+				items,
+				label: 'Choisir plusieurs options',
+				textKey: 'text',
+				valueKey: 'value',
+				multiple: true,
+				required: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAutocomplete – multiple selection', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations for chips display', async () => {
+		const wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: [items[0]!.value],
+				items,
+				label: 'Options sélectionnées',
+				textKey: 'text',
+				valueKey: 'value',
+				multiple: true,
+				chips: true,
+				required: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyAutocomplete – chips display', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/Customs/Selects/SyAutocomplete/tests/SyAutocomplete.spec.ts

@@ -0,0 +1,345 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { VMenu, VChip } from 'vuetify/components'
+
+import SyAutocomplete from '../SyAutocomplete.vue'
+import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
+
+describe('SyAutocomplete', () => {
+	let wrapper: ReturnType<typeof mount<typeof SyAutocomplete>>
+	const menuId = 'sy-autocomplete-menu-test'
+
+	const getMenu = () => document.body.querySelector(`#${menuId}`)
+	const getOption = (index: number) => document.body.querySelector(`#${menuId}-option-${index}`)
+	const isMenuOverlayActive = () => !!document.body.querySelector(`.v-overlay--active #${menuId}`)
+	const getInputEl = () => {
+		const el = document.getElementById(`${menuId}-input`)
+		if (!el) return null
+		if (el instanceof HTMLInputElement) return el
+		return el.querySelector('input') as HTMLInputElement | null
+	}
+
+	const items = [
+		{ text: 'Option 1', value: '1' },
+		{ text: 'Option 2', value: '2' },
+		{ text: 'Option 3', value: '3' },
+	]
+
+	beforeEach(() => {
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: null,
+				items,
+				label: 'Test Autocomplete',
+				textKey: 'text',
+				valueKey: 'value',
+				menuId,
+			},
+			attachTo: document.body,
+		})
+	})
+
+	afterEach(() => {
+		wrapper.unmount()
+	})
+
+	it('renders correctly with default props', () => {
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(VMenu).exists()).toBe(true)
+		expect(getMenu()).toBeNull() // Menu closed by default
+	})
+
+	it('opens menu when input is clicked', async () => {
+		const input = wrapper.find('input')
+		await input.trigger('click')
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		expect(getMenu()).not.toBeNull()
+	})
+
+	it('filters items based on search', async () => {
+		await wrapper.setProps({ modelValue: '1' })
+		await wrapper.vm.$nextTick()
+		expect(wrapper.vm.search).toBe('Option 1')
+	})
+
+	it('emits update:modelValue when item is selected', async () => {
+		wrapper.vm.selectItem('1')
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1'])
+	})
+
+	it('supports multiple selection', async () => {
+		wrapper.unmount()
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: [],
+				items,
+				multiple: true,
+				label: 'Test Multiple',
+				textKey: 'text',
+				valueKey: 'value',
+				menuId,
+			},
+			attachTo: document.body,
+		})
+		const input = wrapper.find('input')
+		await input.trigger('click')
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const option0 = getOption(0)
+		expect(option0).not.toBeNull()
+		option0?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true, button: 0 }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['1']])
+	})
+
+	it('clears typed query after selecting an item in multiple mode without chips', async () => {
+		wrapper.unmount()
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: [],
+				items,
+				multiple: true,
+				chips: false,
+				label: 'Test Multiple No Chips',
+				textKey: 'text',
+				valueKey: 'value',
+				menuId,
+			},
+			attachTo: document.body,
+		})
+
+		// User types a query
+		const textField = wrapper.findComponent(SyTextField)
+		expect(textField.exists()).toBe(true)
+		textField.vm.$emit('update:modelValue', 'Opt')
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		// Select first option
+		const option0 = getOption(0)
+		expect(option0).not.toBeNull()
+		option0?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true, button: 0 }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		// Some environments can emit a follow-up input event with the previous DOM value.
+		// Ensure it doesn't re-populate the query after selection.
+		textField.vm.$emit('update:modelValue', 'Option 1, Opt')
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		// Query should be cleared, leaving only selected label prefix in input
+		expect(wrapper.vm.search).toBe('')
+		expect(getInputEl()!.value).toBe('Option 1, ')
+	})
+
+	it('displays chips in multiple mode', async () => {
+		wrapper.unmount()
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: items.slice(0, 1),
+				items,
+				multiple: true,
+				chips: true,
+				returnObject: true,
+				label: 'Test Chips',
+				textKey: 'text',
+				valueKey: 'value',
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		const chips = wrapper.findAllComponents(VChip)
+		expect(chips.length).toBe(1)
+		expect(chips[0]!.text()).toBe('Option 1')
+	})
+
+	it('removes chip when close button is clicked', async () => {
+		wrapper.unmount()
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: items.slice(0, 1),
+				items,
+				multiple: true,
+				chips: true,
+				returnObject: true,
+				label: 'Test Chips',
+				textKey: 'text',
+				valueKey: 'value',
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		const chip = wrapper.findComponent(VChip)
+		await chip.vm.$emit('click:close')
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+	})
+
+	it('shows clear button when clearable and has selection', async () => {
+		wrapper.unmount()
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: items[0],
+				items,
+				clearable: true,
+				label: 'Test Clear',
+				textKey: 'text',
+				valueKey: 'value',
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		const clearButton = wrapper.find('button[aria-label="Réinitialiser la sélection"]')
+		expect(clearButton.exists()).toBe(true)
+	})
+
+	it('clears selection when clear button is clicked', async () => {
+		wrapper.unmount()
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: items[0],
+				items,
+				clearable: true,
+				label: 'Test Clear',
+				textKey: 'text',
+				valueKey: 'value',
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		const clearButton = wrapper.find('button[aria-label="Réinitialiser la sélection"]')
+		await clearButton.trigger('click')
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
+	})
+
+	it('validates field with custom rules', async () => {
+		wrapper.unmount()
+		const customRule = {
+			type: 'custom',
+			options: {
+				validate: value => Array.isArray(value) && value.length >= 2,
+				message: 'Sélectionnez au moins 2 éléments',
+			},
+		}
+
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: items.slice(0, 1),
+				items,
+				multiple: true,
+				label: 'Test Validation',
+				textKey: 'text',
+				valueKey: 'value',
+				customRules: [customRule],
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+		await wrapper.find('input').trigger('blur')
+		await wrapper.vm.$nextTick()
+
+		const messages = wrapper.find('.v-messages')
+		expect(messages.text()).toContain('Sélectionnez au moins 2 éléments')
+	})
+
+	it('handles keyboard navigation', async () => {
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		const inputEl = getInputEl()
+		expect(inputEl).not.toBeNull()
+		inputEl?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		expect(getMenu()).not.toBeNull()
+	})
+
+	it('selects item on enter key', async () => {
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+
+		const inputEl = getInputEl()
+		expect(inputEl).not.toBeNull()
+		inputEl?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		expect(getMenu()).not.toBeNull()
+
+		inputEl?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1'])
+	})
+
+	it('closes menu on escape', async () => {
+		const input = wrapper.find('input')
+		await input.trigger('click') // Open menu
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		expect(getMenu()).not.toBeNull()
+		expect(isMenuOverlayActive()).toBe(true)
+
+		const inputEl = getInputEl()
+		expect(inputEl).not.toBeNull()
+		inputEl?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		// Vuetify VMenu keeps teleported content mounted; check overlay visibility instead of DOM removal
+		expect(getMenu()).not.toBeNull()
+		expect(isMenuOverlayActive()).toBe(false)
+	})
+
+	it('selects and deselects items in multiple mode (mouse + keyboard)', async () => {
+		wrapper.unmount()
+		wrapper = mount(SyAutocomplete, {
+			props: {
+				modelValue: [],
+				items,
+				multiple: true,
+				label: 'Test Multiple',
+				textKey: 'text',
+				valueKey: 'value',
+				menuId,
+			},
+			attachTo: document.body,
+		})
+
+		// Keyboard: select + deselect option 0 in multiple mode
+		const inputEl = getInputEl()
+		expect(inputEl).not.toBeNull()
+		inputEl?.focus()
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		// ArrowDown opens the menu and sets the active option to 0
+		inputEl?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		expect(getMenu()).not.toBeNull()
+
+		// Select option 0
+		inputEl?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		let option0 = getOption(0)
+		expect(option0?.getAttribute('aria-selected')).toBe('true')
+
+		// Deselect option 0
+		inputEl?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+		option0 = getOption(0)
+		expect(option0?.getAttribute('aria-selected')).toBe('false')
+	})
+})

package/src/components/Customs/Selects/SyAutocomplete/types.ts

@@ -0,0 +1,7 @@
+export type ItemType = {
+	[key: string]: unknown
+}
+
+export type SelectValue = Record<string, unknown> | string | number | null | undefined
+
+export type SelectArray = Array<Record<string, unknown> | string | number>