@cnamts/synapse 1.0.22 → 1.0.23

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

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest'
 import { mount, flushPromises } from '@vue/test-utils'
-import { VMenu, VChip } from 'vuetify/components'
+import { VMenu } from 'vuetify/components'
 
 import SyAutocomplete from '../SyAutocomplete.vue'
 import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
@@ -128,13 +128,13 @@ describe('SyAutocomplete', () => {
 
 		// 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')
+		textField.vm.$emit('update:modelValue', 'Opt')
 		await flushPromises()
 		await wrapper.vm.$nextTick()
 
-		// Query should be cleared, leaving only selected label prefix in input
+		// Search and input should be cleared; selected items render as inline labels, not in input value
 		expect(wrapper.vm.search).toBe('')
-		expect(getInputEl()!.value).toBe('Option 1, ')
+		expect(getInputEl()!.value).toBe('')
 	})
 
 	it('displays chips in multiple mode', async () => {
@@ -150,12 +150,13 @@ describe('SyAutocomplete', () => {
 				textKey: 'text',
 				valueKey: 'value',
 			},
+			attachTo: document.body,
 		})
 
 		await wrapper.vm.$nextTick()
-		const chips = wrapper.findAllComponents(VChip)
+		const chips = wrapper.findAll('.v-chip')
 		expect(chips.length).toBe(1)
-		expect(chips[0]!.text()).toBe('Option 1')
+		expect(chips[0]!.text()).toContain('Option 1')
 	})
 
 	it('removes chip when close button is clicked', async () => {
@@ -171,14 +172,15 @@ describe('SyAutocomplete', () => {
 				textKey: 'text',
 				valueKey: 'value',
 			},
+			attachTo: document.body,
 		})
 
 		await wrapper.vm.$nextTick()
-		const chip = wrapper.findComponent(VChip)
-		await chip.vm.$emit('click:close')
+		const closeBtn = wrapper.find('.v-chip__close')
+		await closeBtn.trigger('click')
 		await wrapper.vm.$nextTick()
 
-		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([[]])
+		expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([null])
 	})
 
 	it('shows clear button when clearable and has selection', async () => {
@@ -298,6 +300,181 @@ describe('SyAutocomplete', () => {
 		expect(isMenuOverlayActive()).toBe(false)
 	})
 
+	describe('selectionText', () => {
+		const selectionText = (selected: unknown[]) => `${selected.length} élément${selected.length > 1 ? 's' : ''} sélectionné${selected.length > 1 ? 's' : ''}`
+
+		it('displays custom text in prepend-inner when items are selected', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: ['1', '2'],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+
+			const selectionTextEl = wrapper.find('.sy-autocomplete__selection-text')
+			expect(selectionTextEl.exists()).toBe(true)
+			expect(selectionTextEl.text()).toBe('2 éléments sélectionnés')
+			expect(getInputEl()?.value).toBe('')
+		})
+
+		it('does not display selection text element when no items are selected', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: [],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText vide',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+
+			expect(wrapper.find('.sy-autocomplete__selection-text').exists()).toBe(false)
+		})
+
+		it('keeps custom text visible when menu is open', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: ['1', '2'],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText ouvert',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+
+			const input = wrapper.find('input')
+			await input.trigger('click')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			// Custom text still visible in prepend-inner, input empty for searching
+			expect(wrapper.find('.sy-autocomplete__selection-text').text()).toBe('2 éléments sélectionnés')
+			expect(getInputEl()?.value).toBe('')
+		})
+
+		it('updates custom text when selection changes', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: ['1'],
+					items,
+					multiple: true,
+					selectionText,
+					label: 'Test selectionText update',
+					textKey: 'text',
+					valueKey: 'value',
+					menuId,
+				},
+				attachTo: document.body,
+			})
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.sy-autocomplete__selection-text').text()).toBe('1 élément sélectionné')
+
+			await wrapper.setProps({ modelValue: ['1', '2', '3'] })
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.sy-autocomplete__selection-text').text()).toBe('3 éléments sélectionnés')
+		})
+	})
+
+	describe('loading', () => {
+		it('shows progress bar when loading is true', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test Loading',
+					textKey: 'text',
+					valueKey: 'value',
+					loading: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			const progressBar = wrapper.find('.v-progress-linear')
+			expect(progressBar.exists()).toBe(true)
+		})
+
+		it('does not show progress bar when loading is false', async () => {
+			await wrapper.vm.$nextTick()
+			const progressBar = wrapper.find('.v-progress-linear')
+			expect(progressBar.exists()).toBe(false)
+		})
+
+		it('hides no-data message while loading', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items: [],
+					label: 'Test Loading No Data',
+					textKey: 'text',
+					valueKey: 'value',
+					loading: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			const input = wrapper.find('input')
+			await input.trigger('click')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			// No-data item should not appear while loading
+			const noDataItem = document.body.querySelector(`#${menuId} .v-list-item`)
+			expect(noDataItem).toBeNull()
+		})
+
+		it('shows no-data message once loading is done and items is empty', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items: [],
+					label: 'Test Loading Done',
+					textKey: 'text',
+					valueKey: 'value',
+					loading: false,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			const input = wrapper.find('input')
+			await input.trigger('click')
+			await flushPromises()
+			await wrapper.vm.$nextTick()
+
+			const listItems = document.body.querySelectorAll(`#${menuId} .v-list-item`)
+			const texts = Array.from(listItems).map(el => el.textContent?.trim())
+			expect(texts).toContain('Aucune option')
+		})
+	})
+
 	it('selects and deselects items in multiple mode (mouse + keyboard)', async () => {
 		wrapper.unmount()
 		wrapper = mount(SyAutocomplete, {
@@ -342,4 +519,52 @@ describe('SyAutocomplete', () => {
 		option0 = getOption(0)
 		expect(option0?.getAttribute('aria-selected')).toBe('false')
 	})
+
+	describe('hideDetails', () => {
+		it('hides the details zone when hideDetails is true', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test hideDetails',
+					textKey: 'text',
+					valueKey: 'value',
+					hideDetails: true,
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.v-input__details').exists()).toBe(false)
+		})
+
+		it('shows the details zone when hideDetails is false', async () => {
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.v-input__details').exists()).toBe(true)
+		})
+
+		it('does not show error messages when hideDetails is true even with validation errors', async () => {
+			wrapper.unmount()
+			wrapper = mount(SyAutocomplete, {
+				props: {
+					modelValue: null,
+					items,
+					label: 'Test hideDetails + erreur',
+					textKey: 'text',
+					valueKey: 'value',
+					hideDetails: true,
+					hasError: true,
+					errorMessages: ['Erreur de validation'],
+					menuId,
+				},
+				attachTo: document.body,
+			})
+
+			await wrapper.vm.$nextTick()
+			expect(wrapper.find('.v-input__details').exists()).toBe(false)
+			expect(wrapper.find('.v-messages').exists()).toBe(false)
+		})
+	})
 })

package/src/components/Customs/Selects/SyAutocomplete/utils/ariaManager.ts

@@ -145,9 +145,19 @@ export const ariaManager = {
 						popupRendered,
 					},
 				)
