@cnamts/synapse 1.0.19 → 1.0.20

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

@@ -0,0 +1,180 @@
+/**
+ * Shared ARIA helper used by SySelect and future picker components (autocomplete…)
+ */
+import { nextTick, type Ref } from 'vue'
+
+export const ariaManager = {
+	// Pour cleaner les attrs ARIA de l'input avant de les maj
+	cleanInputAttributes(inputElement: HTMLElement): void {
+		if (!inputElement) return
+
+		inputElement.removeAttribute('aria-describedby')
+		inputElement.removeAttribute('size')
+		inputElement.removeAttribute('tabindex')
+		inputElement.removeAttribute('aria-hidden')
+		inputElement.removeAttribute('aria-autocomplete')
+		inputElement.removeAttribute('aria-owns')
+		inputElement.removeAttribute('aria-busy')
+	},
+
+	// Pour maj l'état ARIA de l'input combobox en fonction de l'ouverture du menu
+	updateInputState(
+		inputElement: HTMLElement,
+		isOpenValue: boolean,
+		menuId: string,
+		activeDescendant?: string,
+		options?: {
+			ariaAutocomplete?: 'list' | 'both' | 'inline' | 'none'
+			ownsId?: string
+			isBusy?: boolean
+			popupRendered?: boolean
+		},
+	): void {
+		if (!inputElement) return
+
+		inputElement.setAttribute('role', 'combobox')
+		if (options?.ariaAutocomplete) {
+			inputElement.setAttribute('aria-autocomplete', options.ariaAutocomplete)
+		}
+
+		if (options?.popupRendered) {
+			inputElement.setAttribute('aria-controls', menuId)
+		}
+		else {
+			inputElement.removeAttribute('aria-controls')
+		}
+		inputElement.setAttribute('aria-expanded', isOpenValue ? 'true' : 'false')
+
+		const hasPopup = options?.popupRendered !== false
+		if (hasPopup) {
+			if (options?.ownsId) {
+				inputElement.setAttribute('aria-owns', options.ownsId)
+			}
+			else {
+				inputElement.removeAttribute('aria-owns')
+			}
+			if (options?.isBusy) {
+				inputElement.setAttribute('aria-busy', 'true')
+			}
+			else {
+				inputElement.removeAttribute('aria-busy')
+			}
+		}
+
+		if (isOpenValue && activeDescendant) {
+			inputElement.setAttribute('aria-activedescendant', activeDescendant)
+		}
+		else {
+			inputElement.removeAttribute('aria-activedescendant')
+		}
+	},
+
+	// Pour indiquer les états de validation (requis, erreur) via ARIA
+	updateValidationAttributes(
+		inputElement: HTMLElement,
+		isRequiredValue: boolean,
+		hasErrorValue: boolean,
+	): void {
+		if (!inputElement) return
+
+		if (isRequiredValue) {
+			inputElement.setAttribute('aria-required', 'true')
+		}
+		else {
+			inputElement.removeAttribute('aria-required')
+		}
+
+		if (hasErrorValue) {
+			inputElement.setAttribute('aria-invalid', 'true')
+		}
+		else {
+			inputElement.removeAttribute('aria-invalid')
+		}
+	},
+
+	// Pour cleaner les attrs ARIA du parent avant de les reconfigurer ds le composant
+	cleanParentAttributes(parentElement: HTMLElement): void {
+		if (!parentElement) return
+
+		parentElement.removeAttribute('role')
+		parentElement.removeAttribute('aria-expanded')
+		parentElement.removeAttribute('aria-controls')
+		parentElement.removeAttribute('aria-haspopup')
+		parentElement.removeAttribute('aria-activedescendant')
+		parentElement.removeAttribute('aria-required')
+		parentElement.removeAttribute('aria-invalid')
+		parentElement.removeAttribute('aria-hidden')
+	},
+
+	cleanAlertAttributes(parentElement: HTMLElement): void {
+		if (!parentElement) return
+		const messagesElements = parentElement.querySelectorAll('[role="alert"]')
+		messagesElements.forEach((element: Element) => {
+			element.removeAttribute('role')
+			element.removeAttribute('aria-live')
+		})
+	},
+
+	setupAriaAttributesForAutocomplete(
+	/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+		textFieldRef: Ref<any>,
+		isOpen: Ref<boolean>,
+		menuId: string,
+		activeDescendant: Ref<string>,
+		loading: boolean,
+		inputLabel?: string,
+	): void {
+		nextTick(() => {
+			const tf = textFieldRef.value
+			if (!tf?.$el) return
+
+			const parentEl = tf.$el as HTMLElement
+			const inputEl = parentEl.querySelector('input') as HTMLElement | null
+			const popupRendered = Boolean(document.getElementById(menuId))
+
+			if (inputEl) {
+				ariaManager.cleanInputAttributes(inputEl)
+				ariaManager.updateInputState(
+					inputEl,
+					isOpen.value,
+					menuId,
+					activeDescendant.value,
+					{
+						ariaAutocomplete: 'list',
+						isBusy: loading,
+						popupRendered,
+					},
+				)
+				const labelToApply = inputLabel || inputEl.getAttribute('aria-label') || inputEl.getAttribute('placeholder') || ''
+				if (labelToApply) {
+					inputEl.setAttribute('aria-label', labelToApply)
+				}
+				inputEl.setAttribute('aria-haspopup', 'listbox')
+				if (!popupRendered) {
+					inputEl.removeAttribute('aria-controls')
+					if (isOpen.value) {
+						nextTick(() => {
+							const popupNowRendered = Boolean(document.getElementById(menuId))
+							if (popupNowRendered) {
+								inputEl.setAttribute('aria-controls', menuId)
+							}
+						})
+					}
+				}
+				ariaManager.updateValidationAttributes(inputEl, false, false)
+				nextTick(() => {
+					const popupStillThere = Boolean(document.getElementById(menuId))
+					if (popupStillThere) {
+						inputEl.setAttribute('aria-controls', menuId)
+					}
+					else {
+						inputEl.removeAttribute('aria-controls')
+					}
+				})
+			}
+
+			ariaManager.cleanParentAttributes(parentEl)
+			ariaManager.cleanAlertAttributes(parentEl)
+		})
+	},
+}

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

