@cnamts/synapse 1.0.16 → 1.0.18

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

@@ -3,14 +3,15 @@
 	defineOptions({
 		inheritAttrs: false,
 	})
-	import { mdiAlertCircle, mdiChevronDown, mdiCloseCircle } from '@mdi/js'
-	import { ref, watch, watchEffect, onMounted, computed, nextTick, type PropType } from 'vue'
+	import { mdiAlertCircle, mdiAlertOutline, mdiCheck, mdiChevronDown, mdiClose, mdiCloseCircle, mdiInformationOutline } from '@mdi/js'
+	import { ref, watch, watchEffect, onMounted, onBeforeUnmount, computed, nextTick, type PropType } from 'vue'
 	import { useSySelectKeyboard } from './composables/useSySelectKeyboard'
-	import { vRgaaSvgFix } from '../../../../directives/rgaaSvgFix'
 	import { useValidatable } from '@/composables/validation/useValidatable'
+	import type { ColorType, IconType, VariantStyle } from '@/types/vuetifyTypes'
 	import type { VList, VTextField } from 'vuetify/components'
 	import { VChip } from 'vuetify/components'
 	import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
+	import IconSlot from '@/components/Common/IconSlot/IconSlot.vue'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 	import { locales } from './locales'
 
@@ -57,6 +58,14 @@
 			type: Boolean,
 			default: true,
 		},
+		variantStyle: {
+			type: String as PropType<VariantStyle | undefined>,
+			default: undefined,
+		},
+		color: {
+			type: String as PropType<ColorType>,
+			default: 'primary',
+		},
 		textKey: {
 			type: String,
 			default: 'text',
@@ -125,20 +134,85 @@
 			type: String as PropType<'on' | 'off' | undefined | string>,
 			default: 'on',
 		},
+		prependIcon: {
+			type: String as PropType<IconType>,
+			default: undefined,
+		},
+		appendIcon: {
+			type: String as PropType<IconType>,
+			default: undefined,
+		},
+		prependTooltip: {
+			type: String,
+			default: undefined,
+		},
+		appendTooltip: {
+			type: String,
+			default: undefined,
+		},
+		tooltipLocation: {
+			type: String as PropType<'top' | 'bottom' | 'start' | 'end'>,
+			default: 'top',
+		},
+		noIcon: {
+			type: Boolean,
+			default: false,
+		},
+		disableClickButton: {
+			type: Boolean,
+			default: true,
+		},
 	})
 
-	const emit = defineEmits(['update:modelValue'])
+	const ICONS: Record<NonNullable<IconType>, string> = {
+		info: mdiInformationOutline,
+		success: mdiCheck,
+		warning: mdiAlertOutline,
+		error: mdiAlertCircle,
+		close: mdiClose,
+		calendar: mdiChevronDown,
+	}
+
+	const emit = defineEmits([
+		'update:modelValue',
+		'prepend-icon-click',
+		'append-icon-click',
+	])
+
+	const handlePrependIconClick = () => {
+		if (props.disableClickButton) return
+		emit('prepend-icon-click')
+	}
+
+	const handleAppendIconClick = () => {
+		if (props.disableClickButton) return
+		emit('append-icon-click')
+	}
+
+	const disableClickButton = computed(() => props.disableClickButton)
+
+	const iconColor = computed(() => {
+		if (hasError.value || Boolean(isRequired.value) || props.errorMessages.length > 0) return 'error'
+		return 'rgb(0 0 0 / 70%)'
+	})
+
+	const variant = computed(() => {
+		if (props.variantStyle) return props.variantStyle
+		return props.outlined ? 'outlined' : 'underlined'
+	})
 
 	const isOpen = ref(false)
 	// Initialize selectedItem with props.modelValue or empty array for multiple mode
 	const selectedItem = ref<SelectItemValueType | SelectItemArrayType>(props.modelValue)
 	const hasError = ref(false)
+	const menuMinWidth = ref<number | null>(null)
 
 	const labelWidth = ref(0)
 	const labelRef = ref<HTMLElement | null>(null)
 	const list = ref<VList | null>(null)
 	const textInput = ref<InstanceType<typeof VTextField> | null>(null)
 	const htmlItemRefs = ref<HTMLElement[]>([])
