@cnamts/synapse 1.0.4 → 1.0.6

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

@@ -191,7 +191,7 @@ describe('useSySelectKeyboard', () => {
 	})
 
 	describe('handleUpKey', () => {
-		it('ouvre le menu et sélectionne le dernier élément si le menu est fermé', async () => {
+		it('ouvre le menu et sélectionne le premier élément si le menu est fermé (comportement RGAA)', async () => {
 			isOpen.value = false
 			keyboard.handleUpKey()
 			expect(toggleMenu).toHaveBeenCalled()
@@ -200,7 +200,8 @@ describe('useSySelectKeyboard', () => {
 			isOpen.value = true
 			await nextTick()
 
-			expect(keyboard.activeDescendantId.value).toBe(`option-${mockItems.length - 1}`)
+			// Comportement RGAA correct : flèche haut ouvre et va au premier élément
+			expect(keyboard.activeDescendantId.value).toBe('option-0')
 		})
 
 		it('sélectionne l\'élément précédent si le menu est ouvert', () => {
@@ -210,24 +211,32 @@ describe('useSySelectKeyboard', () => {
 			expect(keyboard.activeDescendantId.value).toBe('option-1')
 		})
 
-		it('boucle au dernier élément si on est au premier élément', () => {
+		it('reste au premier élément si on est déjà au premier (pas de bouclage)', () => {
 			isOpen.value = true
 			keyboard.setActiveDescendant(0)
 			keyboard.handleUpKey()
-			expect(keyboard.activeDescendantId.value).toBe(`option-${mockItems.length - 1}`)
+			// Ne doit pas boucler, doit rester au premier élément
+			expect(keyboard.activeDescendantId.value).toBe('option-0')
 		})
 	})
 
 	describe('handleCharacterKey', () => {
 		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')
 			expect(keyboard.activeDescendantId.value).toBe('option-1') // Banana
 		})
 
-		it('ouvre le menu si fermé et trouve un élément correspondant', () => {
+		it('ouvre le menu si fermé et trouve un élément correspondant', async () => {
 			isOpen.value = false
 			keyboard.handleCharacterKey('c')
 			expect(toggleMenu).toHaveBeenCalled()
+
+			// Simuler l'ouverture du menu et attendre nextTick
+			isOpen.value = true
+			await nextTick()
+
 			expect(keyboard.activeDescendantId.value).toBe('option-2') // Cherry
 		})
 

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

@@ -7,7 +7,7 @@ export type ItemType = {
 export interface UseSySelectKeyboardOptions {
 	isOpen: Ref<boolean>
 	formattedItems: Ref<ItemType[]>
-	toggleMenu: () => void
+	toggleMenu: (skipInitialFocus?: boolean) => void
 	selectItem: (item: ItemType | null, event?: Event) => void
 	getItemText: (item: unknown) => unknown
 	updateListPosition: () => void
@@ -85,6 +85,22 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 		})
 	}
 
+	/**
+	 * Fonction pour effacer seulement le focus visuel et ARIA sans réinitialiser lastFocusedIndex
+	 * Utilisée quand on ferme le dropdown mais qu'on veut conserver la mémoire du dernier focus
+	 */
+	const clearVisualFocus = () => {
+		activeDescendantId.value = ''
+
+		// 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
@@ -171,29 +187,37 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 
 	const handleDownKey = () => {
 		if (!isOpen.value) {
-			toggleMenu()
+			// Passer skipInitialFocus=true pour éviter que toggleMenu override notre focus
+			toggleMenu(true)
 			nextTick(() => {
-				// Sélectionner le premier élément à l'ouverture
-				setActiveDescendant(0)
+				// Restaurer le dernier item qui avait le focus, ou le premier item par défaut
+				const indexToFocus = lastFocusedIndex.value >= 0 && lastFocusedIndex.value < formattedItems.value.length
+					? lastFocusedIndex.value
+					: 0
+				setActiveDescendant(indexToFocus)
 			})
 		}
 		else {
-			const currentIndex = findSelectedItemIndex()
-			const nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, formattedItems.value.length - 1) : 0
+			// Utiliser lastFocusedIndex comme point de départ (pas l'item sélectionné)
+			const currentIndex = lastFocusedIndex.value >= 0 ? lastFocusedIndex.value : 0
+			const nextIndex = Math.min(currentIndex + 1, formattedItems.value.length - 1)
 			setActiveDescendant(nextIndex)
 		}
 	}
 
 	const handleUpKey = () => {
 		if (!isOpen.value) {
-			toggleMenu()
+			// Passer skipInitialFocus=true pour éviter que toggleMenu override notre focus
+			toggleMenu(true)
 			nextTick(() => {
-				setActiveDescendant(formattedItems.value.length - 1)
+				// Aller au premier item quand on ouvre avec flèche haut (comportement RGAA correct)
+				setActiveDescendant(0)
 			})
 		}
 		else {
 			const currentIndex = findSelectedItemIndex()
-			const prevIndex = currentIndex > 0 ? currentIndex - 1 : formattedItems.value.length - 1
+			// Ne pas boucler : rester au premier item si on est déjà au premier
+			const prevIndex = currentIndex >= 0 ? Math.max(currentIndex - 1, 0) : 0
 			setActiveDescendant(prevIndex)
 		}
 	}
@@ -203,12 +227,100 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 		if (key.length === 1 && key.match(/\S/)) {
 			const index = findItemStartingWith(key)
 			if (index >= 0) {
-				if (!isOpen.value) toggleMenu()
-				setActiveDescendant(index)
+				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 handleHomeKey = () => {
+		if (!isOpen.value) {
+			toggleMenu()
+			nextTick(() => {
+				// Aller au premier item
+				setActiveDescendant(0)
+			})
+		}
+		else {
+			// Menu déjà ouvert, aller au premier item
+			setActiveDescendant(0)
+		}
+	}
+
+	const handleEndKey = () => {
+		if (!isOpen.value) {
+			toggleMenu()
+			nextTick(() => {
+				// Aller au dernier item
+				setActiveDescendant(formattedItems.value.length - 1)
+			})
+		}
+		else {
+			// Menu déjà ouvert, aller au dernier item
+			setActiveDescendant(formattedItems.value.length - 1)
+		}
+	}
+
+	const handlePageUpKey = () => {
+		if (!isOpen.value) {
+			toggleMenu()
+			nextTick(() => {
+				// Aller au premier item
+				setActiveDescendant(0)
+			})
+		}
+		else {
+			// Menu déjà ouvert, naviguer de 10 items vers le haut
+			const currentIndex = lastFocusedIndex.value >= 0 ? lastFocusedIndex.value : 0
+			const newIndex = Math.max(currentIndex - 10, 0)
+			setActiveDescendant(newIndex)
+		}
+	}
+
+	const handlePageDownKey = () => {
+		if (!isOpen.value) {
+			toggleMenu()
+			nextTick(() => {
+				// Aller au dernier item
+				setActiveDescendant(formattedItems.value.length - 1)
+			})
+		}
+		else {
+			// Menu déjà ouvert, naviguer de 10 items vers le bas
+			const currentIndex = lastFocusedIndex.value >= 0 ? lastFocusedIndex.value : 0
+			const newIndex = Math.min(currentIndex + 10, formattedItems.value.length - 1)
+			setActiveDescendant(newIndex)
+		}
+	}
+
+	const handleTabKey = () => {
+		if (isOpen.value && activeDescendantId.value) {
+			// Trouver l'item actuellement focusé
+			const currentIndex = parseInt(activeDescendantId.value.split('-')[1])
+			if (!isNaN(currentIndex) && currentIndex >= 0 && currentIndex < formattedItems.value.length) {
+				const currentItem = formattedItems.value[currentIndex]
+				// Sélectionner l'item qui a le focus
+				selectItem(currentItem)
+			}
+		}
+		// Fermer le menu (la navigation Tab normale continuera après)
+		if (isOpen.value) {
+			isOpen.value = false
+			clearActiveDescendant()
+		}
+		// Ne pas empêcher le comportement par défaut de Tab pour permettre
+		// la navigation vers l'élément suivant focusable
+	}
+
 	// Watch activeDescendantId pour synchroniser lastFocusedIndex
 	watch(activeDescendantId, (newId) => {
 		if (newId) {
@@ -240,7 +352,7 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 		}
 		else {
 			// Conserver lastFocusedIndex mais effacer le focus visuel et ARIA
-			clearActiveDescendant()
+			clearVisualFocus()
 		}
 	})
 
@@ -267,6 +379,11 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 		handleUpKey,
 		handleCharacterKey,
 		handleEscapeKey,
+		handleHomeKey,
+		handleEndKey,
+		handlePageUpKey,
+		handlePageDownKey,
+		handleTabKey,
 		restoreFocus,
 	}
 }

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

@@ -8,6 +8,7 @@ describe('SyIcon', () => {
 		const wrapper = mount(SyIcon, {
 			props: {
 				icon: 'mdi-home',
+				decorative: true, // Marquer l'icône comme décorative pour éviter les avertissements d'accessibilité
 			},
 			global: {
 				stubs: {
@@ -82,6 +83,7 @@ describe('SyIcon', () => {
 		const wrapper = mount(SyIcon, {
 			props: {
 				icon: 'mdi-home',
+				decorative: true, // Marquer l'icône comme décorative pour éviter les avertissements d'accessibilité
 				color: 'primary',
 			},
 			global: {
@@ -106,6 +108,7 @@ describe('SyIcon', () => {
 		const wrapper = mount(SyIcon, {
 			props: {
 				icon: 'mdi-home',
+				decorative: true, // Marquer l'icône comme décorative pour éviter les avertissements d'accessibilité
 				size: 'large',
 			},
 			global: {

package/src/components/Customs/SyTextField/Accessibilite.stories.ts

@@ -222,7 +222,9 @@ export const Legende: StoryObj = {
 					  rapport</a></p>
 				  <p style="color: grey; font-size: 14px">Correctifs associés (<a
 					  href="https://github.com/assurance-maladie-digital/design-system/issues/4028" target="_blank"
-					  style="color:#0C41BD;">issue #4028</a>)</p>
+					  style="color:#0C41BD;">issue #4028</a>, <a
+					  href="https://github.com/assurance-maladie-digital/design-system-v3/pull/935" target="_blank"
+					  style="color:#0C41BD;">issue #935</a>)</p>
 			  </div>
             `,
 		}

package/src/components/Customs/SyTextField/SyTextField.stories.ts

@@ -181,6 +181,10 @@ const meta = {
 			description: 'Texte d\'aide affiché sous le champ',
 			control: 'text',
 		},
+		'helpText': {
+			description: 'Texte d\'aide affiché sous le champ',
+			control: 'text',
+		},
 		'loading': {
 			description: 'Affiche un indicateur de chargement',
 			control: 'boolean',
@@ -377,6 +381,58 @@ export const Default: Story = {
 	},
 }
 
+export const HelpText: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<SyTextField 
+					v-model="value" 
+					help-text="Texte d'aide à la saisie"
+				/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { SyTextField } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		showDivider: false,
+		variantStyle: 'outlined',
+		color: 'primary',
+		isClearable: true,
+		label: 'Label',
+		modelValue: '',
+		helpText: 'Texte d\'aide à la saisie',
+	},
+	render: (args) => {
+		return {
+			components: { SyTextField, VIcon },
+			setup() {
+				const value = ref(args.modelValue)
+				watch(() => args.modelValue, (newValue) => {
+					value.value = newValue
+				})
+				return { args, value }
+			},
+			template: `
+				<div>
+					<SyTextField v-bind="args" v-model="value" />
+				</div>
+			`,
+		}
+	},
+}
+
 export const Required: Story = {
 	args: {
 		...Default.args,
@@ -393,7 +449,8 @@ export const Required: Story = {
 				return { args, value }
 			},
 			template: `
-    <div class="d-flex flex-wrap align-center">
+    <div>
+		<p class="mb-2 text-caption text-grey-darken-2">Ce champ est obligatoire</p>
      <SyTextField v-bind="args" v-model="value" />
     </div>
    `,
@@ -413,6 +470,7 @@ Pour afficher l'astérisque sur un champ requis, il faut activer la prop \`displ
 			{
 				name: 'Template',
 				code: `<template>
+	<p class="mb-2 text-caption text-grey-darken-2">Ce champ est obligatoire</p>
 	<SyTextField
 		v-model="value"
 		required
@@ -451,7 +509,7 @@ export const RequiredWithAsterisk: Story = {
 			},
 			template: `
     <div class="d-flex flex-wrap align-center">
-     <SyTextField v-bind="args" v-model="value" />
+     	<SyTextField v-bind="args" v-model="value" />
     </div>
    `,
 		}
@@ -837,6 +895,7 @@ Cette story montre l'utilisation des règles de validation standard. Le champ :
 				code: `<SyTextField
 	v-model="value"
 	label="Champ avec validation"
+	helpText="Le champ doit contenir à minima 3 caractères"
 	:customRules="[
 		{
 			type: 'minLength',
@@ -862,6 +921,7 @@ Cette story montre l'utilisation des règles de validation standard. Le champ :
 				v-model="value"
 				v-bind="args"
 				label="Champ avec validation"
+				helpText="Le champ doit contenir à minima 3 caractères"
 				:customRules="[
 					{
 						type: 'minLength',
@@ -960,12 +1020,13 @@ Cette story montre un cas d'usage courant : la validation d'une adresse email. L
 	v-model="value"
 	autocomplete="email"
 	label="Email"
+	helpText="Format attendu : nom@domaine.fr"
 	required
 	:customRules="[
 		{
 			type: 'email',
 			options: {
-				message: 'L'email n'est pas valide',
+				message: 'L'email n'est pas valide'
 				successMessage: 'L'email est valide'
 			}
 		}
@@ -986,6 +1047,7 @@ Cette story montre un cas d'usage courant : la validation d'une adresse email. L
 				v-model="value"
 				v-bind="args"
 				label="Email"
+				helpText="Format attendu : nom@domaine.fr"
 				autocomplete="email"
 				required
 				:customRules="[
@@ -1023,6 +1085,7 @@ Cette story montre l'utilisation de la règle \`matchPattern\` pour valider un f
 				code: `<SyTextField
 	v-model="value"
 	label="Code postal"
+	helpText="Exemple : 31000"
 	autocomplete="postal-code"
 	required
 	:customRules="[
@@ -1051,6 +1114,7 @@ Cette story montre l'utilisation de la règle \`matchPattern\` pour valider un f
 				v-model="value"
 				v-bind="args"
 				label="Code postal"
+				helpText="Exemple : 31000"
 				autocomplete="postal-code"
 				required
 				:customRules="[
@@ -1307,9 +1371,11 @@ export const FormValidation: Story = {
 							v-model="nomValue"
 							label="Nom"
 							placeholder="Votre nom"
+							autocomplete="family-name"
 							required
 							show-success-messages
 							class="mb-4"
+							aria-describedby="nom-rule"
 						/>
 
 						<SyTextField
@@ -1317,9 +1383,11 @@ export const FormValidation: Story = {
 							v-model="prenomValue"
 							label="Prénom"
 							placeholder="Votre prénom"
+							autocomplete="given-name"
 							:custom-rules="prenomRules"
 							show-success-messages
 							class="mb-4"
+							aria-describedby="prenom-rule"
 						/>
 
 						<SyTextField
@@ -1330,15 +1398,16 @@ export const FormValidation: Story = {
 							:custom-rules="ageRules"
 							show-success-messages
 							class="mb-4"
+							aria-describedby="age-rule"
 						/>
 					</div>
 
 					<div class="text-caption mb-4">
 						<strong>Règles de validation :</strong>
 						<ul>
-							<li>Nom : Champ requis</li>
-							<li>Prénom : Minimum 3 caractères</li>
-							<li>Âge : Uniquement des chiffres</li>
+							<li id="nom-rule">Nom : Champ requis</li>
+							<li id="prenom-rule">Prénom : Minimum 3 caractères</li>
+							<li id="age-rule">Âge : Uniquement des chiffres</li>
 						</ul>
 					</div>
 
@@ -1542,6 +1611,7 @@ export const WithoutSuccessMessages: Story = {
               <SyTextField
                 v-model="value1"
                 v-bind="args"
+                autocomplete="email"
                 showSuccessMessages
               />
             </div>
@@ -1551,6 +1621,7 @@ export const WithoutSuccessMessages: Story = {
               <SyTextField
                 v-model="value2"
                 v-bind="args"
+                autocomplete="email"
                 :showSuccessMessages="false"
               />
             </div>
@@ -1583,6 +1654,7 @@ export const WithoutSuccessMessages: Story = {
   <SyTextField
     v-model="email"
     label="Email"
+    autocomplete="email"
     :custom-rules="[{
       type: 'matchPattern',
       options: {
@@ -1597,6 +1669,7 @@ export const WithoutSuccessMessages: Story = {
   <SyTextField
     v-model="email"
     label="Email"
+    autocomplete="email"
     :custom-rules="[{
       type: 'matchPattern',
       options: {