@cnamts/synapse 1.0.25 → 1.0.27

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

@@ -538,7 +538,7 @@ export const CustomColors: Story = {
 						/>
 						<SyCheckBoxGroup
 							v-model="value3"
-							color="success"
+							color="onSuccessVariant"
 							label="Couleur succès"
 							:options="options"
 							:show-success-messages="false"
@@ -552,7 +552,7 @@ export const CustomColors: Story = {
 						/>
 						<SyCheckBoxGroup
 							v-model="value5"
-							color="warning"
+							color="onWarningVariant"
 							label="Couleur avertissement"
 							:options="options"
 							:show-success-messages="false"
@@ -604,11 +604,22 @@ Le composant SyCheckBoxGroup peut être personnalisé avec différentes couleurs
 		},
 		template: `
 			<div>
-				<SyCheckBoxGroup v-model="value1" color="primary" label="Couleur primaire (par défaut)" :options="options" :show-success-messages="false" />
-				<SyCheckBoxGroup v-model="value2" color="secondary" label="Couleur secondaire" :options="options" :show-success-messages="false" />
-				<SyCheckBoxGroup v-model="value3" color="success" label="Couleur succès" :options="options" :show-success-messages="false" />
-				<SyCheckBoxGroup v-model="value4" color="error" label="Couleur erreur" :options="options" :show-success-messages="false" />
-				<SyCheckBoxGroup v-model="value5" color="warning" label="Couleur avertissement" :options="options" :show-success-messages="false" />
+              <SyCheckBoxGroup v-model="value1" color="primary" label="Couleur primaire (par défaut)"
+                               :options="options" :show-success-messages="false"
+              />
+              <SyCheckBoxGroup v-model="value2" color="secondary" label="Couleur secondaire" :options="options"
+                               :show-success-messages="false"
+              />
+              <SyCheckBoxGroup v-model="value3" color="onSuccessVariant" label="Couleur succès" :options="options"
+                               :show-success-messages="false"
+              />
+              <SyCheckBoxGroup v-model="value4" color="error" label="Couleur erreur" :options="options"
+                               :show-success-messages="false"
+              />
+              <SyCheckBoxGroup v-model="value5" color="onWarningVariant" label="Couleur avertissement"
+                               :options="options"
+                               :show-success-messages="false"
+              />
 			</div>
 		`,
 	}),

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>
 
@@ -298,7 +298,7 @@
 }
 
 .warning-field :deep(.v-messages__message) {
-	color: rgb(var(--v-theme-warning)) !important;
+	color: rgb(var(--v-theme-onWarningVariant)) !important;
 }
 
 .error-field :deep(.v-messages__message) {
@@ -310,7 +310,7 @@
 }
 
 .success-field :deep(.v-messages__message) {
-	color: rgb(var(--v-theme-success)) !important;
+	color: rgb(var(--v-theme-onSuccessVariant)) !important;
 }
 
 :deep(.v-messages__message) {

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

@@ -605,9 +605,9 @@ export const CustomColors: Story = {
 				code: `
 <div>
   <SyCheckbox v-model="checked1" label="Couleur primaire (par défaut)" />
-  <SyCheckbox v-model="checked3" label="Couleur succès" color="success" />
+  <SyCheckbox v-model="checked3" label="Couleur succès" color="onSuccessVariant" />
   <SyCheckbox v-model="checked4" label="Couleur erreur" color="error" />
-  <SyCheckbox v-model="checked5" label="Couleur avertissement" color="warning" />
+  <SyCheckbox v-model="checked5" label="Couleur avertissement" color="onWarningVariant" />
 </div>`,
 			},
 		],
