@cnamts/synapse 1.0.24 → 1.0.26

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

@@ -4,9 +4,8 @@
 		inheritAttrs: false,
 	})
 	import { mdiAlertCircle, mdiAlertOutline, mdiCheck, mdiChevronDown, mdiClose, mdiCloseCircle, mdiInformationOutline } from '@mdi/js'
-	import { ref, watch, watchEffect, onMounted, onBeforeUnmount, computed, nextTick, type PropType } from 'vue'
+	import { ref, watch, watchEffect, onMounted, onBeforeUnmount, computed, nextTick, useAttrs, toRef, type Ref } from 'vue'
 	import { useSySelectKeyboard } from './composables/useSySelectKeyboard'
-	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'
@@ -14,6 +13,8 @@
 	import IconSlot from '@/components/Common/IconSlot/IconSlot.vue'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 	import { locales } from './locales'
+	import type { ValidationRule } from '@/composables/validation/useValidation'
+	import { useValidation, validationPropsDefaults, type FieldValidationProps } from '@/composables/unifyValidation/useValidation'
 
 	export type ItemType = {
 		[key: string]: unknown
@@ -22,147 +23,74 @@
 	export type SelectItemValueType = Record<string, unknown> | string | number | null | undefined
 	export type SelectItemArrayType = Array<Record<string, unknown> | string | number>
 
-	// Définition des props avec typage correct pour modelValue
-	const props = defineProps({
-		modelValue: {
-			// En Vue, on ne peut pas mettre null directement comme type
-			// On utilise PropType pour définir le type complet incluant null
-			type: [Object, String, Number, Array] as PropType<Record<string, unknown> | string | number | null | SelectItemArrayType>,
-			default: null,
+	const props = withDefaults(
+		defineProps<{
+			modelValue?: Record<string, unknown> | string | number | null | SelectItemArrayType
+			items?: ItemType[]
+			label?: string
+			menuId?: string
+			outlined?: boolean
+			variantStyle?: VariantStyle
+			color?: ColorType
+			textKey?: string
+			plainTextKey?: string
+			valueKey?: string
+			displayAsterisk?: boolean
+			returnObject?: boolean
+			density?: 'default' | 'comfortable' | 'compact'
+			bgColor?: string
+			clearable?: boolean
+			hideDetails?: boolean
+			width?: string
+			multiple?: boolean
+			chips?: boolean
+			helpText?: string
+			allowHtml?: boolean
+			autocomplete?: 'on' | 'off' | string
+			prependIcon?: IconType
+			appendIcon?: IconType
+			prependTooltip?: string
+			appendTooltip?: string
+			tooltipLocation?: 'top' | 'bottom' | 'start' | 'end'
+			noIcon?: boolean
+			disableClickButton?: boolean
+		} & FieldValidationProps>(),
+		{
+			modelValue: null,
+			items: () => [],
+			label: 'Sélectionnez une option',
+			menuId: 'sy-select-menu',
+			outlined: true,
+			variantStyle: undefined,
+			color: 'primary',
+			textKey: 'text',
+			plainTextKey: '',
+			valueKey: 'value',
+			displayAsterisk: false,
+			returnObject: false,
+			density: 'default',
+			bgColor: 'white',
+			clearable: false,
+			hideDetails: false,
+			width: 'undefined',
+			multiple: false,
+			chips: false,
+			helpText: '',
+			allowHtml: false,
+			autocomplete: 'on',
+			prependIcon: undefined,
+			appendIcon: undefined,
+			prependTooltip: undefined,
+			appendTooltip: undefined,
+			tooltipLocation: 'top',
+			noIcon: false,
+			disableClickButton: true,
+			...validationPropsDefaults,
 		},
-		items: {
-			type: Array as PropType<ItemType[]>,
-			default: () => [],
-		},
-		label: {
-			type: String,
-			default: 'Sélectionnez une option',
-		},
-		errorMessages: {
-			type: [String, Array] as PropType<string | readonly string[]>,
-			default: () => [],
-		},
-		required: {
-			type: Boolean,
-			default: false,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		menuId: {
-			type: String,
-			default: 'sy-select-menu',
-		},
-		outlined: {
-			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',
-		},
-		plainTextKey: {
-			type: String,
-			default: '',
-		},
-		valueKey: {
-			type: String,
-			default: 'value',
-		},
-		displayAsterisk: {
-			type: Boolean,
-			default: false,
-		},
-		returnObject: {
-			type: Boolean,
-			default: false,
-		},
-		disableErrorHandling: {
-			type: Boolean,
-			default: false,
-		},
-		density: {
-			type: String as PropType<'default' | 'comfortable' | 'compact' | undefined>,
-			default: 'default',
-		},
-		bgColor: {
-			type: String,
-			default: 'white',
-		},
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		clearable: {
-			type: Boolean,
-			default: false,
-		},
-		hideMessages: {
-			type: Boolean,
-			default: false,
-		},
-		width: {
-			type: String,
-			default: 'undefined',
-		},
-		multiple: {
-			type: Boolean,
-			default: false,
-		},
-		chips: {
-			type: Boolean,
-			default: false,
-		},
-		helpText: {
-			type: String,
-			default: '',
-		},
-		allowHtml: {
-			type: Boolean,
-			default: false,
-		},
-		autocomplete: {
-			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,
-		},
-	})
+	)
+
+	// pr récupérer proprement aria-label
+	const attrs = useAttrs()
 
 	const ICONS: Record<NonNullable<IconType>, string> = {
 		info: mdiInformationOutline,
@@ -192,8 +120,10 @@
 	const disableClickButton = computed(() => props.disableClickButton)
 
 	const iconColor = computed(() => {
-		if (hasError.value || Boolean(isRequired.value) || props.errorMessages.length > 0) return 'error'
-		return 'rgb(var(--v-theme-iconBase));'
+		if (hasError.value) return 'error'
+		if (hasWarning.value) return 'warning'
+		if (hasSuccess.value) return 'success'
+		return 'rgb(var(--v-theme-iconBase))'
 	})
 
 	const variant = computed(() => {
@@ -204,9 +134,44 @@
 	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 focused = ref(false)
 	const menuMinWidth = ref<number | null>(null)
 
+	const defaultRules = computed<ValidationRule[]>(() => props.required
+		? [{
+			type: 'required',
+			options: {
+				message: `Le champ ${props.label || 'ce champ'} est requis.`,
+				fieldIdentifier: props.label,
+			},
+		}]
+		: [],
+	)
+
+	const { validate, clearValidation, errors, warnings, successes, hasError, hasWarning, hasSuccess } = useValidation({
+		modelValue: toRef(props, 'modelValue') as Ref<unknown>,
+		readonly: toRef(props, 'readonly'),
+		disabled: toRef(props, 'disabled'),
+		required: toRef(props, 'required'),
+		isValidateOnBlur: toRef(props, 'isValidateOnBlur'),
+		showSuccessMessages: toRef(props, 'showSuccessMessages'),
+		disableErrorHandling: toRef(props, 'disableErrorHandling'),
+		useVuetifyValidation: toRef(props, 'useVuetifyValidation'),
+		label: toRef(props, 'label'),
+		rules: toRef(props, 'rules'),
+		customRules: computed(() => [...defaultRules.value, ...(props.customRules ?? [])]),
+		customWarningRules: toRef(props, 'customWarningRules'),
+		customSuccessRules: toRef(props, 'customSuccessRules'),
+		errorMessages: toRef(props, 'errorMessages'),
+		warningMessages: toRef(props, 'warningMessages'),
+		successMessages: toRef(props, 'successMessages'),
+		hasErrorProp: toRef(props, 'hasError'),
+		hasWarningProp: toRef(props, 'hasWarning'),
+		hasSuccessProp: toRef(props, 'hasSuccess'),
+		maxErrors: toRef(props, 'maxErrors'),
+		focused: focused,
+	})
+
 	const labelWidth = ref(0)
 	const labelRef = ref<HTMLElement | null>(null)
 	const list = ref<VList | null>(null)
@@ -256,9 +221,37 @@
 		menuMinWidth.value = (controlEl ?? el).offsetWidth
 	}
 	const inputId = ref(`sy-select-${Math.random().toString(36).substring(7)}`)
+	// text d'aide
+	const helpTextId = computed(() => `${inputId.value}-help`)
+	// messages d'erreur, success avertissement
+	const messagesId = computed(() => `${inputId.value}-sr-messages`)
+	// live region pour le lecteur ecran
+	const liveRegionId = computed(() => `${inputId.value}-live`)
+	// un libellé caché pour la popup/grid
+	const overlayLabelId = computed(() => `${inputId.value}-overlay-label`)
+
 	// 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 rawAriaLabel = computed(() => {
+		const ariaLabel = attrs['aria-label']
+		return typeof ariaLabel === 'string' && ariaLabel.trim().length > 0 ? ariaLabel.trim() : ''
+	})
+
+	// met en place un fallback robuste du nom accessible :
+	const accessibleLabel = computed(() => {
+		// si aria-label existant
+		if (rawAriaLabel.value) return rawAriaLabel.value
+
+		// return label
+		if (props.label?.trim()) return labelWithAsterisk.value
+
+		// message d'aide si aucun label fourni
+		if (typeof props.helpText === 'string' && props.helpText.trim()) return props.helpText.trim()
+
+		return 'Selectionnez une option'
+	})
+
 	const selectItem = (item: ItemType | null | undefined, event?: Event) => {
 		// Prevent default action if event is provided
 		event?.preventDefault()
@@ -284,6 +277,7 @@
 		if (item === null || item === undefined) {
 			selectedItem.value = props.multiple ? [] : null
 			emit('update:modelValue', props.multiple ? [] : null)
+			clearValidation()
 
 			// Garder la liste ouverte après une suppression et réinitialiser la navigation au clavier
 			const target = event?.target as HTMLElement | undefined
@@ -469,12 +463,25 @@
 		return !props.chips && props.multiple && Array.isArray(selectedItem.value) && (selectedItem.value as unknown[]).length > 0
 	})
 
+	const hasSingleSelection = computed(() => {
+		return !props.multiple && selectedItem.value !== null && selectedItem.value !== undefined && selectedItemText.value !== ''
+	})
+
 	const hasSelectionToClear = computed(() => {
 		return props.multiple
 			? (((selectedItem.value as unknown[] | null | undefined)?.length) ?? 0) > 0
 			: selectedItem.value != null
 	})
 
+	const isFieldActive = computed(() => {
+		return hasChips.value
+			|| hasMultipleSelections.value
+			|| hasSingleSelection.value
+			|| isOpen.value
+			|| focused.value
+			|| hasMessages.value
+	})
+
 	const labelWithAsterisk = computed(() => {
 		return isShouldDisplayAsterisk.value ? `${props.label} *` : props.label
 	})
@@ -489,15 +496,14 @@
 	})
 
 	const isRequired = computed(() => {
-		if (props.disableErrorHandling) return false
-		if (props.readonly) return
-		return (props.required || props.errorMessages.length > 0) && !selectedItem.value
+		if (props.readonly) return false
+		return props.required === true
 	})
 
 	// Détecte s'il y a des messages d'erreur, de succès ou d'avertissement
 	const hasMessages = computed(() => {
 		if (props.disableErrorHandling) return false
-		return props.errorMessages.length > 0 || hasError.value
+		return hasError.value || hasWarning.value || hasSuccess.value
 	})
 
 	// Détermine si le helpText doit être affiché à la position du message ou en dessous
@@ -507,8 +513,28 @@
 	})
 
 	const showHelpTextBelow = computed(() => {
-		// Afficher en dessous si il y a des messages d'erreur ET hideMessages n'est pas activé
-		return props.helpText && hasMessages.value && !props.hideMessages
+		// Afficher en dessous si il y a des messages d'erreur ET hideDetails n'est pas activé
+		return props.helpText && hasMessages.value && !props.hideDetails
+	})
+
+	// Ici on calcule dynamiquement la liste des ids à rattacher à l'input :
+	const describedByIds = computed(() => {
+		const ids: string[] = []
+
+		// help text / hint
+		if ((showHelpTextAsMessage.value || showHelpTextBelow.value) && props.helpText) {
+			ids.push(helpTextId.value)
+		}
+		// messages affichés
+		if (!props.hideDetails && hasMessages.value) {
+			ids.push(messagesId.value)
+		}
+		// live region si erreur
+		if (hasError.value || errors.value.length > 0) {
+			ids.push(liveRegionId.value)
+		}
+
+		return ids.join(' ')
 	})
 
 	const calculatedWidth = computed(() => {
@@ -533,6 +559,22 @@
 		return (rootEl.querySelector('.v-field') as HTMLElement | null) ?? rootEl
 	})
 
