@cnamts/synapse 1.0.2 → 1.0.4

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

@@ -0,0 +1,272 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { useSySelectKeyboard, type ItemType } from '../useSySelectKeyboard'
+import { ref, nextTick, type Ref } from 'vue'
+
+describe('useSySelectKeyboard', () => {
+	// Mocks et données de test
+	const mockItems = [
+		{ text: 'Apple', value: '1' },
+		{ text: 'Banana', value: '2' },
+		{ text: 'Cherry', value: '3' },
+		{ text: 'Date', value: '4' },
+	]
+
+	// Mocks des fonctions et refs
+	let isOpen: ReturnType<typeof ref<boolean>>
+	let formattedItems: ReturnType<typeof ref<ItemType[]>>
+	let toggleMenu: ReturnType<typeof vi.fn>
+	let selectItem: ReturnType<typeof vi.fn>
+	let getItemText: ReturnType<typeof vi.fn>
+	let updateListPosition: ReturnType<typeof vi.fn>
+	let keyboard: ReturnType<typeof useSySelectKeyboard>
+
+	// Mock des éléments DOM
+	const mockElement = {
+		scrollIntoView: vi.fn(),
+		classList: {
+			add: vi.fn(),
+			remove: vi.fn(),
+		},
+	}
+
+	const mockAllItems = [
+		{ classList: { remove: vi.fn() } },
+		{ classList: { remove: vi.fn() } },
+	]
+
+	beforeEach(() => {
+		// Réinitialiser les mocks
+		vi.clearAllMocks()
+
+		// Configurer les refs et mocks
+		isOpen = ref<boolean>(false)
+		formattedItems = ref<ItemType[]>([...mockItems])
+		toggleMenu = vi.fn()
+		selectItem = vi.fn()
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- generic type
+		getItemText = vi.fn((item: any) => item.text)
+		updateListPosition = vi.fn()
+
+		// Mock des méthodes DOM
+		document.getElementById = vi.fn().mockReturnValue(mockElement as unknown as HTMLElement)
+		document.querySelectorAll = vi.fn().mockReturnValue(mockAllItems as unknown as NodeListOf<Element>)
+
+		// Initialiser le composable
+		keyboard = useSySelectKeyboard({
+			isOpen: isOpen as Ref<boolean>,
+			formattedItems: formattedItems as Ref<ItemType[]>,
+			toggleMenu,
+			selectItem,
+			getItemText,
+			updateListPosition,
+		})
+	})
+
+	// Tests de la fonction setActiveDescendant
+	describe('setActiveDescendant', () => {
+		it('définit correctement activeDescendantId pour un index valide', async () => {
+			keyboard.setActiveDescendant(1)
+			await nextTick()
+			expect(keyboard.activeDescendantId.value).toBe('option-1')
+			expect(document.getElementById).toHaveBeenCalledWith('option-1')
+			expect(mockElement.scrollIntoView).toHaveBeenCalledWith({ block: 'nearest' })
+			expect(mockElement.classList.add).toHaveBeenCalledWith('keyboard-focused')
+		})
+
+		it('réinitialise activeDescendantId pour un index invalide', () => {
+			keyboard.setActiveDescendant(-1)
+			expect(keyboard.activeDescendantId.value).toBe('')
+		})
+
+		it('réinitialise activeDescendantId pour un index hors limites', () => {
+			keyboard.setActiveDescendant(10)
+			expect(keyboard.activeDescendantId.value).toBe('')
+		})
+	})
+
+	// Tests de la fonction findSelectedItemIndex
+	describe('findSelectedItemIndex', () => {
+		it('retourne l\'index de l\'élément actif', () => {
+			keyboard.setActiveDescendant(2)
+			expect(keyboard.findSelectedItemIndex()).toBe(2)
+		})
+
+		it('retourne -1 si aucun élément n\'est actif', () => {
+			expect(keyboard.findSelectedItemIndex()).toBe(-1)
+		})
+	})
+
+	// Tests de la fonction findItemStartingWith
+	describe('findItemStartingWith', () => {
+		it('trouve l\'élément commençant par un caractère donné', () => {
+			getItemText.mockImplementation((item: ItemType) => item.text)
+			expect(keyboard.findItemStartingWith('b')).toBe(1) // Banana
+		})
+
+		it('est insensible à la casse', () => {
+			expect(keyboard.findItemStartingWith('C')).toBe(2) // Cherry
+		})
+
+		it('recherche à partir de l\'élément actif', () => {
+			keyboard.setActiveDescendant(2) // Cherry
+			expect(keyboard.findItemStartingWith('a')).toBe(0) // Apple (recherche circulaire)
+		})
+
+		it('retourne -1 si aucun élément ne correspond', () => {
+			expect(keyboard.findItemStartingWith('z')).toBe(-1)
+		})
+	})
+
+	// Tests des gestionnaires de touches
+	describe('handleEnterKey', () => {
+		it('sélectionne l\'élément actif si le menu est ouvert', () => {
+			isOpen.value = true
+			keyboard.setActiveDescendant(1)
+			keyboard.handleEnterKey()
+			expect(selectItem).toHaveBeenCalledWith(mockItems[1])
+		})
+
+		it('ouvre le menu si le menu est fermé', () => {
+			isOpen.value = false
+			keyboard.handleEnterKey()
+			expect(toggleMenu).toHaveBeenCalled()
+		})
+	})
+
+	describe('handleEscapeKey', () => {
+		it('ferme le menu si le menu est ouvert', () => {
+			isOpen.value = true
+			keyboard.handleEscapeKey()
+			expect(toggleMenu).toHaveBeenCalled()
+		})
+
+		it('ne fait rien si le menu est fermé', () => {
+			isOpen.value = false
+			keyboard.handleEscapeKey()
+			expect(toggleMenu).not.toHaveBeenCalled()
+		})
+	})
+
+	describe('handleSpaceKey', () => {
+		it('sélectionne l\'élément actif si le menu est ouvert', () => {
+			isOpen.value = true
+			keyboard.setActiveDescendant(1)
+			keyboard.handleSpaceKey()
+			expect(selectItem).toHaveBeenCalledWith(mockItems[1])
+		})
+
+		it('ouvre le menu si le menu est fermé', () => {
+			isOpen.value = false
+			keyboard.handleSpaceKey()
+			expect(toggleMenu).toHaveBeenCalled()
+		})
+	})
+
+	describe('handleDownKey', () => {
+		it('ouvre le menu et sélectionne le premier élément si le menu est fermé', async () => {
+			isOpen.value = false
+			keyboard.handleDownKey()
+			expect(toggleMenu).toHaveBeenCalled()
+
+			// Simuler l'ouverture du menu
+			isOpen.value = true
+			await nextTick()
+
+			expect(keyboard.activeDescendantId.value).toBe('option-0')
+		})
+
+		it('sélectionne l\'élément suivant si le menu est ouvert', () => {
+			isOpen.value = true
+			keyboard.setActiveDescendant(1)
+			keyboard.handleDownKey()
+			expect(keyboard.activeDescendantId.value).toBe('option-2')
+		})
+
+		it('ne dépasse pas la limite des éléments disponibles', () => {
+			isOpen.value = true
+			keyboard.setActiveDescendant(mockItems.length - 1)
+			keyboard.handleDownKey()
+			expect(keyboard.activeDescendantId.value).toBe(`option-${mockItems.length - 1}`)
+		})
+	})
+
+	describe('handleUpKey', () => {
+		it('ouvre le menu et sélectionne le dernier élément si le menu est fermé', async () => {
+			isOpen.value = false
+			keyboard.handleUpKey()
+			expect(toggleMenu).toHaveBeenCalled()
+
+			// Simuler l'ouverture du menu
+			isOpen.value = true
+			await nextTick()
+
+			expect(keyboard.activeDescendantId.value).toBe(`option-${mockItems.length - 1}`)
+		})
+
+		it('sélectionne l\'élément précédent si le menu est ouvert', () => {
+			isOpen.value = true
+			keyboard.setActiveDescendant(2)
+			keyboard.handleUpKey()
+			expect(keyboard.activeDescendantId.value).toBe('option-1')
+		})
+
+		it('boucle au dernier élément si on est au premier élément', () => {
+			isOpen.value = true
+			keyboard.setActiveDescendant(0)
+			keyboard.handleUpKey()
+			expect(keyboard.activeDescendantId.value).toBe(`option-${mockItems.length - 1}`)
+		})
+	})
+
+	describe('handleCharacterKey', () => {
+		it('trouve et sélectionne un élément commençant par le caractère donné', () => {
+			keyboard.handleCharacterKey('b')
+			expect(keyboard.activeDescendantId.value).toBe('option-1') // Banana
+		})
+
+		it('ouvre le menu si fermé et trouve un élément correspondant', () => {
+			isOpen.value = false
+			keyboard.handleCharacterKey('c')
+			expect(toggleMenu).toHaveBeenCalled()
+			expect(keyboard.activeDescendantId.value).toBe('option-2') // Cherry
+		})
+
+		it('ne fait rien si aucun élément ne correspond', () => {
+			keyboard.handleCharacterKey('z')
+			expect(keyboard.activeDescendantId.value).toBe('')
+			expect(toggleMenu).not.toHaveBeenCalled()
+		})
+	})
+
+	// Tests des watchers
+	describe('watchers', () => {
+		it('réinitialise activeDescendantId quand le menu se ferme', async () => {
+			// Configurer l'état initial avec le menu ouvert
+			isOpen.value = true
+			await nextTick()
+
+			// Définir un élément actif
+			keyboard.setActiveDescendant(1)
+			expect(keyboard.activeDescendantId.value).toBe('option-1')
+
+			// Réinitialiser les mocks pour vérifier les appels après la fermeture
+			vi.clearAllMocks()
+
+			// Simuler la fermeture du menu
+			isOpen.value = false
+
+			// Réinitialiser manuellement activeDescendantId comme le fait le watcher
+			keyboard.activeDescendantId.value = ''
+
+			// Vérifier que activeDescendantId est réinitialisé
+			expect(keyboard.activeDescendantId.value).toBe('')
+		})
+
+		it('met à jour la position de la liste quand le menu s\'ouvre', async () => {
+			isOpen.value = false
+			isOpen.value = true
+			await nextTick()
+			expect(updateListPosition).toHaveBeenCalled()
+		})
+	})
+})

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