+	let resizeObserver: ResizeObserver | null = null
 
 	const toggleMenu = (skipInitialFocus = false) => {
 		if (props.readonly) return
@@ -172,11 +246,20 @@
 
 		isOpen.value = false
 	}
+
+	// si slot prepend/append, le menu peut devenir plus large que le champ de saisie, car il mesure la largeur du champ plus celle des emplacements (slots)
+	const updateMenuMinWidth = () => {
+		const el = textInput.value?.$el as HTMLElement | undefined
+		if (!el) return
+
+		const controlEl = el.querySelector('.v-input__control') as HTMLElement | null
+		menuMinWidth.value = (controlEl ?? el).offsetWidth
+	}
 	const inputId = ref(`sy-select-${Math.random().toString(36).substring(7)}`)
 	// Generate unique menu ID for each component instance to avoid conflicts and validation issues
 	const uniqueMenuId = ref(props.menuId === 'sy-select-menu' ? `sy-select-menu-${Math.random().toString(36).substring(7)}` : props.menuId)
 
-	const selectItem = (item: ItemType | null, event?: Event) => {
+	const selectItem = (item: ItemType | null | undefined, event?: Event) => {
 		// Prevent default action if event is provided
 		event?.preventDefault()
 
@@ -184,7 +267,7 @@
 		event?.stopPropagation()
 
 		// Si c'est un clic, appliquer le focus visuel en utilisant le système existant
-		if (event?.type === 'click' && item !== null) {
+		if (event?.type === 'click' && item !== null && item !== undefined) {
 			// Trouver l'index de l'élément cliqué
 			const clickedIndex = formattedItems.value.findIndex((formattedItem) => {
 				if (props.returnObject) {
@@ -198,8 +281,7 @@
 				setActiveDescendant(clickedIndex)
 			}
 		}
-
-		if (item === null) {
+		if (item === null || item === undefined) {
 			selectedItem.value = props.multiple ? [] : null
 			emit('update:modelValue', props.multiple ? [] : null)
 
@@ -681,17 +763,23 @@
 
 			setTimeout(setupAriaAttributes, 100)
 			setTimeout(setupAriaAttributes, 300)
+
+			updateMenuMinWidth()
+
+			const el = textInput.value?.$el as HTMLElement | undefined
+			if (!el || typeof ResizeObserver === 'undefined') return
+
+			resizeObserver = new ResizeObserver(() => {
+				updateMenuMinWidth()
+			})
+			resizeObserver.observe(el)
 		})
 	})
 
-	watch(isOpen, (newValue) => {
+	watch(isOpen, () => {
 		nextTick(() => {
 			if (!textInput.value || !textInput.value.$el) return
-
-			const inputElement = textInput.value.$el.querySelector('input') as HTMLElement
-			if (inputElement) {
-				ariaManager.updateInputState(inputElement, newValue, uniqueMenuId.value, activeDescendantId.value)
-			}
+			setupAriaAttributes()
 		})
 	})
 
@@ -753,6 +841,17 @@
 	// Intégration avec le système de validation du formulaire
 	useValidatable(validateOnSubmit)
 
+	watch(isOpen, () => {
+		nextTick(() => {
+			updateMenuMinWidth()
+		})
+	})
+
+	onBeforeUnmount(() => {
+		resizeObserver?.disconnect()
+		resizeObserver = null
+	})
+
 	defineExpose({
 		isOpen,
 		closeList,
@@ -783,105 +882,148 @@
 			location="bottom"
 			offset="4"
 			origin="top"
+			:close-on-content-click="!props.multiple"
 			:target="menuTarget"
 		>
 			<template #activator="{ props: activatorProps }">
-				<VTextField
-					:id="inputId"
-					v-model="selectedItemText"
-					v-click-outside="closeList"
-					v-rgaa-svg-fix="true"
-					:title="$attrs['aria-label'] || labelWithAsterisk"
-					color="primary"
-					:disabled="disabled"
-					:label="labelWithAsterisk"
-					:aria-label="$attrs['aria-label'] || labelWithAsterisk"
-					:error-messages="props.disableErrorHandling ? [] : errorMessages"
-					:variant="outlined ? 'outlined' : 'underlined'"
-					:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
-					:bg-color="props.bgColor"
-					:density="props.density"
-					:active="hasChips || isOpen"
-					readonly
-					:hide-details="props.hideMessages && !showHelpTextAsMessage"
-					:hint="showHelpTextAsMessage ? props.helpText : ''"
-					:persistent-hint="!!showHelpTextAsMessage"
-					:autocomplete="props.autocomplete"
+				<div
 					class="sy-select"
 					:class="{ 'sy-select--clearable': props.clearable }"
-					:width="calculatedWidth"
-					:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
-					v-bind="{
-						...Object.fromEntries(Object.entries($attrs).filter(([key]) => key !== 'display-asterisk')),
-						...initializeActivatorProps(activatorProps),
-					}"
-					@click="toggleMenu"
-					@keydown.enter.prevent="handleEnterKey"
-					@keydown.space.prevent="handleSpaceKey"
-					@keydown.down.prevent="handleDownKey"
-					@keydown.up.prevent="handleUpKey"
-					@keydown.esc.prevent="handleEscapeKey"
-					@keydown.home.prevent="handleHomeKey"
-					@keydown.end.prevent="handleEndKey"
-					@keydown.page-up.prevent="handlePageUpKey"
-					@keydown.page-down.prevent="handlePageDownKey"
-					@keydown.tab="handleTabKey"
-					@keydown="(e) => {
-						// Handle printable characters for keyboard navigation
-						if (!e.ctrlKey && !e.altKey && !e.metaKey) {
-							handleCharacterKey(e.key)
-						}
-					}"
 				>
-					<div
-						v-if="hasChips"
-						class="d-flex flex-wrap gap-1"
+					<VTextField
+						:id="inputId"
+						v-model="selectedItemText"
+						v-click-outside="closeList"
+						:title="$attrs['aria-label'] || labelWithAsterisk"
+						:color="props.color"
+						:disabled="disabled"
+						:label="labelWithAsterisk"
+						:aria-label="$attrs['aria-label'] || labelWithAsterisk"
+						:error-messages="props.disableErrorHandling ? [] : errorMessages"
+						:variant="variant"
+						:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
+						:bg-color="props.bgColor"
+						:density="props.density"
+						:active="hasChips || isOpen"
+						readonly
+						:hide-details="props.hideMessages && !showHelpTextAsMessage"
+						:hint="showHelpTextAsMessage ? props.helpText : ''"
+						:persistent-hint="!!showHelpTextAsMessage"
+						:autocomplete="props.autocomplete"
+						:width="calculatedWidth"
+						:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
+						v-bind="{
+							...Object.fromEntries(Object.entries($attrs).filter(([key]) => key !== 'display-asterisk')),
+							...initializeActivatorProps(activatorProps),
+						}"
+						@click="toggleMenu"
+						@keydown.enter.prevent="handleEnterKey"
+						@keydown.space.prevent="handleSpaceKey"
+						@keydown.down.prevent="handleDownKey"
+						@keydown.up.prevent="handleUpKey"
+						@keydown.esc.prevent="handleEscapeKey"
+						@keydown.home.prevent="handleHomeKey"
+						@keydown.end.prevent="handleEndKey"
+						@keydown.page-up.prevent="handlePageUpKey"
+						@keydown.page-down.prevent="handlePageDownKey"
+						@keydown.tab="handleTabKey"
+						@keydown="handleCharacterKey"
 					>
-						<VChip
-							v-for="item in selectedItem"
-							:key="props.returnObject ? item[props.valueKey] : item"
-							size="small"
-							class="ma-1"
-							closable
-							:close-label="`Supprimer ${getChipText(item)}`"
-							@click:close="removeChip(item)"
+						<div
+							v-if="hasChips"
+							class="d-flex flex-wrap gap-1"
 						>
-							{{ getChipText(item) }}
-						</VChip>
-					</div>
-					<template #append-inner>
-						<SyIcon
-							v-if="hasError"
-							class="mr-6"
-							color="error"
-							:icon="mdiAlertCircle"
-							:decorative="false"
-							label="Information"
-							role="img"
-						/>
-						<button
-							v-if="props.clearable && hasSelectionToClear"
-							type="button"
-							class="sy-select__clear-button"
-							:style="{ right: hasError ? '62px' : '42px' }"
-							:aria-label="locales.clear"
-							@keydown.enter.prevent="$event => selectItem(null, $event)"
-							@keydown.space.prevent="$event => selectItem(null, $event)"
-							@click.stop.prevent="$event => selectItem(null, $event)"
+							<VChip
+								v-for="item in selectedItem"
+								:key="props.returnObject && item ? item[props.valueKey] : item"
+								size="small"
+								class="ma-1"
+								closable
+								:close-label="`Supprimer ${getChipText(item)}`"
+								@click:close="removeChip(item)"
+							>
+								{{ getChipText(item) }}
+							</VChip>
+						</div>
+						<!-- Prepend -->
+						<template
+							v-if="$slots.prepend || props.prependIcon || props.prependTooltip"
+							#prepend
 						>
+							<IconSlot
+								:icon="props.prependIcon"
+								:tooltip="props.prependTooltip"
+								:label="props.label"
+								:icon-color="iconColor"
+								:icons="ICONS"
+								:no-icon="props.noIcon"
+								:disable-click-button="disableClickButton"
+								:tooltip-location="props.tooltipLocation"
+								@click="handlePrependIconClick"
+							>
+								<slot
+									v-if="$slots.prepend"
+									name="prepend"
+								/>
+							</IconSlot>
+						</template>
+
+						<!-- Append -->
+						<template
+							v-if="$slots.append || props.appendIcon || props.appendTooltip"
+							#append
+						>
+							<IconSlot
+								:icon="props.appendIcon"
+								:tooltip="props.appendTooltip"
+								:label="props.label"
+								:icon-color="iconColor"
+								:icons="ICONS"
+								:no-icon="props.noIcon"
+								:disable-click-button="disableClickButton"
+								:tooltip-location="props.tooltipLocation"
+								@click="handleAppendIconClick"
+							>
+								<slot
+									v-if="$slots.append"
+									name="append"
+								/>
+							</IconSlot>
+						</template>
+						<template #append-inner>
 							<SyIcon
-								class="sy-select__clear-icon"
-								:icon="mdiCloseCircle"
+								v-if="hasError"
+								class="mr-6"
+								color="error"
+								:icon="mdiAlertCircle"
+								:decorative="false"
+								label="Information"
+								role="img"
+							/>
+							<button
+								v-if="props.clearable && hasSelectionToClear"
+								type="button"
+								class="sy-select__clear-button"
+								:style="{ right: hasError ? '62px' : '42px' }"
+								:aria-label="locales.clear"
+								@keydown.enter.prevent="$event => selectItem(null, $event)"
+								@keydown.space.prevent="$event => selectItem(null, $event)"
+								@click.stop.prevent="$event => selectItem(null, $event)"
+							>
+								<SyIcon
+									class="sy-select__clear-icon"
+									:icon="mdiCloseCircle"
+									:decorative="true"
+								/>
+							</button>
+							<SyIcon
+								class="arrow"
+								:icon="mdiChevronDown"
 								:decorative="true"
 							/>
-						</button>
-						<SyIcon
-							class="arrow"
-							:icon="mdiChevronDown"
-							:decorative="true"
-						/>
-					</template>
-				</VTextField>
+						</template>
+					</VTextField>
+				</div>
 				<span
 					ref="labelRef"
 					class="hidden-label"
@@ -890,22 +1032,8 @@
 			<VList
 				:id="uniqueMenuId"
 				ref="list"
-				class="v-list"
-				role="listbox"
-				:aria-multiselectable="props.multiple ? 'true' : undefined"
 				:aria-label="$attrs['aria-label'] || labelWithAsterisk"
-				:style="{
-					minWidth: `${textInput?.$el.offsetWidth}px`
-				}"
-				bg-color="white"
-				tabindex="0"
-				:title="props.multiple ? 'Sélection multiple' : 'Sélection'"
-				@keydown.esc.prevent="closeList"
-				@keydown.tab="handleTabKey"
-				@keydown.enter.prevent="handleEnterKey"
-				@keydown.down.prevent="handleDownKey"
-				@keydown.up.prevent="handleUpKey"
-				@keydown.home.prevent="handleHomeKey"
+				:title="$attrs['aria-label'] || labelWithAsterisk"
 				@keydown.end.prevent="handleEndKey"
 				@keydown.page-up.prevent="handlePageUpKey"
 				@keydown.page-down.prevent="handlePageDownKey"
@@ -975,8 +1103,19 @@
 }
 
 .sy-select {
-	display: flex;
-	flex-direction: column;
+	display: block;
+
+	:deep(.v-input__prepend > .v-icon__svg),
+	:deep(.v-input__append > .v-icon__svg) {
+		fill: rgb(0 0 0 / 70%);
+	}
+
+	:deep(.v-input__prepend .v-icon:focus-visible),
+	:deep(.v-input__append .v-icon:focus-visible) {
+		outline: 2px solid tokens.$primary-base;
+		outline-offset: 2px;
+		opacity: 1;
+	}
 }
 
 .v-field {
@@ -1044,7 +1183,7 @@
 	padding: 2px 0;
 }
 
-.v-icon {
+.v-icon.arrow {
 	position: absolute;
 	right: 10px;
 	color: tokens.$grey-darken-20;
@@ -1077,7 +1216,7 @@
 	margin: 2px;
 }
 
-:deep(.v-field__input) {
+.sy-select :deep(.v-field__input) {
 	opacity: 1;
 	color: tokens.$grey-darken-20 !important;
 	cursor: pointer;
@@ -1090,7 +1229,7 @@
 	padding-right: 55px;
 }
 
-:deep(.v-field__input input) {
+.sy-select :deep(.v-field__input input) {
 	position: absolute;
 	z-index: -1;
 	text-overflow: ellipsis;

package/src/components/Customs/Selects/SySelect/Usages.stories.ts

@@ -1,4 +1,4 @@
-import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import { VIcon } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
 import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
 import Usages from '@/components/Usages/Usages.vue'
@@ -22,7 +22,7 @@ export const UsagePage: StoryObj = {
 
 	render: () => {
 		return {
-			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+			components: { VIcon, Usages },
 
 			setup() {
 				const icon = checkIcon

package/src/components/Customs/Selects/SySelect/composables/tests/useSySelectKeyboard.spec.ts

@@ -223,13 +223,13 @@ describe('useSySelectKeyboard', () => {
 		it('trouve et sélectionne un élément commençant par le caractère donné', () => {
 			// Menu déjà ouvert, pas besoin d'attendre nextTick
 			isOpen.value = true
-			keyboard.handleCharacterKey('b')
+			keyboard.handleCharacterKey({ key: 'b', ctrlKey: false, altKey: false, metaKey: false } as KeyboardEvent)
 			expect(keyboard.activeDescendantId.value).toBe('option-1') // Banana
 		})
 
 		it('ouvre le menu si fermé et trouve un élément correspondant', async () => {
 			isOpen.value = false
-			keyboard.handleCharacterKey('c')
+			keyboard.handleCharacterKey({ key: 'c', ctrlKey: false, altKey: false, metaKey: false } as KeyboardEvent)
 			expect(toggleMenu).toHaveBeenCalled()
 
 			// Simuler l'ouverture du menu et attendre nextTick
@@ -240,7 +240,7 @@ describe('useSySelectKeyboard', () => {
 		})
 
 		it('ne fait rien si aucun élément ne correspond', () => {
-			keyboard.handleCharacterKey('z')
+			keyboard.handleCharacterKey({ key: 'z', ctrlKey: false, altKey: false, metaKey: false } as KeyboardEvent)
 			expect(keyboard.activeDescendantId.value).toBe('')
 			expect(toggleMenu).not.toHaveBeenCalled()
 		})

package/src/components/Customs/Selects/SySelect/composables/useSySelectKeyboard.ts

@@ -8,7 +8,7 @@ export interface UseSySelectKeyboardOptions {
 	isOpen: Ref<boolean>
 	formattedItems: Ref<ItemType[]>
 	toggleMenu: (skipInitialFocus?: boolean) => void
-	selectItem: (item: ItemType | null, event?: Event) => void
+	selectItem: (item: ItemType | null | undefined, event?: Event) => void
 	getItemText: (item: unknown) => unknown
 }
 
@@ -52,7 +52,6 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 					})
 
 					element.setAttribute('tabindex', '0')
-					element.focus()
 					element.classList.add('keyboard-focused')
 					element.scrollIntoView({ block: 'nearest' })
 				}
@@ -109,7 +108,8 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 
 		// Sinon, essayer de récupérer l'index à partir de l'ID ARIA
 		if (activeDescendantId.value) {
-			const activeIndex = parseInt(activeDescendantId.value.split('-')[1])
+			const activeIndexString = activeDescendantId.value.split('-')?.[1]
+			const activeIndex = activeIndexString ? parseInt(activeIndexString) : NaN
 			if (!isNaN(activeIndex) && activeIndex >= 0 && activeIndex < formattedItems.value.length) {
 				// Synchroniser lastFocusedIndex avec l'index trouvé
 				lastFocusedIndex.value = activeIndex
@@ -218,23 +218,24 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 		}
 	}
 
-	const handleCharacterKey = (key: string) => {
-		// Handle printable characters for keyboard navigation
-		if (key.length === 1 && key.match(/\S/)) {
-			const index = findItemStartingWith(key)
-			if (index >= 0) {
-				if (!isOpen.value) {
-					toggleMenu()
-					// Attendre que le menu soit ouvert avant de définir le focus
-					nextTick(() => {
-						setActiveDescendant(index)
-					})
-				}
-				else {
-					// Menu déjà ouvert, définir le focus immédiatement
-					setActiveDescendant(index)
-				}
-			}
+	const handleCharacterKey = (event: KeyboardEvent) => {
+		if (event.ctrlKey || event.altKey || event.metaKey) return
+		if (event.key.length !== 1) return
+		if (!event.key.match(/\S/)) return
+
+		const index = findItemStartingWith(event.key)
+		if (index < 0) return
+
+		if (!isOpen.value) {
+			toggleMenu()
+			// Attendre que le menu soit ouvert avant de définir le focus
+			nextTick(() => {
+				setActiveDescendant(index)
+			})
+		}
+		else {
+			// Menu déjà ouvert, définir le focus immédiatement
+			setActiveDescendant(index)
 		}
 	}
 
@@ -301,7 +302,8 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 	const handleTabKey = () => {
 		if (isOpen.value && activeDescendantId.value) {
 			// Trouver l'item actuellement focusé
-			const currentIndex = parseInt(activeDescendantId.value.split('-')[1])
+			const currentIndexString = activeDescendantId.value.split('-')?.[1]
+			const currentIndex = currentIndexString ? parseInt(currentIndexString) : NaN
 			if (!isNaN(currentIndex) && currentIndex >= 0 && currentIndex < formattedItems.value.length) {
 				const currentItem = formattedItems.value[currentIndex]
 				// Sélectionner l'item qui a le focus
@@ -320,7 +322,8 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 	// Watch activeDescendantId pour synchroniser lastFocusedIndex
 	watch(activeDescendantId, (newId) => {
 		if (newId) {
-			const index = parseInt(newId.split('-')[1])
+			const indexString = newId.split('-')?.[1]
+			const index = indexString ? parseInt(indexString) : NaN
 			if (!isNaN(index) && index >= 0 && index < formattedItems.value.length) {
 				// Synchroniser lastFocusedIndex avec l'ID ARIA
 				lastFocusedIndex.value = index

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

@@ -0,0 +1,40 @@
+// @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 SySelect from '../SySelect.vue'
+
+// Scénario d’accessibilité : select simple requis avec ouverture du menu.
+
+describe('SySelect – accessibility (axe)', () => {
+	it('has no obvious axe violations for required select with opened menu', async () => {
+		const items = [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		]
+
+		const wrapper = mount(SySelect, {
+			props: {
+				items,
+				label: 'Choisissez une option',
+				required: true,
+			},
+			attachTo: document.body,
+		})
+
+		// Ouvrir le menu pour inclure la liste déroulante dans l’analyse axe
+		const activator = wrapper.find('.sy-select')
+		if (activator.exists()) {
+			await activator.trigger('click')
+		}
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'SySelect – required select with menu open', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+})