@cnamts/synapse 1.0.15 → 1.0.17

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

@@ -31,7 +31,7 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 	 * @param index Index de l'élément à activer
 	 * @param options Options supplémentaires
 	 */
-	const setActiveDescendant = (index: number, options: { scrollIntoView?: boolean } = { scrollIntoView: true }) => {
+	const setActiveDescendant = (index: number) => {
 		// Vérifier si l'index est valide
 		if (index >= 0 && index < formattedItems.value.length) {
 			// Mettre à jour l'ID pour ARIA
@@ -43,14 +43,6 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 			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) => {
@@ -58,6 +50,11 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 							item.classList.remove('keyboard-focused')
 						}
 					})
+
+					element.setAttribute('tabindex', '0')
+					element.focus()
+					element.classList.add('keyboard-focused')
+					element.scrollIntoView({ block: 'nearest' })
 				}
 			})
 		}
@@ -78,6 +75,7 @@ export function useSySelectKeyboard(options: UseSySelectKeyboardOptions) {
 		nextTick(() => {
 			const allItems = document.querySelectorAll('.v-list-item')
 			allItems.forEach((item) => {
+				item.setAttribute('tabindex', '-1')
 				item.classList.remove('keyboard-focused')
 			})
 		})

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

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SySelect from '../SySelect.vue'
+
+// Scénario d’accessibilité : select simple requis avec ouverture du menu.
+
+describe('SySelect – accessibility (axe)', () => {
+	it('has no obvious axe violations for required select with opened menu', async () => {
+		const items = [
+			{ text: 'Option 1', value: '1' },
+			{ text: 'Option 2', value: '2' },
+		]
+
+		const wrapper = mount(SySelect, {
+			props: {
+				items,
+				label: 'Choisissez une option',
+				required: true,
+			},
+			attachTo: document.body,
+		})
+
+		// Ouvrir le menu pour inclure la liste déroulante dans l’analyse axe
+		const activator = wrapper.find('.sy-select')
+		if (activator.exists()) {
+			await activator.trigger('click')
+		}
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'SySelect – required select with menu open', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+})

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

@@ -33,7 +33,7 @@ const meta = {
 		},
 		color: {
 			control: 'select',
-			options: ['primary', 'secondary', 'success', 'error', 'warning'],
+			options: ['primary', 'success', 'error', 'warning'],
 			description: 'Couleur de la case à cocher',
 		},
 		indeterminate: {
@@ -171,6 +171,9 @@ export const Indeterminate: Story = {
 		template: `<SyCheckbox v-model="checked" :indeterminate="indeterminate" v-bind="args" label="Case à cocher indéterminée" />`,
 	}),
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -204,6 +207,9 @@ Cette case à cocher est dans un état indéterminé, généralement utilisé lo
 
 export const WithControlsIds: Story = {
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -605,7 +611,6 @@ export const CustomColors: Story = {
 				code: `
 <div>
   <SyCheckbox v-model="checked1" label="Couleur primaire (par défaut)" />
-  <SyCheckbox v-model="checked2" label="Couleur secondaire" color="secondary" />
   <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" />
@@ -634,7 +639,6 @@ 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="checked2" label="Couleur secondaire" color="secondary" />
 				<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" />

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

@@ -3,6 +3,7 @@
 	import { useValidation, type ValidationRule } from '@/composables/validation/useValidation'
 	import { useValidatable } from '@/composables/validation/useValidatable'
 	import { locales } from './locales'
+	import { cnamSemanticTokens } from '@/designTokens/tokens/cnam/cnamSemantic'
 
 	const props = withDefaults(
 		defineProps<{
@@ -205,6 +206,22 @@
 		return model.value ? 'true' : 'false'
 	})
 
+	const labelColor = computed(() => {
+		if (props.disabled) return cnamSemanticTokens.colors.text.disabled
+		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 'primary':
+			return cnamSemanticTokens.colors.text.base
+		default:
+			return ''
+		}
+	})
+
 	// Propriétés ARIA personnalisées pour éviter les conflits
 	const messageId = computed(() => {
 		// Don't create messageId if aria-labelledby is provided
@@ -307,6 +324,7 @@
 			:aria-labelledby="props.ariaLabelledby"
 			:title="props.title"
 			:color="props.color"
+			:style="{ color: labelColor }"
 			:disabled="props.disabled"
 			:readonly="props.readonly"
 			:hide-details="props.hideDetails"
@@ -345,8 +363,8 @@
 	</div>
 </template>
 
-<style scoped>
-:deep(.v-selection-control--dirty .v-selection-control__input) {
+<style>
+:deep(.v-input--dirty .v-selection-control__input) {
 	color: v-bind('props.color');
 }
 

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

@@ -0,0 +1,26 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyCheckbox from '../SyCheckbox.vue'
+
+// Scénario d’accessibilité : case à cocher requise avec libellé.
+
+describe('SyCheckbox – accessibility (axe)', () => {
+	it('has no obvious axe violations for required checkbox with label', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'J’accepte les conditions générales',
+				modelValue: false,
+				required: true,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – required labelled checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/Customs/SyForm/SyForm.a11y.spec.ts

@@ -0,0 +1,33 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyForm from '../SyForm.vue'
+
+// Scénario d’accessibilité : formulaire contenant un champ et un bouton de soumission.
+
+describe('SyForm – accessibility (axe)', () => {
+	it('has no obvious axe violations for basic form structure', async () => {
+		const wrapper = mount(SyForm, {
+			slots: {
+				default: `
+					<div>
+						<label for="name">Nom</label>
+						<input id="name" name="name" type="text" />
+						<button type="submit">Envoyer</button>
+					</div>
+				`,
+			},
+			attachTo: document.body,
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyForm – basic form structure', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+})

package/src/components/Customs/SyForm/SyForm.mdx

@@ -55,16 +55,56 @@ Si vous souhaitez gérer vous-même la validation, vous pouvez désactiver la va
 
 ## Événements
 
-| Nom | Description | Signature |
-|-----|-------------|-----------|
-| `submit` | Émis lors de la soumission du formulaire | `(event: { isValid: boolean }) => void` |
+<table>
+  <thead>
+    <tr>
+      <th>Nom</th>
+      <th>Description</th>
+      <th>Signature</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>submit</code></td>
+      <td>Émis lors de la soumission du formulaire. Le payload contient le résultat de la validation.</td>
+      <td><code>(payload: &#123; isValid: boolean &#125;) =&gt; void</code></td>
+    </tr>
+    <tr>
+      <td><code>reset</code></td>
+      <td>Émis lors de la réinitialisation du formulaire (appel explicite de <code>reset()</code> ou bouton <code>type="reset"</code>).</td>
+      <td><code>() =&gt; void</code></td>
+    </tr>
+  </tbody>
+</table>
 
 ## Méthodes exposées
 
-| Nom | Description | Signature |
-|-----|-------------|-----------|
-| `validate` | Valide tous les composants du formulaire | `() => Promise<boolean>` |
-| `reset` | Réinitialise tous les composants du formulaire | `() => void` |
+<table>
+  <thead>
+    <tr>
+      <th>Nom</th>
+      <th>Description</th>
+      <th>Signature</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>validate</code></td>
+      <td>Valide tous les composants du formulaire (Vuetify + composants personnalisés) et met à jour l’état interne de validation.</td>
+      <td><code>() =&gt; Promise&lt;boolean&gt;</code></td>
+    </tr>
+    <tr>
+      <td><code>reset</code></td>
+      <td>Réinitialise tous les composants du formulaire et émet l’événement <code>reset</code>.</td>
+      <td><code>() =&gt; void</code></td>
+    </tr>
+    <tr>
+      <td><code>clearValidation</code></td>
+      <td>Efface uniquement les états de validation (messages d’erreur, etc.) sans modifier les valeurs des champs.</td>
+      <td><code>() =&gt; void</code></td>
+    </tr>
+  </tbody>
+</table>
 
 ## Le système de validation en cascade
 

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

@@ -15,6 +15,20 @@ export default {
 			description: 'Active ou désactive la validation automatique lors de la soumission',
 			defaultValue: true,
 		},
+		default: {
+			description: 'Contenu du formulaire, généralement des champs de formulaire comme SyTextField, SySelect, etc.',
+			table: {
+				type: {
+					summary: `
+						{
+							'isValid': boolean,
+							'validate': () => Promise<boolean>,
+							'reset': () => void,
+							'clear': () => void
+					}`,
+				},
+			},
+		},
 	},
 	parameters: {
 		docs: {
@@ -41,9 +55,8 @@ export const Basic: Story = {
 				{ type: 'required', options: { message: 'L\'email est obligatoire' } },
 			]
 
-			const submitForm = async () => {
-				const isValid = await form.value?.validate()
-				if (isValid) {
+			const submitForm = async (e: { isValid: boolean }) => {
+				if (e.isValid) {
 					alert('Formulaire valide !')
 				}
 				else {
@@ -65,16 +78,13 @@ export const Basic: Story = {
       </SyForm>
     `,
 	}),
-	args: {
-		validateOnSubmit: true,
-	},
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `
 <template>
-      <SyForm ref="form" v-bind="args" @submit="submitForm">
+      <SyForm ref="form" @submit="onSubmit">
         <div class="d-flex flex-column gap-4">
           <SyTextField v-model="name" label="Nom" required class="mb-2" />
           <SyTextField v-model="email" label="Email" :custom-rules="emailRules" class="mb-2" />
@@ -138,9 +148,8 @@ export const CustomValidation: Story = {
 				{ type: 'required', options: { message: 'Veuillez confirmer le mot de passe' } },
 			])
 
-			const submitForm = async () => {
-				const isValid = await form.value?.validate()
-				if (isValid) {
+			const submitForm = async (e: { isValid: boolean }) => {
+				if (e.isValid) {
 					alert('Inscription réussie !')
 				}
 				else {
@@ -162,7 +171,7 @@ export const CustomValidation: Story = {
 		},
 		template: `
       <div>
-        <SyForm ref="form" v-bind="args" @submit="submitForm">
+        <SyForm ref="form" v-bind="args" @submit="submitForm" :validate-on-submit="false">
           <div class="d-flex flex-column gap-4">
             <SyTextField v-model="username" label="Nom d'utilisateur" required class="mb-2" />
             <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" class="mb-2" />
@@ -190,7 +199,7 @@ export const CustomValidation: Story = {
 				code: `
 <template>
   <div>
-    <SyForm ref="form" @submit="onSubmit">
+    <SyForm ref="form" @submit="onSubmit" :validate-on-submit="false">
       <div class="d-flex flex-column gap-4">
         <SyTextField v-model="username" label="Nom d'utilisateur" required class="mb-2" />
         <SyTextField v-model="password" label="Mot de passe" type="password" :custom-rules="passwordRules" class="mb-2" />
@@ -287,9 +296,8 @@ export const MixedFields: Story = {
 				{ text: 'Italie', value: 'it' },
 			]
 
-			const submitForm = async () => {
-				const isValid = await form.value?.validate()
-				if (isValid) {
+			const submitForm = async (e: { isValid: boolean }) => {
+				if (e.isValid) {
 					alert(`Formulaire valide ! Données: ${JSON.stringify(formData.value)}`)
 				}
 				else {
@@ -318,7 +326,7 @@ export const MixedFields: Story = {
 				name: 'Template',
 				code: `
 <template>
-      <SyForm ref="form" v-bind="args" @submit="submitForm">
+      <SyForm ref="form" @submit="submitForm">
         <div class="d-flex flex-column gap-4">
           <SyTextField v-model="formData.name" label="Nom complet" required class="mb-2" />
           <SyTextField v-model="formData.email" label="Email" :customRules="emailCustomRules" class="mb-2" />
@@ -337,16 +345,16 @@ export const MixedFields: Story = {
 		<script setup lang="ts">
 
 			const formData = ref({
-			name: '',
-			email: '',
-			country: '',
+				name: '',
+				email: '',
+				country: '',
 			})
 
 			const countries = [
-			{ text: 'France', value: 'fr' },
-			{ text: 'Allemagne', value: 'de' },
-			{ text: 'Espagne', value: 'es' },
-			{ text: 'Italie', value: 'it' },
+				{ text: 'France', value: 'fr' },
+				{ text: 'Allemagne', value: 'de' },
+				{ text: 'Espagne', value: 'es' },
+				{ text: 'Italie', value: 'it' },
 			]
 
 			const emailCustomRules = [
@@ -360,10 +368,10 @@ export const MixedFields: Story = {
 				{ type: 'required', options: { message: "L'email est obligatoire" } },
 			]
 
-			const onSubmit = (event: { isValid: boolean }) => {
-			if (event.isValid) {
-				alert('Formulaire valide ! Données: ' + JSON.stringify(formData.value))
-			}
+			const submitForm = (event: { isValid: boolean }) => {
+				if (event.isValid) {
+					alert('Formulaire valide ! Données: ' + JSON.stringify(formData.value))
+				}
 			}
 		</script>
 `,
@@ -386,9 +394,8 @@ export const Reset: Story = {
 				{ type: 'required', options: { message: 'L\'email est obligatoire' } },
 			]
 
-			const submitForm = async () => {
-				const isValid = await form.value?.validate()
-				if (isValid) {
+			const submitForm = async (e: { isValid: boolean }) => {
+				if (e.isValid) {
 					alert('Formulaire valide !')
 				}
 				else {
@@ -416,16 +423,13 @@ export const Reset: Story = {
       </SyForm>
     `,
 	}),
-	args: {
-		validateOnSubmit: true,
-	},
 	parameters: {
 		sourceCode: [
 			{
 				name: 'Template',
 				code: `
 <template>
-      <SyForm ref="form" v-bind="args" @submit="submitForm" @reset="onFormReset">
+      <SyForm ref="form" @submit="submitForm" @reset="onFormReset">
         <div class="d-flex flex-column gap-4">
           <SyTextField v-model="name" label="Nom" required class="mb-2" />
           <SyTextField v-model="email" label="Email" :custom-rules="emailRules" class="mb-2" />

package/src/components/Customs/SyForm/SyForm.vue

@@ -2,9 +2,11 @@
 	import { ref } from 'vue'
 	import { useFormValidation } from '@/composables/validation/useFormValidation'
 
-	const props = defineProps<{
+	const props = withDefaults(defineProps<{
 		validateOnSubmit?: boolean
-	}>()
+	}>(), {
+		validateOnSubmit: true,
+	})
 
 	const emit = defineEmits<{
 		(e: 'submit', value: { isValid: boolean }): void
@@ -15,6 +17,7 @@
 	const form = ref<InstanceType<typeof import('vuetify/components').VForm> | null>(null)
 
 	const { validateAll, clearAll, resetAll } = useFormValidation()
+	const isValid = ref<boolean>(true)
 
 	// Methode de validation globale qui combine Vuetify et nos composants personnalises
 	const validate = async () => {
@@ -45,15 +48,19 @@
 		const customComponentsValid = await validateAll()
 
 		// Le formulaire est valide si les deux sont valides
-		return vuetifyValid && customComponentsValid
+		isValid.value = vuetifyValid && customComponentsValid
+
+		return isValid.value
 	}
 
 	const reset = () => {
 		// Reset custom components values
+		clearAll()
 		resetAll()
 		// Reset field values and validations for Vuetify form
 		form.value?.reset()
 		form.value?.resetValidation()
+		isValid.value = true
 		// Notify consumers so they can clear external models (e.g., v-model refs)
 		emit('reset')
 	}
@@ -63,7 +70,16 @@
 		// Clear Vuetify internal validation state
 		form.value?.resetValidation()
 		// Clear custom components validation states registered in the form
+		isValid.value = true
+		clearAll()
+	}
+
+	const handleReset = () => {
 		clearAll()
+		resetAll()
+		form.value?.resetValidation()
+		isValid.value = true
+		emit('reset')
 	}
 
 	// Gestion de la soumission du formulaire
@@ -88,9 +104,14 @@
 <template>
 	<v-form
 		ref="form"
-		@submit.prevent
-		@submit="handleSubmit"
+		@submit.prevent="handleSubmit"
+		@reset="handleReset"
 	>
-		<slot />
+		<slot
+			:is-valid="isValid"
+			:validate="validate"
+			:reset="reset"
+			:clear="clearValidation"
+		/>
 	</v-form>
 </template>

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

@@ -0,0 +1,37 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyIcon from './SyIcon.vue'
+
+// Scénario d’accessibilité : icône informative avec label.
+
+describe('SyIcon – accessibility (axe)', () => {
+	it('has no obvious axe violations for informative icon with label', async () => {
+		const wrapper = mount(SyIcon, {
+			props: {
+				icon: 'mdi-alert',
+				decorative: false,
+				label: 'Alerte importante',
+			},
+			global: {
+				stubs: {
+					'v-icon': {
+						template: '<span class="v-icon" role="img" :aria-label="ariaLabel"><slot></slot></span>',
+						props: ['color', 'size', 'role', 'aria-hidden', 'aria-label'],
+					},
+				},
+				directives: {
+					'rgaa-svg-fix': () => {},
+				},
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyIcon – informative icon with label', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -300,6 +300,11 @@ export const InformativeIcon: Story = {
 }
 
 export const AccessibilityDemo: Story = {
+	parameters: {
+		a11y: {
+			disable: true,
+		},
+	},
 	args: {
 		icon: mdiStar, // Using an icon from the imported icons
 	},

package/src/components/Customs/SyPagination/tests/SyPagination.a11y.spec.ts

@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import SyPagination from '../SyPagination.vue'
+
+// Scénario d’accessibilité : pagination avec libellé, aria-controls et page active.
+
+describe('SyPagination – accessibility (axe)', () => {
+	it('has no obvious axe violations with labelled navigation and active page', async () => {
+		const wrapper = mount(SyPagination, {
+			props: {
+				modelValue: 3,
+				pages: 10,
+				label: 'Pagination des résultats',
+				ariaControls: 'liste-resultats',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyPagination – labelled navigation', {
+			ignoreRules: ['region'],
+		})
+	})
+})