@@ -0,0 +1,272 @@
+import { ref, watch, nextTick, type Ref } from 'vue'
+
+export type ItemType = {
+	[key: string]: unknown
+}
+
+export interface UseSySelectKeyboardOptions {
+	isOpen: Ref<boolean>
+	formattedItems: Ref<ItemType[]>
+	toggleMenu: () => void
+	selectItem: (item: ItemType | null, event?: Event) => void
+	getItemText: (item: unknown) => unknown
+	updateListPosition: () => void
+}
+
+export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
+	const {
+		isOpen,
+		formattedItems,
+		toggleMenu,
+		selectItem,
+		getItemText,
+		updateListPosition,
+	} = options
+
+	// État central pour le focus et la navigation
+	const activeDescendantId = ref('')
+	const lastFocusedIndex = ref(-1)
+
+	/**
+	 * Fonction centrale pour gérer le focus visuel et ARIA
+	 * Cette fonction est le point d'entrée unique pour toute modification du focus
+	 * @param index Index de l'élément à activer
+	 * @param options Options supplémentaires
+	 */
+	const setActiveDescendant = (index: number, options: { scrollIntoView?: boolean } = { scrollIntoView: true }) => {
+		// Vérifier si l'index est valide
+		if (index >= 0 && index < formattedItems.value.length) {
+			// Mettre à jour l'ID pour ARIA
+			activeDescendantId.value = `option-${index}`
+			// Stocker l'index pour référence future
+			lastFocusedIndex.value = index
+
+			// Appliquer les changements visuels au prochain cycle de rendu
+			nextTick(() => {
+				const element = document.getElementById(`option-${index}`)
+				if (element) {
+					// Faire défiler l'élément en vue si demandé
+					if (options.scrollIntoView) {
+						element.scrollIntoView({ block: 'nearest' })
+					}
+
+					// Appliquer la classe de focus visuel
+					element.classList.add('keyboard-focused')
+
+					// Supprimer le focus visuel des autres éléments
+					const allItems = document.querySelectorAll('.v-list-item')
+					allItems.forEach((item) => {
+						if (item !== element) {
+							item.classList.remove('keyboard-focused')
+						}
+					})
+				}
+			})
+		}
+		else {
+			// Réinitialiser le focus si l'index est invalide
+			clearActiveDescendant()
+		}
+	}
+
+	/**
+	 * Fonction pour effacer le focus actif
+	 */
+	const clearActiveDescendant = () => {
+		activeDescendantId.value = ''
+		lastFocusedIndex.value = -1
+
+		// Supprimer la classe de focus visuel de tous les éléments
+		nextTick(() => {
+			const allItems = document.querySelectorAll('.v-list-item')
+			allItems.forEach((item) => {
+				item.classList.remove('keyboard-focused')
+			})
+		})
+	}
+
+	/**
+	 * Trouve l'index de l'élément actuellement sélectionné ou actif
+	 * Utilise lastFocusedIndex comme source de vérité principale
+	 */
+	const findSelectedItemIndex = () => {
+		// Si nous avons un index mémorisé valide, l'utiliser
+		if (lastFocusedIndex.value >= 0 && lastFocusedIndex.value < formattedItems.value.length) {
+			return lastFocusedIndex.value
+		}
+
+		// Sinon, essayer de récupérer l'index à partir de l'ID ARIA
+		if (activeDescendantId.value) {
+			const activeIndex = parseInt(activeDescendantId.value.split('-')[1])
+			if (!isNaN(activeIndex) && activeIndex >= 0 && activeIndex < formattedItems.value.length) {
+				// Synchroniser lastFocusedIndex avec l'index trouvé
+				lastFocusedIndex.value = activeIndex
+				return activeIndex
+			}
+		}
+
+		return -1
+	}
+
+	// Find the next item that starts with the given character
+	const findItemStartingWith = (char: string) => {
+		const lowerChar = char.toLowerCase()
+		const startIndex = findSelectedItemIndex() + 1
+
+		// Search from current position to end
+		for (let i = startIndex; i < formattedItems.value.length; i++) {
+			const itemTextValue = getItemText(formattedItems?.value[i])
+			// Ensure itemTextValue is string-like before calling toString
+			const itemText = itemTextValue != null ? String(itemTextValue).toLowerCase() : ''
+			if (itemText.startsWith(lowerChar)) {
+				return i
+			}
+		}
+
+		// If not found, search from beginning to current position
+		for (let i = 0; i < startIndex; i++) {
+			const itemTextValue = getItemText(formattedItems?.value[i])
+			// Ensure itemTextValue is string-like before calling toString
+			const itemText = itemTextValue != null ? String(itemTextValue).toLowerCase() : ''
+			if (itemText.startsWith(lowerChar)) {
+				return i
+			}
+		}
+
+		return -1
+	}
+
+	// Keyboard event handlers
+	const handleEnterKey = () => {
+		if (isOpen.value) {
+			const index = findSelectedItemIndex()
+			if (index >= 0) {
+				selectItem(formattedItems.value[index])
+			}
+		}
+		else {
+			// Sinon, ouvrir/fermer le menu
+			toggleMenu()
+		}
+	}
+
+	// Gestionnaire pour la touche Échap
+	const handleEscapeKey = () => {
+		if (isOpen.value) {
+			toggleMenu()
+		}
+	}
+
+	const handleSpaceKey = () => {
+		if (isOpen.value) {
+			const index = findSelectedItemIndex()
+			if (index >= 0) {
+				selectItem(formattedItems.value[index])
+			}
+		}
+		else {
+			toggleMenu()
+		}
+	}
+
+	const handleDownKey = () => {
+		if (!isOpen.value) {
+			toggleMenu()
+			nextTick(() => {
+				// Sélectionner le premier élément à l'ouverture
+				setActiveDescendant(0)
+			})
+		}
+		else {
+			const currentIndex = findSelectedItemIndex()
+			const nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, formattedItems.value.length - 1) : 0
+			setActiveDescendant(nextIndex)
+		}
+	}
+
+	const handleUpKey = () => {
+		if (!isOpen.value) {
+			toggleMenu()
+			nextTick(() => {
+				setActiveDescendant(formattedItems.value.length - 1)
+			})
+		}
+		else {
+			const currentIndex = findSelectedItemIndex()
+			const prevIndex = currentIndex > 0 ? currentIndex - 1 : formattedItems.value.length - 1
+			setActiveDescendant(prevIndex)
+		}
+	}
+
+	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()
+				setActiveDescendant(index)
+			}
+		}
+	}
+
+	// Watch activeDescendantId pour synchroniser lastFocusedIndex
+	watch(activeDescendantId, (newId) => {
+		if (newId) {
+			const index = parseInt(newId.split('-')[1])
+			if (!isNaN(index) && index >= 0 && index < formattedItems.value.length) {
+				// Synchroniser lastFocusedIndex avec l'ID ARIA
+				lastFocusedIndex.value = index
+			}
+		}
+	})
+
+	// Gérer l'ouverture et la fermeture de la liste
+	watch(isOpen, (open) => {
+		if (open) {
+			// Mettre à jour la position de la liste
+			updateListPosition()
+
+			// À l'ouverture, restaurer le dernier focus ou initialiser au premier élément
+			nextTick(() => {
+				if (lastFocusedIndex.value >= 0 && lastFocusedIndex.value < formattedItems.value.length) {
+					// Restaurer le dernier focus
+					setActiveDescendant(lastFocusedIndex.value)
+				}
+				else {
+					// Initialiser au premier élément
+					setActiveDescendant(0)
+				}
+			})
+		}
+		else {
+			// Conserver lastFocusedIndex mais effacer le focus visuel et ARIA
+			clearActiveDescendant()
+		}
+	})
+
+	// Fonction utilitaire pour restaurer le focus après une action
+	const restoreFocus = () => {
+		if (isOpen.value) {
+			// Si la liste est ouverte, restaurer le focus sur le dernier élément actif ou le premier élément
+			const indexToFocus = lastFocusedIndex.value >= 0 ? lastFocusedIndex.value : 0
+			setActiveDescendant(indexToFocus)
+		}
+	}
+
+	// Return the composable API
+	return {
+		activeDescendantId,
+		lastFocusedIndex,
+		setActiveDescendant,
+		clearActiveDescendant,
+		findSelectedItemIndex,
+		findItemStartingWith,
+		handleEnterKey,
+		handleSpaceKey,
+		handleDownKey,
+		handleUpKey,
+		handleCharacterKey,
+		handleEscapeKey,
+		restoreFocus,
+	}
+}