@@ -633,9 +633,9 @@ Le composant SyCheckbox peut être personnalisé avec différentes couleurs pour
 		template: `
 			<div>
 				<SyCheckbox v-model="checked1" label="Couleur primaire (par défaut)" />
-				<SyCheckbox v-model="checked3" label="Couleur succès" color="success" />
-				<SyCheckbox v-model="checked4" label="Couleur erreur" color="error" />
-				<SyCheckbox v-model="checked5" label="Couleur avertissement" color="warning" />
+              <SyCheckbox v-model="checked3" label="Couleur succès" color="onSuccessVariant"/>
+              <SyCheckbox v-model="checked4" label="Couleur erreur" color="error"/>
+              <SyCheckbox v-model="checked5" label="Couleur avertissement" color="onWarningVariant"/>
 			</div>
 		`,
 	}),
@@ -784,9 +784,9 @@ Cette case à cocher utilise des règles de validation personnalisées et valide
 					required
 					display-asterisk
 				/>
-				<VBtn 
-					type="submit" 
-					color="primary"
+				<VBtn
+                    type="submit"
+                    color="primary"
 					class="mt-4"
 				>
 					Soumettre

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

@@ -204,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'
@@ -216,10 +216,10 @@
 		switch (props.color) {
 		case 'error':
 			return 'rgb(var(--v-theme-error))'
-		case 'success':
-			return 'rgb(var(--v-theme-success))'
-		case 'warning':
-			return 'rgb(var(--v-theme-warning))'
+		case 'onSuccessVariant':
+			return 'rgb(var(--v-theme-onSuccessVariant))'
+		case 'onWarningVariant':
+			return 'rgb(var(--v-theme-onWarningVariant))'
 		case 'primary':
 			return cnamSemanticTokens.colors.text.base
 		default:
@@ -347,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"
@@ -354,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"
@@ -387,6 +392,22 @@
 </template>
 
 <style scoped>
+.success-field :deep(.v-messages__message) {
+	color: rgb(var(--v-theme-onSuccessVariant)) !important;
+}
+
+.success-field :deep(.v-selection-control__input) {
+	color: rgb(var(--v-theme-onSuccessVariant));
+}
+
+.warning-field :deep(.v-messages__message) {
+	color: rgb(var(--v-theme-onWarningVariant)) !important;
+}
+
+.warning-field :deep(.v-selection-control__input) {
+	color: rgb(var(--v-theme-onWarningVariant));
+}
+
 :deep(.v-input--dirty .v-selection-control__input) {
 	color: v-bind('props.color');
 }

package/src/components/Customs/SyCheckbox/tests/SyCheckbox.spec.ts

@@ -122,8 +122,8 @@ describe('SyCheckbox', () => {
 		// Créer une règle de validation au format attendu par le composant
 		const customRule = {
 			type: 'custom',
-			validator: (value: boolean) => value === true,
 			options: {
+				validate: (value: boolean) => value === true,
 				message: 'This checkbox must be checked',
 				fieldIdentifier: 'Custom checkbox',
 			},

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

@@ -65,12 +65,6 @@ Le composant `SyIcon` implémente automatiquement les bonnes pratiques d'accessi
   </div>
 </div>
 
-## 🧪 Démonstration interactive
-
-La démonstration ci-dessous vous permet de voir comment les attributs d'accessibilité sont générés en fonction des propriétés du composant :
-
-<Canvas of={SyIconStoriesAccessibility.AccessibilityDemo} />
-
 ## ✅ Bonnes pratiques
 
 <div style={{ background: '#edf7ed', padding: '15px', borderRadius: '5px', borderLeft: '4px solid #4caf50', marginBottom: '20px' }}>

package/src/components/Customs/SyIcon/utils/tests/iconUtils.spec.ts

@@ -0,0 +1,107 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { createAccessibleIconAttributes, fixSvgAttributes } from '../iconUtils'
+
+describe('createAccessibleIconAttributes', () => {
+	describe('icône décorative', () => {
+		it('retourne role="presentation" et aria-hidden="true"', () => {
+			const attrs = createAccessibleIconAttributes(true)
+			expect(attrs.role).toBe('presentation')
+			expect(attrs['aria-hidden']).toBe('true')
+		})
+
+		it('ignore le label quand décorative', () => {
+			const attrs = createAccessibleIconAttributes(true, 'Mon label')
+			expect(attrs.role).toBe('presentation')
+			expect(attrs['aria-hidden']).toBe('true')
+		})
+	})
+
+	describe('icône fonctionnelle', () => {
+		it('retourne role="img" et aria-hidden undefined', () => {
+			const attrs = createAccessibleIconAttributes(false)
+			expect(attrs.role).toBe('img')
+			expect(attrs['aria-hidden']).toBeUndefined()
+		})
+
+		it('retourne aria-label avec le label fourni', () => {
+			const attrs = createAccessibleIconAttributes(false, 'Fermer la modale')
+			expect(attrs['aria-label']).toBe('Fermer la modale')
+		})
+
+		it('retourne aria-label undefined si aucun label fourni', () => {
+			const attrs = createAccessibleIconAttributes(false)
+			expect(attrs['aria-label']).toBeUndefined()
+		})
+
+		it('retourne aria-label undefined si label est une chaîne vide', () => {
+			const attrs = createAccessibleIconAttributes(false, '')
+			expect(attrs['aria-label']).toBeUndefined()
+		})
+	})
+})
+
+describe('fixSvgAttributes', () => {
+	beforeEach(() => {
+		vi.useFakeTimers()
+	})
+
+	afterEach(() => {
+		vi.useRealTimers()
+	})
+
+	it('ne fait rien si element est null', () => {
+		expect(() => fixSvgAttributes(null, true)).not.toThrow()
+		vi.runAllTimers()
+	})
+
+	it('supprime l\'attribut role sur le SVG quand décorative', () => {
+		const container = document.createElement('div')
+		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+		svg.setAttribute('role', 'img')
+		container.appendChild(svg)
+
+		fixSvgAttributes(container, true)
+		vi.runAllTimers()
+
+		expect(svg.hasAttribute('role')).toBe(false)
+	})
+
+	it('supprime aria-hidden sur le SVG quand fonctionnelle', () => {
+		const container = document.createElement('div')
+		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+		svg.setAttribute('aria-hidden', 'true')
+		container.appendChild(svg)
+
+		fixSvgAttributes(container, false)
+		vi.runAllTimers()
+
+		expect(svg.hasAttribute('aria-hidden')).toBe(false)
+	})
+
+	it('ne fait rien si aucun SVG dans l\'élément', () => {
+		const container = document.createElement('div')
+		container.appendChild(document.createElement('span'))
+
+		expect(() => {
+			fixSvgAttributes(container, true)
+			vi.runAllTimers()
+		}).not.toThrow()
+	})
+
+	it('agit de manière asynchrone (setTimeout)', () => {
+		const container = document.createElement('div')
+		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+		svg.setAttribute('role', 'img')
+		container.appendChild(svg)
+
+		fixSvgAttributes(container, true)
+
+		// Avant le tick : l'attribut est encore présent
+		expect(svg.hasAttribute('role')).toBe(true)
+
+		vi.runAllTimers()
+
+		// Après le tick : supprimé
+		expect(svg.hasAttribute('role')).toBe(false)
+	})
+})

package/src/components/Customs/SyRadioGroup/SyRadioGroup.mdx

@@ -5,7 +5,7 @@ import * as SyRadioGroupStories from "./SyRadioGroup.stories";
 
 <div className="header">
   <h1>SyRadioGroup</h1>
-  <p>Le composant `SyRadioGroup` est une case à cocher qui étend le composant `VRadio` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>.</p>
+  <p>Le composant `SyRadioGroup` est un groupe de boutons radio qui étend le composant `VRadio` de Vuetify, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>.</p>
 </div>
 
 Il étend les fonctionnalités de base de Vuetify avec :
@@ -28,7 +28,7 @@ Le composant supporte trois types de validation :
 
 ### États visuels :
 
-La case à cocher adapte automatiquement son apparence selon son état :
+Le groupe de boutons radio adapte automatiquement son apparence selon son état :
 - Rouge pour les erreurs
 - Orange pour les avertissements
 - Vert pour les succès