@@ -0,0 +1,46 @@
+import type { ComputedRef } from 'vue'
+import type { ItemType } from '../types'
+
+interface ItemUtilsProps {
+	textKey: string
+	valueKey: string
+	plainTextKey: string
+	returnObject: boolean
+}
+
+export function useItemUtils(props: ItemUtilsProps, formattedItems: ComputedRef<ItemType[]>) {
+	const getItemText = (item: unknown) => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		return (item as Record<string, any>)[props.textKey]
+	}
+
+	const getPlainText = (item: ItemType): string => {
+		if (props.plainTextKey && item[props.plainTextKey]) return String(item[props.plainTextKey] ?? '')
+		return String(item[props.textKey] ?? '')
+	}
+
+	const getValueKey = (item: ItemType | string | number): string | number =>
+		typeof item === 'object'
+			? item[props.valueKey] as string | number
+			: item
+
+	const getStoredValue = (item: ItemType | string | number) =>
+		props.returnObject ? item : getValueKey(item)
+
+	const getChipLabel = (chip: ItemType | string | number): string => {
+		if (props.returnObject && typeof chip === 'object' && chip !== null) {
+			return getPlainText(chip as ItemType)
+		}
+		const found = formattedItems.value.find(i => i[props.valueKey] === chip)
+		if (found) return getPlainText(found)
+		return String(chip ?? '')
+	}
+
+	return {
+		getItemText,
+		getPlainText,
+		getValueKey,
+		getStoredValue,
+		getChipLabel,
+	}
+}

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