+	const formattedErrorMessages = computed(() => errors.value.join(' '))
+
+	const liveRegionMessage = computed(() => {
+		if (!hasError.value) return ''
+
+		return formattedErrorMessages.value || 'Le champ contient une erreur.'
+	})
+
+	const validationIcon = computed(() => {
+		if (props.useVuetifyValidation) return null
+		if (hasError.value) return mdiAlertCircle
+		if (hasWarning.value) return mdiAlertOutline
+		if (hasSuccess.value) return mdiCheck
+		return null
+	})
+
 	watch(() => props.modelValue, (newValue) => {
 		selectedItem.value = newValue
 	})
@@ -653,42 +695,38 @@
 		}
 	}
 
-	watch([isOpen, hasError], ([newIsOpen, newHasError]) => {
-		if (!newIsOpen) {
-			if (props.disableErrorHandling || props.readonly) {
-				hasError.value = false
-			}
-			else {
-				hasError.value = (!selectedItem.value && isRequired.value) || props.errorMessages.length > 0
-			}
-		}
-		else {
-			hasError.value = newHasError
-		}
-	})
-
-	watch(() => props.errorMessages, (newValue) => {
-		if (!props.disableErrorHandling) {
-			hasError.value = newValue.length > 0
-		}
-	})
-
 	const ariaManager = {
 		cleanInputAttributes(inputElement: HTMLElement): void {
 			if (!inputElement) return
-
-			inputElement.removeAttribute('aria-describedby')
 			inputElement.removeAttribute('size')
 			inputElement.removeAttribute('tabindex')
 			inputElement.removeAttribute('aria-hidden')
+			inputElement.removeAttribute('aria-owns')
 		},
 
-		updateInputState(inputElement: HTMLElement, isOpenValue: boolean, menuId: string, activeDescendant?: string): void {
+		updateInputState(
+			inputElement: HTMLElement,
+			isOpenValue: boolean,
+			menuId: string,
+			activeDescendant?: string,
+			describedBy?: string,
+		): void {
 			if (!inputElement) return
+			inputElement.removeAttribute('aria-owns')
 
 			inputElement.setAttribute('role', 'combobox')
 			inputElement.setAttribute('aria-expanded', isOpenValue ? 'true' : 'false')
 			inputElement.setAttribute('aria-haspopup', 'listbox')
+			// On ajoute aria-autocomplete="list" pour le role combobox
+			inputElement.setAttribute('aria-autocomplete', 'list')
+
+			// On rattache aria-describedby à l'input
+			if (describedBy && describedBy.trim().length > 0) {
+				inputElement.setAttribute('aria-describedby', describedBy)
+			}
+			else {
+				inputElement.removeAttribute('aria-describedby')
+			}
 
 			if (isOpenValue) {
 				inputElement.setAttribute('aria-controls', menuId)
@@ -697,6 +735,7 @@
 				inputElement.removeAttribute('aria-controls')
 			}
 
+			// aria-activedescendant sur l'input
 			if (isOpenValue && activeDescendant) {
 				inputElement.setAttribute('aria-activedescendant', activeDescendant)
 			}
@@ -715,12 +754,7 @@
 				inputElement.removeAttribute('aria-required')
 			}
 
-			if (hasErrorValue) {
-				inputElement.setAttribute('aria-invalid', 'true')
-			}
-			else {
-				inputElement.removeAttribute('aria-invalid')
-			}
+			inputElement.setAttribute('aria-invalid', hasErrorValue ? 'true' : 'false')
 		},
 
 		cleanParentAttributes(parentElement: HTMLElement): void {
@@ -755,7 +789,14 @@
 
 		if (inputElement) {
 			ariaManager.cleanInputAttributes(inputElement)
-			ariaManager.updateInputState(inputElement, isOpen.value, uniqueMenuId.value, activeDescendantId.value)
+			ariaManager.updateInputState(
+				inputElement,
+				isOpen.value,
+				uniqueMenuId.value,
+				activeDescendantId.value,
+				// On injecte ici les ids calculés pour aria-describedby,
+				describedByIds.value,
+			)
 			ariaManager.updateValidationAttributes(inputElement, Boolean(isRequired.value), Boolean(hasError.value))
 		}
 
@@ -788,11 +829,21 @@
 		})
 	})
 