-				const labelToApply = inputLabel || inputEl.getAttribute('aria-label') || inputEl.getAttribute('placeholder') || ''
-				if (labelToApply) {
-					inputEl.setAttribute('aria-label', labelToApply)
+				const labelledById = inputEl.getAttribute('aria-labelledby')
+				const labelElement = labelledById ? document.getElementById(labelledById) : null
+				const labelElementHasText = Boolean(labelElement?.textContent?.trim())
+				if (labelElementHasText) {
+					// aria-labelledby references a visible label — aria-label is redundant and causes validator errors
+					inputEl.removeAttribute('aria-label')
+				}
+				else {
+					// No visible label element (e.g. chips mode with label="") — use aria-label as fallback
+					const labelToApply = inputLabel || inputEl.getAttribute('aria-label') || inputEl.getAttribute('placeholder') || ''
+					if (labelToApply) {
+						inputEl.setAttribute('aria-label', labelToApply)
+					}
 				}
 				inputEl.setAttribute('aria-haspopup', 'listbox')
 				if (!popupRendered) {

package/src/components/Customs/Selects/SyAutocomplete/utils/useSelectionLogic.ts

@@ -19,15 +19,9 @@ export function useSelectionLogic(
 	emit: EmitFunction,
 ) {
 	const resetValue = () => {
-		if (props.multiple) {
-			selected.value = []
-			emit('update:modelValue', [])
-		}
-		else {
-			selected.value = null
-			search.value = ''
-			emit('update:modelValue', null)
-		}
+		selected.value = null
+		search.value = ''
+		emit('update:modelValue', null)
 	}
 
 	const updateMultipleSelection = (valueKeyValue: string | number, valueToStore: ItemType | string | number) => {
@@ -44,7 +38,12 @@ export function useSelectionLogic(
 			arr.push(valueToStore)
 		}
 		selected.value = arr as SelectArray
-		emit('update:modelValue', arr as SelectArray)
+		if (arr.length === 0) {
+			emit('update:modelValue', null)
+		}
+		else {
+			emit('update:modelValue', arr as SelectArray)
+		}
 	}
 
 	const updateSingleSelection = (valueToStore: SelectValue, item: ItemType) => {

package/src/components/Customs/Selects/SySelect/SySelect.vue

@@ -414,6 +414,11 @@
 			return ''
 		}
 
+		// If inline labels are shown, return empty string to hide input text
+		if (hasMultipleSelections.value) {
+			return ''
+		}
+
 		// For multiple mode, show default option text when nothing is selected
 		if (props.multiple) {
 			if (!selectedItem.value || (Array.isArray(selectedItem.value) && selectedItem.value.length === 0)) {
@@ -457,6 +462,10 @@
 		return props.chips && props.multiple && Array.isArray(selectedItem.value) && selectedItem.value.length > 0
 	})
 
+	const hasMultipleSelections = computed(() => {
+		return !props.chips && props.multiple && Array.isArray(selectedItem.value) && (selectedItem.value as unknown[]).length > 0
+	})
+
 	const hasSelectionToClear = computed(() => {
 		return props.multiple
 			? (((selectedItem.value as unknown[] | null | undefined)?.length) ?? 0) > 0
@@ -904,7 +913,10 @@
 			<template #activator="{ props: activatorProps }">
 				<div
 					class="sy-select"
-					:class="{ 'sy-select--clearable': props.clearable }"
+					:class="{
+						'sy-select--clearable': props.clearable,
+						'sy-select--with-chips': hasChips,
+					}"
 				>
 					<VTextField
 						:id="inputId"
@@ -920,7 +932,7 @@
 						:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
 						:bg-color="props.bgColor"
 						:density="props.density"
-						:active="hasChips || isOpen"
+						:active="hasChips || hasMultipleSelections || isOpen"
 						readonly
 						:hide-details="props.hideMessages && !showHelpTextAsMessage"
 						:hint="showHelpTextAsMessage ? props.helpText : ''"
@@ -955,12 +967,21 @@
 								size="small"
 								class="ma-1"
 								closable
-								:close-label="`Supprimer ${getChipText(item)}`"
+								:close-label="locales.removeChip(getChipText(item))"
 								@click:close="removeChip(item)"
 							>
 								{{ getChipText(item) }}
 							</VChip>
 						</div>
+						<template v-else-if="hasMultipleSelections">
+							<span
+								v-for="item in (selectedItem as unknown[])"
+								:key="props.returnObject && item ? String((item as ItemType)[props.valueKey]) : String(item)"
+								class="sy-select__label"
+							>
+								{{ getChipText(item) }}
+							</span>
+						</template>
 						<!-- Prepend -->
 						<template
 							v-if="$slots.prepend || props.prependIcon || props.prependTooltip"
@@ -1227,6 +1248,11 @@
 	opacity: var(--v-medium-emphasis-opacity) !important;
 }
 
+/* Style spécifique pour les chips */
+:deep(.v-chip .v-chip__close .v-icon__svg) {
+	fill: inherit !important;
+}
+
 .sy-select__clear-button {
 	position: absolute;
 	background: transparent;
@@ -1249,6 +1275,18 @@
 	margin: 2px;
 }
 
+.sy-select__label {
+	align-self: center;
+	white-space: nowrap;
+	flex-shrink: 0;
+	font-size: inherit;
+
+	&:not(:last-of-type)::after {
+		content: ',';
+		margin-right: 4px;
+	}
+}
+
 .sy-select :deep(.v-field__input) {
 	opacity: 1;
 	color: tokens.$grey-darken-20 !important;
@@ -1274,4 +1312,9 @@
 	position: absolute;
 	white-space: nowrap;
 }
+
+.sy-select--with-chips :deep(.v-field__input input) {
+	position: absolute;
+	z-index: -1;
+}
 </style>

package/src/components/Customs/Selects/SySelect/locales.ts

@@ -1,3 +1,4 @@
 export const locales = {
 	clear: 'Effacer la sélection',
+	removeChip: (label: string) => `Supprimer ${label}`,
 }

package/src/components/Customs/SyIcon/SyIcon.vue

@@ -70,7 +70,7 @@
 		:size="props.size"
 		:role="props.role"
 		:aria-label="resolvedDecorative ? undefined : props.label"
-		:aria-hidden="resolvedDecorative ? 'true' : undefined"
+		:aria-hidden="resolvedDecorative ? true : undefined"
 	>
 		{{ icon }}
 	</v-icon>

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

@@ -0,0 +1,20 @@
+// @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 SyIcon from '../SyIcon.vue'
+
+describe('SyIcon – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(SyIcon, {
+			props: {
+				icon: 'home',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyIcon – default state')
+	})
+})

package/src/components/Customs/SyIconButton/SyIconButton.mdx

@@ -0,0 +1,46 @@
+import { Meta, Primary, Controls, Canvas } from '@storybook/blocks';
+import * as SyIconButtonStories from './SyIconButton.stories';
+import '@/stories/styles/shared.css';
+
+<Meta of={SyIconButtonStories} />
+
+<div className="header">
+  <h1>SyIconButton</h1>
+  <p>Le composant `SyIconButton` est un bouton icône qui combine `v-btn` de Vuetify et `SyIcon` en garantissant l'accessibilité via une prop `label` obligatoire portée par `aria-label`.</p>
+</div>
+
+<Canvas of={SyIconButtonStories.Default} />
+
+# API
+
+<Controls of={SyIconButtonStories.Default} />
+
+
+# Accessibilité
+
+Le composant `SyIconButton` gère automatiquement les attributs ARIA :
+
+- **Label obligatoire** : la prop `label` est portée par le bouton via `aria-label` — elle constitue le nom accessible du bouton
+- **Icône décorative** : `SyIcon` interne reçoit `:decorative="true"` car le bouton porte déjà le nom accessible via `aria-label` — l'icône est donc ignorée par les lecteurs d'écran
+
+> **Important :** Le `label` doit décrire l'**action** du bouton et non l'icône elle-même (ex. _"Fermer"_ plutôt que _"Croix"_). Ne jamais fournir un `label` vide.
+
+Pour plus d'informations sur l'accessibilité, consultez la [page dédiée à l'accessibilité](?path=/docs/customs-syiconbutton--accessibility).
+
+## Exemples
+
+### Bouton icône par défaut
+
+<Canvas of={SyIconButtonStories.Default} />
+
+### Bouton icône désactivé
+
+<Canvas of={SyIconButtonStories.Disabled} />
+
+### Bouton icône avec couleur
+
+<Canvas of={SyIconButtonStories.WithColor} />
+
+### Bouton icône avec taille personnalisée
+
+<Canvas of={SyIconButtonStories.WithSize} />