@@ -0,0 +1,107 @@
+import { nextTick, type Ref, type ComputedRef } from 'vue'
+import { useSySelectKeyboard } from '@/components/Customs/Selects/SySelect/composables/useSySelectKeyboard'
+import type { ItemType, SelectValue, SelectArray } from '../types'
+
+interface KeyboardHandlerProps {
+	multiple: boolean
+	chips: boolean
+}
+
+interface KeyboardHandlerDeps {
+	search: Ref<string>
+	selected: Ref<SelectValue | SelectArray>
+	isOpen: Ref<boolean>
+	selectItem: (item: ItemType | string | number | null | undefined) => void
+	getItemText: (item: unknown) => unknown
+	filteredItems: ComputedRef<ItemType[]>
+	uniqueMenuId: Ref<string>
+	focusListItem: boolean
+}
+
+export function useSyAutocompleteKeyboard(
+	props: KeyboardHandlerProps,
+	deps: KeyboardHandlerDeps,
+) {
+	const {
+		activeDescendantId: keyboardActiveId,
+		handleEnterKey,
+		handleDownKey,
+		handleUpKey,
+		handleEscapeKey,
+		handleHomeKey,
+		handleEndKey,
+		handlePageUpKey,
+		handlePageDownKey,
+		handleTabKey,
+	} = useSySelectKeyboard({
+		isOpen: deps.isOpen,
+		formattedItems: deps.filteredItems,
+		toggleMenu: () => { deps.isOpen.value = !deps.isOpen.value },
+		selectItem: deps.selectItem,
+		getItemText: deps.getItemText,
+		optionIdPrefix: `${deps.uniqueMenuId.value}-option`,
+		focusListItem: deps.focusListItem,
+	})
+
+	const keydownAdded = new WeakMap<HTMLInputElement, boolean>()
+
+	const handleKeydown = (e: KeyboardEvent) => {
+		const key = e.key
+		if (['ArrowUp', 'ArrowDown', 'Enter', 'Escape', 'Home', 'End', 'PageUp', 'PageDown'].includes(key)) {
+			e.preventDefault()
+			const handlers: Record<string, () => void> = {
+				ArrowUp: handleUpKey,
+				ArrowDown: handleDownKey,
+				Enter: handleEnterKey,
+				Escape: handleEscapeKey,
+				Home: handleHomeKey,
+				End: handleEndKey,
+				PageUp: handlePageUpKey,
+				PageDown: handlePageDownKey,
+			}
+			handlers[key]?.()
+		}
+		else if (key === 'Backspace' || key === 'Delete') {
+			if (deps.search.value === '' && props.multiple && props.chips && Array.isArray(deps.selected.value) && deps.selected.value.length > 0) {
+				e.preventDefault()
+				const lastItem = deps.selected.value[deps.selected.value.length - 1]
+				deps.selectItem(lastItem)
+			}
+		}
+	}
+
+	const focusInput = (textFieldRef: Ref<{ $el?: HTMLElement, $refs?: { input?: HTMLInputElement } } | null>, noFocus = false) => {
+		nextTick(() => {
+			const tf = textFieldRef.value
+			const el = tf?.$el as HTMLElement | null
+			const inputFromRefs = (tf?.$refs?.input ?? null) as HTMLInputElement | null
+			const byId = document.getElementById(`${deps.uniqueMenuId.value}-input`) as HTMLInputElement | null
+			const inputEl: HTMLInputElement | null = inputFromRefs ?? byId ?? (el?.querySelector('input') as HTMLInputElement | null)
+			if (inputEl) {
+				if (!noFocus) {
+					inputEl.focus()
+					if (props.multiple && !props.chips) {
+						// Position cursor at the end for multiple selection
+						const len = inputEl.value?.length ?? 0
+						inputEl.setSelectionRange(len, len)
+					}
+					else {
+						const len = inputEl.value?.length ?? 0
+						inputEl.setSelectionRange(len, len)
+					}
+				}
+				if (!keydownAdded.get(inputEl)) {
+					inputEl.addEventListener('keydown', handleKeydown)
+					keydownAdded.set(inputEl, true)
+				}
+			}
+		})
+	}
+
+	return {
+		handleKeydown,
+		focusInput,
+		keyboardActiveId,
+		handleTabKey,
+	}
+}

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