-	watch(isOpen, () => {
-		nextTick(() => {
-			if (!textInput.value || !textInput.value.$el) return
-			setupAriaAttributes()
-		})
+	watch(isOpen, async (newValue) => {
+		await nextTick()
+
+		focused.value = newValue
+
+		if (!textInput.value || !textInput.value.$el) return
+
+		setupAriaAttributes()
+
+		if (newValue) {
+			updateMenuAccessibility()
+		}
+		else {
+			focusInput()
+		}
 	})
 
 	watch(activeDescendantId, (newValue) => {
@@ -834,25 +885,6 @@
 		})
 	}, { deep: true })
 
-	// Méthode de validation pour l'enregistrement avec le système de validation du formulaire
-	const validateOnSubmit = (): boolean => {
-		// Si en mode readonly ou si la gestion d'erreur est désactivée, toujours valide
-		if (props.readonly || props.disableErrorHandling) {
-			return true
-		}
-
-		// Vérifier si une valeur est sélectionnée quand le champ est requis
-		const isValid = !isRequired.value
-
-		// Mettre à jour l'état d'erreur
-		hasError.value = !isValid || props.errorMessages.length > 0
-
-		return isValid
-	}
-
-	// Intégration avec le système de validation du formulaire
-	useValidatable(validateOnSubmit)
-
 	watch(isOpen, () => {
 		nextTick(() => {
 			updateMenuMinWidth()
@@ -867,9 +899,34 @@
 	defineExpose({
 		isOpen,
 		closeList,
-		validateOnSubmit,
+		validateOnSubmit: validate,
 	})
 
+	// on reprend la mm methode que pour le datepicker : useDatePickerAccesssibity (updateAccessibility)
+	const updateMenuAccessibility = async (): Promise<void> => {
+		await nextTick()
+
+		const listElement = list.value?.$el as HTMLElement | null
+		if (!listElement) return
+
+		listElement.setAttribute('role', 'listbox')
+		if (props.multiple) {
+			listElement.setAttribute('aria-multiselectable', 'true')
+		}
+		else {
+			listElement.removeAttribute('aria-multiselectable')
+		}
+		listElement.setAttribute('aria-labelledby', overlayLabelId.value)
+	}
+
+	const focusInput = () => {
+		// eviter un focus inutile si le composant est disebled ou readonly
+		if (props.disabled || props.readonly) return
+
+		const inputElement = textInput.value?.$el?.querySelector('input') as HTMLInputElement | null
+		inputElement?.focus()
+	}
+
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	function initializeActivatorProps(activatorProps: Record<string, any>) {
 		const onFocus = (event: FocusEvent) => {
@@ -925,24 +982,31 @@
 						:id="inputId"
 						v-model="selectedItemText"
 						v-click-outside="closeList"
-						:title="$attrs['aria-label'] || labelWithAsterisk"
+						:title="accessibleLabel"
 						:color="props.color"
 						:disabled="disabled"
 						:label="labelWithAsterisk"
-						:aria-label="$attrs['aria-label'] || labelWithAsterisk"
-						:error-messages="props.disableErrorHandling ? [] : errorMessages"
+						:aria-label="accessibleLabel"
+						:error="hasError"
+						:error-messages="errors"
+						:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : undefined))"
 						:variant="variant"
-						:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
 						:bg-color="props.bgColor"
 						:density="props.density"
-						:active="hasChips || hasMultipleSelections || isOpen"
+						:active="isFieldActive"
 						readonly
-						:hide-details="props.hideMessages && !showHelpTextAsMessage"
+						:hide-details="props.hideDetails && !showHelpTextAsMessage"
 						:hint="showHelpTextAsMessage ? props.helpText : ''"
 						:persistent-hint="!!showHelpTextAsMessage"
 						:autocomplete="props.autocomplete"
 						:width="calculatedWidth"
-						:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"
+						:style="hasError ? { minWidth: `${labelWidth + 18}px`} : { minWidth: `${labelWidth}px` }"
+						:class="{
+							'error-field': hasError,
+							'warning-field': hasWarning,
+							'success-field': hasSuccess,
+							'basic-field': !hasError && !hasWarning && !hasSuccess,
+						}"
 						v-bind="{
 							...Object.fromEntries(Object.entries($attrs).filter(([key]) => key !== 'display-asterisk')),
 							...initializeActivatorProps(activatorProps),
@@ -978,6 +1042,7 @@
 								{{ getChipText(item) }}
 							</VChip>
 						</div>
+
 						<template v-else-if="hasMultipleSelections">
 							<span
 								v-for="item in (selectedItem as unknown[])"
@@ -987,6 +1052,7 @@
 								{{ getChipText(item) }}
 							</span>
 						</template>
+
 						<!-- Prepend -->
 						<template
 							v-if="$slots.prepend || props.prependIcon || props.prependTooltip"
@@ -1032,21 +1098,21 @@
 								/>
 							</IconSlot>
 						</template>
+
 						<template #append-inner>
 							<SyIcon
-								v-if="hasError"
+								v-if="validationIcon"
 								class="mr-6"
-								color="error"
-								:icon="mdiAlertCircle"
-								:decorative="false"
-								label="Information"
-								role="img"
+								:color="hasError ? 'error' : (hasWarning ? 'warning' : 'success')"
+								:icon="validationIcon"
+								:decorative="true"
+								role="presentation"
 							/>
 							<button
 								v-if="props.clearable && hasSelectionToClear"
 								type="button"
 								class="sy-select__clear-button"
-								:style="{ right: hasError ? '62px' : '42px' }"
+								:style="{ right: (hasError || hasWarning || hasSuccess) ? '62px' : '42px' }"
 								:aria-label="locales.clear"
 								@keydown.enter.prevent="$event => selectItem(null, $event)"
 								@keydown.space.prevent="$event => selectItem(null, $event)"
@@ -1071,18 +1137,30 @@
 					class="hidden-label"
 				>{{ label }}</span>
 			</template>
+
+			<!--
+				Libellé caché utilisé pour nommer la popup/grid.
+			-->
+			<span
+				:id="overlayLabelId"
+				class="d-sr-only"
+			>
+				{{ accessibleLabel }}
+			</span>
+
 			<VList
 				:id="uniqueMenuId"
 				ref="list"
-				class="v-list"
+				class="v-list sy-select-grid"
 				role="listbox"
-				:aria-label="$attrs['aria-label'] || labelWithAsterisk"
-				:title="$attrs['aria-label'] || labelWithAsterisk"
+				:aria-multiselectable="props.multiple ? 'true' : undefined"
+				:aria-labelledby="overlayLabelId"
+				:title="accessibleLabel"
 				:style="{
 					minWidth: `${textInput?.$el.offsetWidth}px`
 				}"
 				bg-color="white"
-				tabindex="0"
+				tabindex="-1"
 				@keydown.esc.prevent="closeList"
 				@keydown.tab="handleTabKey"
 				@keydown.enter.prevent="handleEnterKey"
@@ -1094,50 +1172,82 @@
 				@keydown.page-down.prevent="handlePageDownKey"
 				@click.stop
 			>
-				<VListItem
+				<div
 					v-for="(item, index) in formattedItems"
 					:id="`option-${index}`"
 					:key="index"
 					:ref="'options-' + index"
 					role="option"
-					class="v-list-item"
-					:aria-selected="isItemSelected(item) ? 'true' : 'false'"
+					:aria-selected="isItemSelected(item)"
+					class="v-list-item sy-select-grid__row"
 					tabindex="-1"
-					:class="{ active: isItemSelected(item) || `option-${index}` === activeDescendantId }"
+					:class="{
+						active: isItemSelected(item) || `option-${index}` === activeDescendantId,
+						'v-list-item--selected': isItemSelected(item),
+					}"
 					@click.stop="(event) => selectItem(item, event)"
+					@keydown.enter.prevent="(event) => selectItem(item, event)"
+					@keydown.space.prevent="(event) => selectItem(item, event)"
 				>
-					<template
+					<div
 						v-if="props.multiple && !isDefaultOption(item)"
-						#prepend
+						class="sy-select-grid__cell sy-select-grid__cell--checkbox"
+						aria-hidden="true"
 					>
 						<SyCheckbox
 							:model-value="isItemSelected(item)"
-							density="compact"
-							hide-details
+							decorative
 							color="primary"
-							class="mt-0 pt-0 mr-1"
-							:title="getItemText(item)"
-							:aria-label="getItemText(item)"
-							@click.stop="(event) => selectItem(item, event)"
-						/>
-					</template>
-					<VListItemTitle>
-						<span
-							v-if="allowHtml"
-							ref="htmlItemRefs"
-							class="item-text"
+							class="mt-0 pt-0 mr-1 pointer-events-none"
 						/>
-						<span
-							v-else
-							class="item-text"
-						>
-							{{ getItemText(item) }}
-						</span>
-					</VListItemTitle>
-				</VListItem>
+					</div>
+
+					<div
+						class="sy-select-grid__cell sy-select-grid__cell--label"
+					>
+						<VListItemTitle>
+							<span
+								v-if="allowHtml"
+								ref="htmlItemRefs"
+								class="item-text"
+							/>
+							<span
+								v-else
+								class="item-text"
+							>
+								{{ getItemText(item) }}
+							</span>
+						</VListItemTitle>
+					</div>
+				</div>
 			</VList>
 		</VMenu>
 
+		<div
+			v-if="(showHelpTextAsMessage || showHelpTextBelow) && props.helpText"
+			:id="helpTextId"
+			class="d-sr-only"
+		>
+			{{ props.helpText }}
+		</div>
+
+		<div
+			v-if="!props.hideDetails && hasMessages"
+			:id="messagesId"
+			class="d-sr-only"
+		>
+			{{ hasError ? errors.join(' ') : (hasWarning ? warnings.join(' ') : successes.join(' ')) }}
+		</div>
+
+		<div
+			:id="liveRegionId"
+			class="d-sr-only"
+			aria-live="polite"
+			aria-atomic="true"
+		>
+			{{ liveRegionMessage }}
+		</div>
+
 		<div
 			v-if="showHelpTextBelow"
 			class="help-text-below px-4 mt-1"
@@ -1165,12 +1275,123 @@
 
 	:deep(.v-input__prepend .v-icon:focus-visible),
 	:deep(.v-input__append .v-icon:focus-visible) {
-		outline: 2px solid rgb(var(--v-theme-accentPrimary));
+		outline: 2px solid rgb(var(--v-theme-borderAccentPrimary));
 		outline-offset: 2px;
 		opacity: 1;
 	}
 }
 
