@cnamts/synapse 1.0.24 → 1.0.26

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

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { VList } from 'vuetify/components'
+import { nextTick } from 'vue'
 import SySelect from '../SySelect.vue'
 
 type ItemType = {
@@ -129,7 +130,7 @@ describe('SySelect.vue', () => {
 	it('renders error messages when provided', () => {
 		const errorMessages = ['Error 1']
 		const wrapper = mount(SySelect, {
-			props: { errorMessages, hideMessages: false },
+			props: { errorMessages, hideDetails: false },
 			attachTo: document.body,
 		})
 		const message = wrapper.find('.v-messages__message')
@@ -139,6 +140,99 @@ describe('SySelect.vue', () => {
 		wrapper.unmount()
 	})
 
+	describe('hideDetails', () => {
+		it('masque les messages de validation quand hideDetails est true', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					errorMessages: ['Erreur de test'],
+					hideDetails: true,
+				},
+				attachTo: document.body,
+			})
+
+			expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+
+			wrapper.unmount()
+		})
+
+		it('affiche les messages de validation quand hideDetails est false', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					errorMessages: ['Erreur de test'],
+					hideDetails: false,
+				},
+				attachTo: document.body,
+			})
+
+			const message = wrapper.find('.v-messages__message')
+			expect(message.exists()).toBe(true)
+			expect(message.text()).toContain('Erreur de test')
+
+			wrapper.unmount()
+		})
+
+		it('affiche la zone de messages par défaut (hideDetails vaut false par défaut)', () => {
+			const wrapper = mount(SySelect, {
+				attachTo: document.body,
+			})
+
+			expect(wrapper.find('.v-messages').exists()).toBe(true)
+
+			wrapper.unmount()
+		})
+
+		it('n\'affiche pas le helpText en dessous du champ quand hideDetails est true et qu\'il y a des erreurs', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					helpText: 'Texte d\'aide',
+					errorMessages: ['Erreur de test'],
+					hideDetails: true,
+				},
+				attachTo: document.body,
+			})
+
+			expect(wrapper.find('.help-text-below').exists()).toBe(false)
+
+			wrapper.unmount()
+		})
+
+		it('affiche le helpText en dessous du champ quand hideDetails est false et qu\'il y a des erreurs', () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					helpText: 'Texte d\'aide',
+					errorMessages: ['Erreur de test'],
+					hideDetails: false,
+				},
+				attachTo: document.body,
+			})
+
+			expect(wrapper.find('.help-text-below').exists()).toBe(true)
+			expect(wrapper.find('.help-text-below').text()).toContain('Texte d\'aide')
+
+			wrapper.unmount()
+		})
+	})
+
+	it('keeps the label active when a validation error is displayed', async () => {
+		const wrapper = mount(SySelect, {
+			props: {
+				items: [{ text: 'Option 1', value: '1' }],
+				label: 'Option',
+				required: true,
+			},
+			attachTo: document.body,
+		})
+
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- exposed method is not part of the inferred public instance type
+		const isValid = await (wrapper.vm as any).validateOnSubmit()
+		await nextTick()
+
+		expect(isValid).toBe(false)
+		expect(wrapper.find('.v-field').classes()).toContain('v-field--active')
+
+		wrapper.unmount()
+	})
+
 	it('does not render error messages when not provided', () => {
 		const wrapper = mount(SySelect, {
 			attachTo: document.body,
@@ -487,26 +581,206 @@ describe('SySelect.vue', () => {
 			wrapper.unmount()
 		})
 
-		it('n\'affiche pas d\'erreur quand disableErrorHandling est true', async () => {
+		it('n\'affiche pas d\'erreur à l\'ouverture du menu mais seulement à la fermeture', async () => {
 			const wrapper = mount(SySelect, {
 				props: {
 					required: true,
 					label: 'Test Label',
 					modelValue: undefined,
-					disableErrorHandling: true,
+					items: [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
 				},
 				attachTo: document.body,
 			})
 
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+
+			// Au départ, pas d'erreur
+			expect(instance.hasError).toBe(false)
+
+			// Ouverture du menu - l'erreur ne doit pas s'afficher
 			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
+			expect(instance.hasError).toBe(false)
+			expect(instance.isOpen).toBe(true)
+
+			// Fermeture du menu sans sélection - l'erreur doit s'afficher
 			await wrapper.find('.v-field').trigger('click')
 			await wrapper.vm.$nextTick()
+			expect(instance.hasError).toBe(true)
+			expect(instance.isOpen).toBe(false)
+
+			wrapper.unmount()
+		})
+
+		describe('disableErrorHandling', () => {
+			it('n\'affiche pas d\'erreur pour un champ requis sans valeur quand disableErrorHandling est true', async () => {
+				const wrapper = mount(SySelect, {
+					props: {
+						required: true,
+						label: 'Test Label',
+						modelValue: undefined,
+						disableErrorHandling: true,
+					},
+					attachTo: document.body,
+				})
+
+				await wrapper.find('.v-field').trigger('click')
+				await wrapper.vm.$nextTick()
+				await wrapper.find('.v-field').trigger('click')
+				await wrapper.vm.$nextTick()
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+				const instance = wrapper.vm as any
+				expect(instance.hasError).toBe(false)
+
+				wrapper.unmount()
+			})
+
+			it('ignore les errorMessages quand disableErrorHandling est true', () => {
+				const wrapper = mount(SySelect, {
+					props: {
+						errorMessages: ['Erreur forcée'],
+						disableErrorHandling: true,
+					},
+					attachTo: document.body,
+				})
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+				const instance = wrapper.vm as any
+				expect(instance.hasError).toBe(false)
+				expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+
+				wrapper.unmount()
+			})
+
+			it('n\'évalue pas les customRules quand disableErrorHandling est true', async () => {
+				const wrapper = mount(SySelect, {
+					props: {
+						modelValue: '1',
+						disableErrorHandling: true,
+						isValidateOnBlur: false,
+						customRules: [{
+							type: 'custom',
+							options: {
+								validate: () => false,
+								message: 'Toujours invalide',
+							},
+						}],
+					},
+					attachTo: document.body,
+				})
+
+				await wrapper.vm.$nextTick()
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+				const instance = wrapper.vm as any
+				expect(instance.hasError).toBe(false)
+				expect(wrapper.find('.v-messages__message').exists()).toBe(false)
+
+				wrapper.unmount()
+			})
+
+			it('affiche les erreurs normalement quand disableErrorHandling est false', async () => {
+				const wrapper = mount(SySelect, {
+					props: {
+						errorMessages: ['Erreur visible'],
+						disableErrorHandling: false,
+					},
+					attachTo: document.body,
+				})
+
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+				const instance = wrapper.vm as any
+				expect(instance.hasError).toBe(true)
+				expect(wrapper.find('.v-messages__message').text()).toContain('Erreur visible')
+
+				wrapper.unmount()
+			})
+		})
+
+		it('valide immédiatement quand isValidateOnBlur est false', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					items: [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+					label: 'Test Label',
+					modelValue: undefined,
+					isValidateOnBlur: false,
+					customRules: [{
+						type: 'custom',
+						options: {
+							validate: (value: unknown) => value === '2',
+							message: 'Test error message',
+						},
+					}],
+				},
+				attachTo: document.body,
+			})
 
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
 			const instance = wrapper.vm as any
 			expect(instance.hasError).toBe(false)
 
+			// Sélection de Option 1 via interaction utilisateur
+			await wrapper.find('.v-field').trigger('click')
+			await wrapper.vm.$nextTick()
+			await wrapper.findComponent(VList).findAll('.v-list-item').at(0)!.trigger('click')
+			await wrapper.setProps({ modelValue: '1' })
+
+			await vi.waitUntil(() => instance.hasError === true)
+			expect(wrapper.find('.v-messages').text()).toContain('Test error message')
+
+			// Sélection de Option 2 via interaction utilisateur
+			await wrapper.find('.v-field').trigger('click')
+			await wrapper.vm.$nextTick()
+			await wrapper.findComponent(VList).findAll('.v-list-item').at(1)!.trigger('click')
+			await wrapper.setProps({ modelValue: '2' })
+
+			await vi.waitUntil(() => instance.hasError === false)
+			expect(wrapper.find('.v-messages').text()).not.toContain('Test error message')
+
+			wrapper.unmount()
+		})
+
+		it('masque le message de succes mais conserve l\'etat de succes quand showSuccessMessages est false', async () => {
+			const wrapper = mount(SySelect, {
+				props: {
+					items: [
+						{ text: 'Option 1', value: '1' },
+						{ text: 'Option 2', value: '2' },
+					],
+					label: 'Test Label',
+					modelValue: undefined,
+					isValidateOnBlur: false,
+					showSuccessMessages: false,
+					customSuccessRules: [{
+						type: 'custom',
+						options: {
+							validate: (value: unknown) => value === '2',
+							successMessage: 'Test success message',
+						},
+					}],
+				},
+				attachTo: document.body,
+			})
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			const instance = wrapper.vm as any
+			expect(instance.hasSuccess).toBe(false)
+
+			await wrapper.setProps({ modelValue: '2' })
+
+			await vi.waitUntil(() => instance.hasSuccess === true)
+			expect(wrapper.find('.success-field').exists()).toBe(true)
+			expect(wrapper.findAll('.v-messages__message')).toHaveLength(0)
+			expect(wrapper.text()).not.toContain('Test success message')
+
 			wrapper.unmount()
 		})
 	})

package/src/components/Customs/SyCheckBoxGroup/SyCheckBoxGroup.vue

@@ -175,7 +175,7 @@
 
 	const errors = computed(() => validation.errors.value)
 	const warnings = computed(() => validation.warnings.value)
-	const successes = computed(() => validation.successes.value)
+	const displaySuccesses = computed(() => validation.displaySuccesses.value)
 
 	const labelId = computed(() => (props.id ? `${props.id}-label` : undefined))
 	const computedAriaLabelledby = computed(() => {
@@ -267,8 +267,8 @@
 		>
 			<VMessages
 				ref="messagesRef"
-				:active="hasError || hasWarning || (hasSuccess && props.showSuccessMessages)"
-				:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+				:active="hasError || hasWarning || (hasSuccess && displaySuccesses.length > 0)"
+				:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess ? displaySuccesses : []))"
 			/>
 		</div>
 

package/src/components/Customs/SyCheckbox/SyCheckbox.mdx

@@ -51,4 +51,9 @@ La propriété `controlsIds` permet d'établir une relation entre une case à co
 
 <Canvas of={SyCheckboxStories.WithControlsIds} />
 
+## Mode Décoratif
+
+La propriété `decorative` permet d'afficher la case à cocher uniquement de manière visuelle, sans rendre l'élément interactif natif (`<input type="checkbox">`) dans le DOM. 
+Ce mode est essentiel lorsque la case à cocher est imbriquée à l'intérieur d'un autre élément interactif (comme une ligne d'un tableau cliquable ou une option de liste déroulante). Il permet de respecter les règles d'accessibilité (qui interdisent l'imbrication de contrôles interactifs) tout en offrant le rendu visuel attendu. Le composant parent devient alors responsable de l'annonce de l'état (ex: via `aria-selected`).
+
 <a href="/?path=/docs/guide-du-dev-guide-de-validation-des-formulaires--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>

package/src/components/Customs/SyCheckbox/SyCheckbox.vue

@@ -36,6 +36,7 @@
 			falseValue?: unknown
 			controlsIds?: string[]
 			displayAsterisk?: boolean
+			decorative?: boolean
 		}>(),
 		{
 			modelValue: false,
@@ -66,11 +67,15 @@
 			falseValue: () => false,
 			controlsIds: () => [],
 			displayAsterisk: false,
+			decorative: false,
 		},
 	)
 
 	const emit = defineEmits(['update:modelValue', 'update:indeterminate', 'change'])
 
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import { mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiMinusBox } from '@mdi/js'
+
 	const checkboxRef = ref<VCheckbox | null>(null)
 
 	const internalIndeterminate = ref(props.indeterminate)
@@ -199,7 +204,7 @@
 
 	const errors = computed(() => validation.errors.value)
 	const warnings = computed(() => validation.warnings.value)
-	const successes = computed(() => validation.successes.value)
+	const displaySuccesses = computed(() => validation.displaySuccesses.value)
 
 	const ariaChecked = computed(() => {
 		if (internalIndeterminate.value) return 'mixed'
@@ -308,7 +313,31 @@
 
 <template>
 	<div>
+		<!-- Rendu purement visuel/décoratif, ignoré par les lecteurs d'écran -->
+		<div
+			v-if="props.decorative"
+			class="d-flex align-center pointer-events-none sy-checkbox-decorative"
+			aria-hidden="true"
+		>
+			<SyIcon
+				:icon="internalIndeterminate ? mdiMinusBox : (model ? mdiCheckboxMarked : mdiCheckboxBlankOutline)"
+				:color="(model || internalIndeterminate) ? props.color : '#727273'"
+				:class="{'text-disabled': props.disabled}"
+				:decorative="true"
+				class="mr-2"
+			/>
+			<slot name="label">
+				<span
+					v-if="generatedLabel"
+					:class="{'text-disabled': props.disabled}"
+					:style="{ color: labelColor }"
+				>{{ generatedLabel }}</span>
+			</slot>
+		</div>
+
+		<!-- Rendu interactif standard -->
 		<VCheckbox
+			v-else
 			:id="props.id"
 			ref="checkboxRef"
 			v-model="model"
@@ -318,6 +347,11 @@
 			:aria-labelledby="props.ariaLabelledby"
 			:title="props.title"
 			:color="props.color"
+			:class="{
+				'success-field': hasSuccess && !hasError && !hasWarning,
+				'warning-field': hasWarning && !hasError,
+				'error-field': hasError,
+			}"
 			:style="{ color: labelColor }"
 			:disabled="props.disabled"
 			:readonly="props.readonly"
@@ -325,7 +359,7 @@
 			:density="props.density"
 			:error="hasError"
 			:error-messages="errors"
-			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess && props.showSuccessMessages ? successes : []))"
+			:messages="hasError ? errors : (hasWarning ? warnings : (hasSuccess ? displaySuccesses : []))"
 			:indeterminate="internalIndeterminate"
 			:true-value="props.trueValue"
 			:false-value="props.falseValue"
@@ -358,6 +392,22 @@
 </template>
 
 <style scoped>
+.success-field :deep(.v-messages__message) {
+	color: rgb(var(--v-theme-success)) !important;
+}
+
+.success-field :deep(.v-selection-control__input) {
+	color: rgb(var(--v-theme-success));
+}
+
+.warning-field :deep(.v-messages__message) {
+	color: rgb(var(--v-theme-borderWarning)) !important;
+}
+
+.warning-field :deep(.v-selection-control__input) {
+	color: rgb(var(--v-theme-borderWarning));
+}
+
 :deep(.v-input--dirty .v-selection-control__input) {
 	color: v-bind('props.color');
 }

package/src/components/Customs/SyCheckbox/accessibilite/Accessibility.mdx

@@ -143,7 +143,19 @@ import '@/stories/styles/shared.css';
     <p>
       Cette relation est établie via la propriété <code>controlsIds</code> qui liste les identifiants des cases à cocher enfants.
     </p>
-</div>
+  </div>
+
+  <div className="decorative-mode-section">
+    <h2>Mode Décoratif (Imbrication)</h2>
+    <p>
+      Le composant SyCheckbox dispose d'une propriété <code>decorative</code> permettant de l'utiliser de manière purement visuelle. 
+      Dans ce mode, la case à cocher n'inclut pas d'élément <code>&lt;input type="checkbox"&gt;</code> natif et est masquée aux lecteurs d'écran via <code>aria-hidden="true"</code>.
+    </p>
+    <p>
+      Ce mode est <strong>indispensable pour respecter l'accessibilité</strong> lorsque la case à cocher doit être imbriquée dans un autre composant interactif (par exemple, une option de <code>listbox</code> ou une ligne cliquable de tableau). 
+      Les règles WAI-ARIA interdisent l'imbrication d'éléments interactifs. Le composant parent assume alors la responsabilité d'annoncer l'état de sélection (ex: via <code>aria-selected</code> ou <code>aria-checked</code> au niveau de la ligne).
+    </p>
+  </div>
 
   <div className="best-practices">
     <h2>Bonnes pratiques d'utilisation</h2>
@@ -210,6 +222,7 @@ import '@/stories/styles/shared.css';
   .aria-management-section h2,
   .tri-state-section h2,
   .parent-child-section h2,
+  .decorative-mode-section h2,
   .best-practices h2,
   .resources-section h2 {
     border-bottom: 2px solid #eaecef;
@@ -279,7 +292,8 @@ import '@/stories/styles/shared.css';
   }
 
   .tri-state-section,
-  .parent-child-section {
+  .parent-child-section,
+  .decorative-mode-section {
     background-color: #f0f7ff;
     padding: 20px;
     border-radius: 8px;
@@ -287,7 +301,8 @@ import '@/stories/styles/shared.css';
   }
 
   .tri-state-section p,
-  .parent-child-section p {
+  .parent-child-section p,
+  .decorative-mode-section p {
     line-height: 1.6;
   }
 

package/src/components/Customs/SyPagination/SyPagination.vue

@@ -352,8 +352,6 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens';
-
 .sy-pagination {
 	display: flex;
 	align-items: center;

package/src/components/Customs/SyRadioGroup/SyRadioGroup.vue

@@ -2,6 +2,7 @@
 
 	import { computed, nextTick, onMounted, onUpdated, ref, watch } from 'vue'
 	import type { VRadioGroup } from 'vuetify/components'
+	import { VMessages } from 'vuetify/components'
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { locales } from './locales'
@@ -148,7 +149,7 @@
 
 	const errors = computed(() => validation.errors.value)
 	const warnings = computed(() => validation.warnings.value)
-	const successes = computed(() => validation.successes.value)
+	const displaySuccesses = computed(() => validation.displaySuccesses.value)
 
 	const getAriaChecked = (value: PropertyKey) => {
 		return model.value === value ? 'true' : 'false'
@@ -224,10 +225,6 @@
 		:error="hasError"
 		:error-messages="hasError ? errors : undefined"
 		:aria-describedby="messageId"
-		:messages="hasError ? errors :
-			hasWarning ? warnings :
-			(hasSuccess && props.showSuccessMessages ? successes : [])
-		"
 	>
 		<v-radio
 			v-for="opt in props.options"
@@ -258,14 +255,35 @@
 			{{ locales.labelledbyMessage }} <span v-if="props.label">{{ props.label + (props.displayAsterisk ? '*' : '')
 			}}</span>.
 		</span>
+		<template
+			v-if="!hasError && (hasWarning || hasSuccess)"
+			#details
+		>
+			<div class="v-input__details sy-radio-group__messages">
+				<VMessages
+					:active="hasWarning || (hasSuccess && displaySuccesses.length > 0)"
+					:messages="hasWarning ? warnings : displaySuccesses"
+				/>
+			</div>
+		</template>
 	</v-radio-group>
 </template>
 
 <style scoped>
+:deep(.v-input__details) {
+	display: block !important;
+	padding-inline: 0 !important;
+	margin-top: -10px !important;
+}
+
 :deep(.v-selection-control--error .v-selection-control__input) {
 	color: rgb(var(--v-theme-error));
 }
 
+.sy-radio-group__messages {
+	align-items: flex-start;
+}
+
 .sb-show-main.sb-main-centered #storybook-root {
 	margin: none !important;
 }

package/src/components/Customs/SyTabs/SyTabs.mdx

@@ -9,16 +9,6 @@ import * as SyTabsStories from "./SyTabs.stories";
   <p>Le composant `SyTabs` est un système de navigation par onglets conforme au Design System qui respecte les règles d'accessibilité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>. Il permet d'organiser le contenu en sections navigables facilement via une interface à onglets.</p>
 </div>
 
-Il implémente les fonctionnalités suivantes :
-
-- Navigation complète au clavier
-- Attributs ARIA appropriés
-- Gestion du focus accessible
-- Structure HTML sémantique
-- Design personnalisable
-
-<Canvas of={SyTabsStories.Default} />
-
 ## API
 
 <Controls of={SyTabsStories.Default} />
@@ -36,54 +26,6 @@ export interface TabItem {
 }
 ```
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
-Le composant `SyTabs` respecte les critères d'accessibilité RGAA suivants :
-
-### Structure sémantique
-
-- Utilise les éléments `<nav>`, `<ul>` et `<li>` pour une structure de navigation sémantique
-- Associe chaque onglet à son panneau de contenu via les attributs `aria-controls` et `aria-labelledby`
-- Utilise l'attribut `aria-label="Onglets de navigation"` sur l'élément `<nav>` pour identifier la navigation
-
-### Rôles ARIA
-
-- `role="tablist"` sur le conteneur de navigation
-- `role="presentation"` sur les éléments de liste
-- `role="tab"` sur les boutons d'onglets
-- `role="tabpanel"` sur les panneaux de contenu
-
-### États et propriétés
-
-- `aria-selected="true|false"` indique l'onglet actif
-- Attribut `hidden` sur les panneaux non actifs
-- Focus visible avec outline adapté au design system
-
-### Navigation au clavier
-
-Le composant implémente toutes les interactions clavier recommandées par les [Pratiques Authoring WAI-ARIA 1.2](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) :
-
-- **Flèches gauche/droite** : Navigation entre les onglets
-- **Touches Home/End** : Accès au premier/dernier onglet
-- **Entrée/Espace** : Activation de l'onglet
-- **Échap** : Gestion du focus
-
-### Contraste et visibilité
-
-- Contraste suffisant entre le texte et le fond (minimum 4.5:1)
-- Indication visuelle claire de l'onglet actif (changement de couleur et bordure)
-- Focus visible conforme aux exigences RGAA
-
-### Tests d'accessibilité
-
-Le composant a été testé avec :
-- Lecteurs d'écran (NVDA, VoiceOver)
-- Navigation clavier
-- Outils de vérification de contraste
-
-<Canvas of={SyTabsStories.Default} />
 
 ## Personnalisation