@@ -0,0 +1,74 @@
+import type { Ref } from 'vue'
+import type { ItemType, SelectValue, SelectArray } from '../types'
+
+interface SelectionLogicProps {
+	multiple: boolean
+	returnObject: boolean
+	valueKey: string
+}
+
+type EmitFunction = (event: 'update:modelValue', value: SelectValue | SelectArray) => void
+
+export function useSelectionLogic(
+	props: SelectionLogicProps,
+	getValueKey: (item: ItemType | string | number) => string | number,
+	getStoredValue: (item: ItemType | string | number) => ItemType | string | number,
+	getPlainText: (item: ItemType) => string,
+	selected: Ref<SelectValue | SelectArray>,
+	search: Ref<string>,
+	emit: EmitFunction,
+) {
+	const resetValue = () => {
+		if (props.multiple) {
+			selected.value = []
+			emit('update:modelValue', [])
+		}
+		else {
+			selected.value = null
+			search.value = ''
+			emit('update:modelValue', null)
+		}
+	}
+
+	const updateMultipleSelection = (valueKeyValue: string | number, valueToStore: ItemType | string | number) => {
+		const arr: (ItemType | string | number)[] = Array.isArray(selected.value) ? [...selected.value] : []
+		const index = arr.findIndex(val =>
+			props.returnObject
+				? (val as ItemType)[props.valueKey] === valueKeyValue
+				: val === valueKeyValue,
+		)
+		if (index >= 0) {
+			arr.splice(index, 1)
+		}
+		else {
+			arr.push(valueToStore)
+		}
+		selected.value = arr as SelectArray
+		emit('update:modelValue', arr as SelectArray)
+	}
+
+	const updateSingleSelection = (valueToStore: SelectValue, item: ItemType) => {
+		selected.value = valueToStore
+		search.value = getPlainText(item)
+		emit('update:modelValue', selected.value)
+	}
+
+	const updateValue = (item: ItemType | string | number | null) => {
+		if (item === null) {
+			resetValue()
+			return
+		}
+
+		const valueKeyValue = getValueKey(item)
+		const valueToStore = getStoredValue(item)
+
+		if (props.multiple) {
+			updateMultipleSelection(valueKeyValue, valueToStore)
+		}
+		else {
+			updateSingleSelection(valueToStore as SelectValue, item as ItemType)
+		}
+	}
+
+	return { updateValue }
+}

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