+.warning-field {
+	:deep(.v-icon__svg) {
+		fill: rgb(var(--v-theme-textWarning)) !important;
+	}
+
+	:deep(.v-icon.arrow) {
+		color: rgb(var(--v-theme-iconBase)) !important;
+	}
+
+	:deep(.v-icon.arrow .v-icon__svg) {
+		fill: rgb(var(--v-theme-iconBase)) !important;
+	}
+
+	:deep(.sy-select__clear-icon .v-icon__svg) {
+		fill: rgb(var(--v-theme-iconBase)) !important;
+	}
+
+	:deep(.v-field) {
+		color: rgb(var(--v-theme-borderWarning)) !important;
+
+		--v-medium-emphasis-opacity: 1;
+
+		.v-field__outline {
+			--v-field-border-opacity: 1;
+
+			color: rgb(var(--v-theme-borderWarning)) !important;
+		}
+	}
+
+	:deep(.v-messages) {
+		opacity: 1 !important;
+
+		.v-messages__message {
+			color: rgb(var(--v-theme-borderWarning)) !important;
+		}
+	}
+}
+
+.error-field {
+	:deep(.v-field) {
+		color: rgb(var(--v-theme-borderError)) !important;
+
+		.v-field__outline {
+			--v-field-border-opacity: 1;
+
+			color: rgb(var(--v-theme-borderError)) !important;
+		}
+	}
+
+	:deep(.v-messages) {
+		opacity: 1 !important;
+
+		.v-messages__message {
+			color: rgb(var(--v-theme-borderError)) !important;
+		}
+	}
+
+	:deep(.v-icon.arrow) {
+		color: rgb(var(--v-theme-iconSubdued)) !important;
+	}
+
+	:deep(.v-icon.arrow .v-icon__svg) {
+		fill: rgb(var(--v-theme-iconSubdued)) !important;
+	}
+}
+
+.success-field {
+	:deep(.v-icon__svg) {
+		fill: rgb(var(--v-theme-textSuccess)) !important;
+	}
+
+	:deep(.v-icon.arrow) {
+		color: rgb(var(--v-theme-iconBase)) !important;
+	}
+
+	:deep(.v-icon.arrow .v-icon__svg) {
+		fill: rgb(var(--v-theme-iconBase)) !important;
+	}
+
+	:deep(.sy-select__clear-icon .v-icon__svg) {
+		fill: rgb(var(--v-theme-iconBase)) !important;
+	}
+
+	:deep(.v-field) {
+		color: rgb(var(--v-theme-borderSuccess)) !important;
+
+		--v-medium-emphasis-opacity: 1;
+
+		.v-field__outline {
+			--v-field-border-opacity: 1;
+
+			color: rgb(var(--v-theme-borderSuccess)) !important;
+		}
+	}
+
+	:deep(.v-messages) {
+		opacity: 1 !important;
+
+		.v-messages__message {
+			color: rgb(var(--v-theme-borderSuccess)) !important;
+		}
+	}
+}
+
+.basic-field {
+	:deep(.v-field--focused .v-field__outline) {
+		color: rgb(var(--v-theme-borderAccentPrimary)) !important;
+		opacity: 1 !important;
+	}
+}
+
 .v-field {
 	position: relative;
 }
@@ -1185,7 +1406,7 @@
 	background-color: rgb(0 0 0 / 4%);
 }
 
-.v-list-item[aria-selected='true'] {
+.v-list-item--selected {
 	background-color: rgb(0 0 0 / 8%);
 }
 
@@ -1195,7 +1416,7 @@
 
 .help-text {
 	color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-	font-size: 14px;
+	font-size: var(--v-fontSize-liensEtLibelles);
 	line-height: 1.2;
 }
 
@@ -1205,7 +1426,7 @@
 
 .help-text-below {
 	color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-	font-size: 14px;
+	font-size: var(--v-fontSize-liensEtLibelles);
 	line-height: 1.2;
 }
 
@@ -1216,7 +1437,7 @@
 /* Ensure focus styles match selection styles for keyboard navigation */
 .v-list-item:focus-visible,
 .v-list-item.keyboard-focused {
-	outline: 2px solid rgb(var(--v-theme-accentPrimary));
+	outline: 2px solid rgb(var(--v-theme-borderAccentPrimary));
 	outline-offset: -2px;
 	background-color: rgb(0 0 0 / 8%);
 }
@@ -1243,7 +1464,6 @@
 .v-icon.arrow {
 	position: absolute;
 	right: 10px;
-	color: rgb(var(--v-theme-iconBase));
 }
 
 .sy-select__clear-icon {
@@ -1320,4 +1540,29 @@
 	position: absolute;
 	z-index: -1;
 }
+
+.sy-select-grid__row {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	align-items: center;
+}
+
+.sy-select-grid__cell {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+}
+
+.sy-select-grid__cell--checkbox {
+	padding-right: 4px;
+}
+
+.sy-select-grid__cell--label {
+	padding-right: 16px;
+	min-width: 0;
+}
+
+.pointer-events-none {
+	pointer-events: none;
+}
 </style>