@@ -4,6 +4,7 @@
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import defaultOptions from './config'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<CustomizableOptions & {
 		modelValue?: Record<string, unknown> | string | null
@@ -253,21 +254,24 @@
 			@keydown.space.prevent="toggleMenu"
 		>
 			<span :class="{ 'error--text': hasError }">{{ selectedItemText }}</span>
-			<VIcon
+			<SyIcon
 				v-if="hasError"
 				class="ml-2"
 				color="error"
-			>
-				{{ mdiInformation }}
-			</VIcon>
-			<VIcon> {{ mdiChevronDown }}</VIcon>
-			<VIcon
+				:icon="mdiInformation"
+				decorative
+			/>
+			<SyIcon
+				:icon="mdiChevronDown"
+				decorative
+			/>
+			<SyIcon
 				v-if="selectedItemText && props.clearable"
+				:icon="mdiCloseCircle"
 				aria-label="Supprimer"
+				role="button"
 				@click.stop.prevent="selectItem(null)"
-			>
-				{{ mdiCloseCircle }}
-			</VIcon>
+			/>
 		</div>
 		<VList
 			v-if="isOpen"

package/src/components/Customs/Selects/SyInputSelect/accessibilite/Accessibility.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../SyInputSelect.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>
+
+<br />

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 import SyAlert from '../../../SyAlert/SyAlert.vue'
-import { VBtn, VMenu, VList, VListItem, VListItemTitle, VForm } from 'vuetify/components'
+import SyForm from '../../SyForm/SyForm.vue'
+import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
 import { ref } from 'vue'
 import { fn } from '@storybook/test'
 
@@ -136,16 +137,16 @@ export const Default: Story = {
 					import { SySelect } from '@cnamts/synapse'
 					
 					const items =  [
-						{ text: 'Adrien', value: 'Adrien' },
-						{ text: 'Axel', value: 'Axel' },
-						{ text: 'Baptiste', value: 'Baptiste' },
-						{ text: 'Clement', value: 'Clement' },
-						{ text: 'Corentin', value: 'Corentin' },
-						{ text: 'Damien', value: 'Damien' },
-						{ text: 'David', value: 'David' },
-						{ text: 'Eloi', value: 'Eloi' },
-						{ text: 'Louis', value: 'Louis' },
-						{ text: 'Valentin', value: 'Valentin' },
+						{ text: 'Lorem Ipsum is simply dummy text of the printing and typesetting', value: 'Adrien' },
+						{ text: 'Industry. Lorem Ipsum has been the industry's standard dummy', value: 'Axel' },
+						{ text: 'Text ever since the 1500s, when an unknown printer took a galley', value: 'Baptiste' },
+						{ text: 'Of type and scrambled it to make a type specimen book. It has', value: 'Clement' },
+						{ text: 'Survived not only five centuries, but also the leap into electronic', value: 'Corentin' },
+						{ text: 'Cum haec taliaque sollicitas eius aures everberarent ', value: 'Damien' },
+						{ text: 'Expositas semper eius modi rumoribus et patentes, varia ', value: 'David' },
+						{ text: 'Expositas semper eius modi rumoribus et patentes, varia', value: 'Eloi' },
+						{ text: 'Emensis itaque difficultatibus multis et nive obrutis callibus', value: 'Louis' },
+						{ text: 'Plurimis ubi prope Rauracum ventum est ad supercilia', value: 'Valentin' },
 					],
 				</script>
 				`,
@@ -154,16 +155,16 @@ export const Default: Story = {
 	},
 	args: {
 		'items': [
-			{ text: 'Adrien', value: 'Adrien' },
-			{ text: 'Axel', value: 'Axel' },
-			{ text: 'Baptiste', value: 'Baptiste' },
-			{ text: 'Clement', value: 'Clement' },
-			{ text: 'Corentin', value: 'Corentin' },
-			{ text: 'Damien', value: 'Damien' },
-			{ text: 'David', value: 'David' },
-			{ text: 'Eloi', value: 'Eloi' },
-			{ text: 'Louis', value: 'Louis' },
-			{ text: 'Valentin', value: 'Valentin' },
+			{ text: 'Lorem Ipsum is simply dummy text of the printing and typesetting', value: 'Adrien' },
+			{ text: 'Industry. Lorem Ipsum has been the industry\'s standard dummy', value: 'Axel' },
+			{ text: 'Text ever since the 1500s, when an unknown printer took a galley', value: 'Baptiste' },
+			{ text: 'Of type and scrambled it to make a type specimen book. It has', value: 'Clement' },
+			{ text: 'Survived not only five centuries, but also the leap into electronic', value: 'Corentin' },
+			{ text: 'Cum haec taliaque sollicitas eius aures everberarent ', value: 'Damien' },
+			{ text: 'Expositas semper eius modi rumoribus et patentes, varia ', value: 'David' },
+			{ text: 'Expositas semper eius modi rumoribus et patentes, varia', value: 'Eloi' },
+			{ text: 'Emensis itaque difficultatibus multis et nive obrutis callibus', value: 'Louis' },
+			{ text: 'Plurimis ubi prope Rauracum ventum est ad supercilia', value: 'Valentin' },
 		],
 		'onUpdate:modelValue': fn(),
 	},
@@ -947,7 +948,7 @@ export const FormValidation: Story = {
 				name: 'Template',
 				code: `
 <template>
-  <VForm @submit.prevent="submitForm">
+  <SyForm @submit="onSubmit">
     <SySelect
       v-model="formData.option"
       :items="options"
@@ -963,7 +964,7 @@ export const FormValidation: Story = {
     >
       Soumettre
     </VBtn>
-  </VForm>
+  </SyForm>
 </template>
         `,
 			},
@@ -972,8 +973,8 @@ export const FormValidation: Story = {
 				code: `
 <script setup lang="ts">
 import { ref } from 'vue'
-import { SySelect } from '@cnamts/synapse'
-import { VBtn, VForm } from 'vuetify/components'
+import { SySelect, SyForm } from '@cnamts/synapse'
+import { VBtn } from 'vuetify/components'
 
 const formData = ref({
   option: ''
@@ -985,9 +986,12 @@ const options = [
   { text: 'Option 3', value: '3' },
 ]
 
-const submitForm = () => {
-  // Traitement du formulaire
-  console.log('Formulaire soumis:', formData.value)
+const onSubmit = (event) => {
+  if (event.isValid) {
+    alert('Formulaire valide : ' + JSON.stringify(formData.value))
+  } else {
+    alert('Formulaire invalide : veuillez choisir une option.')
+  }
 }
 </script>
         `,
@@ -1007,21 +1011,26 @@ const submitForm = () => {
 	},
 	render: (args) => {
 		return {
-			components: { SySelect, VBtn, VForm },
+			components: { SySelect, SyForm, VBtn },
 			setup() {
 				const formData = ref({
 					option: '',
 				})
 
-				const submitForm = () => {
-					console.log('Formulaire soumis:', formData.value)
+				const onSubmit = (event: { isValid: boolean }) => {
+					if (event.isValid) {
+						alert(`Formulaire valide : ${JSON.stringify(formData.value)}`)
+					}
+					else {
+						alert('Formulaire invalide : veuillez choisir une option.')
+					}
 				}
 
-				return { args, formData, submitForm }
+				return { args, formData, onSubmit }
 			},
 			template: `
 				<div class="pa-4">
-					<VForm @submit.prevent="submitForm">
+					<SyForm @submit="onSubmit">
 						<SySelect
 							v-model="formData.option"
 							v-bind="args"
@@ -1034,7 +1043,7 @@ const submitForm = () => {
 						>
 							Soumettre
 						</VBtn>
-					</VForm>
+					</SyForm>
 				</div>
 			`,
 		}

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

@@ -860,6 +860,21 @@
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	function initializeActivatorProps(activatorProps: Record<string, any>) {
+		const onFocus = (event: FocusEvent) => {
+			// Call original onFocus from Vuetify if it exists
+			activatorProps.onFocus?.(event)
+
+			// Prevents text from scrolling to the end on focus in Firefox
+			const target = event.target as HTMLInputElement
+			if (target) {
+				// We need to use a timeout to ensure this runs after Firefox's default behavior
+				setTimeout(() => {
+					target.scrollLeft = 0
+					target.setSelectionRange(0, 0)
+				}, 0)
+			}
+		}
+
 		return {
 			...activatorProps,
 			onKeydown: undefined,
@@ -869,6 +884,7 @@
 				textInput.value = el
 				activatorProps.ref?.(el)
 			},
+			onFocus: onFocus,
 		}
 	}
 </script>
@@ -1230,9 +1246,10 @@
 }
 
 .sy-select :deep(.v-field__input input) {
-	position: absolute;
-	z-index: -1;
+	position: static;
+	z-index: auto;
 	text-overflow: ellipsis;
+	white-space: normal;
 }
 
 .hidden-label {