@cnamts/synapse 1.0.23 → 1.0.24

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

@@ -102,9 +102,6 @@
 	const isSubmitted = ref(false)
 
 	const validation = useValidation({
-		customRules: props.customRules,
-		warningRules: props.customWarningRules,
-		successRules: props.customSuccessRules,
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling,
@@ -135,7 +132,7 @@
 		: [],
 	)
 
-	const validateField = (value: boolean | null) => {
+	const validateField = async (value: boolean | null) => {
 		// Si en lecture seule ou si la valeur est null et non requise, pas de validation
 		if (props.readonly) {
 			validation.clearValidation()
@@ -157,7 +154,7 @@
 		}
 
 		// Validation standard
-		const result = validation.validateField(
+		const result = await validation.validateField(
 			value,
 			[...defaultRules.value, ...props.customRules],
 			props.customWarningRules,
@@ -175,11 +172,11 @@
 		validateField(model.value)
 	}
 
-	watch(model, (newValue) => {
+	watch(model, async (newValue) => {
 		if (!props.isValidateOnBlur) {
 			// Si le formulaire a été soumis et que la valeur change, on valide à nouveau
 			if (isSubmitted.value) {
-				const isValid = validateField(newValue)
+				const isValid = await validateField(newValue)
 				if (isValid) {
 					// La validation a réussi, effacer les erreurs
 					validation.clearValidation()
@@ -187,7 +184,7 @@
 			}
 			else {
 				// Comportement normal (hors soumission)
-				const isValid = validateField(newValue)
+				const isValid = await validateField(newValue)
 				// Si la validation réussit, s'assurer que les erreurs sont effacées
 				if (isValid && validation.hasError.value) {
 					validation.clearValidation()
@@ -206,7 +203,7 @@
 
 	const ariaChecked = computed(() => {
 		if (internalIndeterminate.value) return 'mixed'
-		return model.value ? 'true' : undefined
+		return model.value ? 'true' : 'false'
 	})
 
 	const labelColor = computed(() => {
@@ -243,9 +240,17 @@
 	const removeAriaAttributes = () => {
 		nextTick(() => {
 			if (checkboxRef.value) {
-				const checkboxInput = checkboxRef.value.$el.querySelector('input[type="checkbox"][aria-disabled="false"]')
+				const checkboxInput = checkboxRef.value.$el?.querySelector('input[type="checkbox"]')
 				if (checkboxInput) {
-					checkboxInput.removeAttribute('aria-disabled')
+					// Supprimer aria-disabled="false" car il est redondant
+					if (checkboxInput.getAttribute('aria-disabled') === 'false') {
+						checkboxInput.removeAttribute('aria-disabled')
+					}
+					// Supprimer aria-checked natif de Vuetify pour éviter les conflits
+					// Notre composant gère aria-checked au niveau du wrapper VCheckbox
+					if (checkboxInput.hasAttribute('aria-checked')) {
+						checkboxInput.removeAttribute('aria-checked')
+					}
 				}
 			}
 		})

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

@@ -79,6 +79,23 @@ import '@/stories/styles/shared.css';
     </div>
   </div>
 
+  <div className="aria-management-section">
+    <h2>Gestion des attributs ARIA</h2>
+    <p>
+      Pour garantir la conformité ARIA, le composant SyCheckbox gère activement les conflits potentiels 
+      avec l'implémentation native de Vuetify :
+    </p>
+    <ul>
+      <li><strong>Suppression des attributs conflictuels</strong> : Les attributs ARIA natifs de Vuetify sont automatiquement supprimés de l'élément input pour éviter les doublons</li>
+      <li><strong>Gestion centralisée</strong> : L'attribut <code>aria-checked</code> est géré au niveau du composant SyCheckbox et non au niveau de l'input natif</li>
+      <li><strong>Conformité garantie</strong> : Cette approche garantit que l'attribut <code>aria-checked</code> reflète toujours l'état réel du composant (true, false ou mixed)</li>
+    </ul>
+    <p>
+      Cette gestion préventive évite les erreurs d'audit d'accessibilité qui pourraient survenir 
+      lorsque plusieurs attributs ARIA contradictoires sont présents sur le même élément.
+    </p>
+  </div>
+
   <div className="tri-state-section">
     <h2>Fonctionnalité tri-état (indéterminé)</h2>
     <p>
@@ -190,6 +207,7 @@ import '@/stories/styles/shared.css';
 
   .criteria-section h2,
   .demo-section h2,
+  .aria-management-section h2,
   .tri-state-section h2,
   .parent-child-section h2,
   .best-practices h2,
@@ -243,6 +261,23 @@ import '@/stories/styles/shared.css';
     margin-bottom: 40px;
   }
 
+  .aria-management-section {
+    background-color: #fff9e6;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+    border-left: 5px solid #ff9800;
+  }
+
+  .aria-management-section ul {
+    padding-left: 20px;
+  }
+
+  .aria-management-section li {
+    margin-bottom: 8px;
+    line-height: 1.5;
+  }
+
   .tri-state-section,
   .parent-child-section {
     background-color: #f0f7ff;

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

@@ -6,21 +6,153 @@ 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é.
+// Scénarios d'accessibilité : cases à cocher avec différents états et configurations.
 
 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',
+				label: 'J\'accepte les conditions générales',
 				modelValue: false,
 				required: true,
 			},
 		})
 
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
 		const results = await axe(wrapper.element as HTMLElement)
 		assertNoA11yViolations(results, 'SyCheckbox – required labelled checkbox', {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no axe violations for indeterminate checkbox (aria-checked="mixed")', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Sélection partielle',
+				modelValue: false,
+				indeterminate: true,
+				controlsIds: ['child-1', 'child-2', 'child-3'],
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – indeterminate checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for checked checkbox with aria-checked="true"', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Option activée',
+				modelValue: true,
+				required: false,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – checked checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for unchecked checkbox with aria-checked="false"', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Option désactivée',
+				modelValue: false,
+				required: false,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – unchecked checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for disabled checkbox', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				label: 'Option désactivée',
+				modelValue: true,
+				disabled: true,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – disabled checkbox', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for checkbox with custom aria-label', async () => {
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				ariaLabel: 'Case à cocher personnalisée',
+				modelValue: false,
+			},
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – checkbox with aria-label', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no axe violations for checkbox with aria-labelledby', async () => {
+		// Créer un conteneur pour le test
+		const container = document.createElement('div')
+		document.body.appendChild(container)
+
+		// Créer un élément avec l'ID référencé
+		const labelElement = document.createElement('div')
+		labelElement.id = 'custom-label-id'
+		labelElement.textContent = 'Libellé personnalisé'
+		container.appendChild(labelElement)
+
+		const wrapper = mount(SyCheckbox, {
+			props: {
+				ariaLabelledby: 'custom-label-id',
+				modelValue: false,
+			},
+			attachTo: container,
+		})
+
+		// Attendre que removeAriaAttributes soit exécuté
+		await wrapper.vm.$nextTick()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(container as HTMLElement)
+		assertNoA11yViolations(results, 'SyCheckbox – checkbox with aria-labelledby', {
+			ignoreRules: ['region'],
+		})
+
+		// Nettoyer
+		wrapper.unmount()
+		document.body.removeChild(container)
+	})
 })

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

@@ -5,6 +5,7 @@ import SyTextField from '@/components/Customs/SyTextField/SyTextField.vue'
 import SyCheckbox from '@/components/Customs/SyCheckbox/SyCheckbox.vue'
 import SySelect from '@/components/Customs/Selects/SySelect/SySelect.vue'
 import { VBtn } from 'vuetify/components'
+import { fn } from '@storybook/test'
 
 export default {
 	title: 'Composants/Formulaires/SyForm',
@@ -42,6 +43,10 @@ export default {
 type Story = StoryObj<typeof SyForm>
 
 export const Basic: Story = {
+	args: {
+		onReset: fn(),
+		onSubmit: fn(),
+	},
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {
@@ -126,6 +131,11 @@ const onSubmit = (event: { isValid: boolean }) => {
 }
 
 export const CustomValidation: Story = {
+	args: {
+		validateOnSubmit: false,
+		onReset: fn(),
+		onSubmit: fn(),
+	},
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {
@@ -142,7 +152,7 @@ export const CustomValidation: Story = {
 
 			const confirmPasswordRules = computed(() => [
 				{ type: 'custom', options: {
-					validate: value => value === password.value || 'Les mots de passe ne correspondent pas',
+					validate: (value: string) => value === password.value,
 					message: 'Les mots de passe ne correspondent pas',
 				} },
 				{ type: 'required', options: { message: 'Veuillez confirmer le mot de passe' } },
@@ -150,7 +160,7 @@ export const CustomValidation: Story = {
 
 			const submitForm = async (e: { isValid: boolean }) => {
 				if (e.isValid) {
-					alert('Inscription réussie !')
+					alert('Inscription réussie ! (validate on submit = ' + args.validateOnSubmit + ')')
 				}
 				else {
 					alert('Formulaire invalide, veuillez corriger les erreurs.')
@@ -171,7 +181,7 @@ export const CustomValidation: Story = {
 		},
 		template: `
       <div>
-        <SyForm ref="form" v-bind="args" @submit="submitForm" :validate-on-submit="false">
+        <SyForm ref="form" v-bind="args" @submit="submitForm" :validate-on-submit="args.validateOnSubmit">
           <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" />
@@ -238,7 +248,7 @@ const passwordRules = computed(() => [
 
 const confirmPasswordRules = computed(() => [
 	{ type: 'custom', options: {
-		validate: value => value === password.value || 'Les mots de passe ne correspondent pas',
+		validate: (value: string) => value === password.value,
 		message: 'Les mots de passe ne correspondent pas',
 	} },
 	{ type: 'required', options: { message: 'Veuillez confirmer le mot de passe' } },
@@ -267,6 +277,10 @@ const validateManually = () => {
 }
 
 export const MixedFields: Story = {
+	args: {
+		onReset: fn(),
+		onSubmit: fn(),
+	},
 	render: args => ({
 		components: { SyForm, SyTextField, SySelect, SyCheckbox, VBtn },
 		setup() {
@@ -372,6 +386,9 @@ export const MixedFields: Story = {
 				if (event.isValid) {
 					alert('Formulaire valide ! Données: ' + JSON.stringify(formData.value))
 				}
+				else {
+					alert('Formulaire invalide, veuillez corriger les erreurs.')
+				}
 			}
 		</script>
 `,
@@ -381,6 +398,10 @@ export const MixedFields: Story = {
 }
 
 export const Reset: Story = {
+	args: {
+		onReset: fn(),
+		onSubmit: fn(),
+	},
 	render: args => ({
 		components: { SyForm, SyTextField, VBtn },
 		setup() {
@@ -408,7 +429,12 @@ export const Reset: Story = {
 				form.value?.clearValidation()
 			}
 
-			return { name, email, emailRules, form, submitForm, clearAll, args }
+			function onFormReset() {
+				alert('Formulaire réinitialisé !')
+				args.onReset?.()
+			}
+
+			return { name, email, emailRules, form, submitForm, clearAll, onFormReset, args }
 		},
 		template: `
       <SyForm ref="form" v-bind="args" @submit="submitForm" @reset="onFormReset">

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

@@ -82,9 +82,6 @@
 	const isSubmitted = ref(false)
 
 	const validation = useValidation({
-		customRules: props.customRules,
-		warningRules: props.customWarningRules,
-		successRules: props.customSuccessRules,
 		showSuccessMessages: props.showSuccessMessages,
 		fieldIdentifier: props.label,
 		disableErrorHandling: props.disableErrorHandling,
@@ -108,7 +105,7 @@
 			: [],
 	)
 
-	const validateField = (value: PropertyKey | null) => {
+	const validateField = async (value: PropertyKey | null) => {
 		// const stringValue = value != null ? String(value) : null
 
 		if (props.readonly) {
@@ -121,7 +118,7 @@
 			return true
 		}
 
-		const result = validation.validateField(
+		const result = await validation.validateField(
 			value,
 			[...defaultRules.value, ...props.customRules],
 			props.customWarningRules,
@@ -130,9 +127,9 @@
 		return !result.hasError
 	}
 
-	const validateOnSubmit = () => {
+	const validateOnSubmit = async () => {
 		isSubmitted.value = true
-		return validateField(model.value)
+		return await validateField(model.value)
 	}
 
 	const checkErrorOnBlur = () => {

package/src/components/Customs/SyTextField/SyTextField.mdx

@@ -62,5 +62,5 @@ Le champ adapte automatiquement son apparence selon son état :
 `}
 />
 
-<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>
+<a href="/?path=/docs/guide-du-dev-guide-des-formulaires-syform-validation-automatique--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>
 

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

@@ -279,17 +279,9 @@ const meta = {
 			description: 'Largeur du champ',
 			control: { type: 'text' },
 		},
-		'validation': {
-			description: 'Valide le champ avec la valeur donnée',
-			type: '(value: string | number | null) => void',
-		},
 		'validateOnSubmit': {
-			description: 'Valide le champ lors de la soumission du formulaire',
-			type: '() => void',
-		},
-		'checkErrorOnBlur': {
-			description: 'Vérifie les erreurs lors de la perte de focus',
-			type: '() => void',
+			description: 'Valide le champ avec la valeur donnée',
+			type: '(value: string | number | null) => Promise<void>',
 		},
 		'append': {
 			description: 'Slot pour ajouter du contenu à droite du champ',
@@ -1165,9 +1157,6 @@ export const WithTooltips: Story = {
 		`,
 	}),
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		docs: {
 			description: {
 				story: 'Exemple de champ avec des tooltips d\'information. Les icônes d\'information apparaissent automatiquement lorsque les props prependTooltip et/ou appendTooltip sont renseignées. La position des tooltips peut être contrôlée avec la prop tooltipLocation.',
@@ -1217,8 +1206,14 @@ export const ValidateOnBlur: Story = {
 			const value = ref(args.modelValue)
 			const fieldRef = ref()
 
-			function handleSubmit() {
-				const isValid = fieldRef.value?.validateOnSubmit()
+			watch(() => args.modelValue, (newValue) => {
+				if (value.value !== newValue) {
+					value.value = newValue
+				}
+			})
+
+			async function handleSubmit() {
+				const isValid = await fieldRef.value?.validateOnSubmit()
 				alert(isValid ? 'Formulaire valide !' : 'Formulaire invalide, veuillez corriger les erreurs.')
 			}
 
@@ -1231,9 +1226,8 @@ export const ValidateOnBlur: Story = {
 				</p>
 				<SyTextField
 					ref="fieldRef"
-					v-model="value"
 					v-bind="args"
-					@update:model-value="args.modelValue = $event"
+					v-model="value"
 				/>
 				<div class="mt-4">
 					<VBtn type="submit" color="primary">
@@ -1288,8 +1282,8 @@ import { SyTextField } from '@cnamts/synapse'
 const value = ref('')
 const fieldRef = ref()
 
-function handleSubmit() {
-	const isValid = fieldRef.value?.validateOnSubmit()
+async function handleSubmit() {
+	const isValid = await fieldRef.value?.validateOnSubmit()
 	if (!isValid) {
 		// Gérer l'erreur
 		return
@@ -1336,19 +1330,23 @@ export const FormValidation: Story = {
 				},
 			}]
 
-			const handleSubmit = () => {
+			const handleSubmit = async () => {
 				const fields = [
 					{ ref: nomField, name: 'Nom' },
 					{ ref: prenomField, name: 'Prénom' },
 					{ ref: ageField, name: 'Âge' },
 				]
 
-				const invalidFields = fields
-					.filter(({ ref }) => !ref.value?.validateOnSubmit())
-					.map(({ name }) => name)
+				const invalidFields: string[] = []
+				for (const { ref, name } of fields) {
+					const isValid = await ref.value?.validateOnSubmit()
+					if (!isValid) {
+						invalidFields.push(name)
+					}
+				}
 
 				if (invalidFields.length > 0) {
-					alert(`Les champs suivants sont invalides: ${invalidFields.join('\\n')}`)
+					alert(`Les champs suivants sont invalides: ${invalidFields.join(', ')}`)
 				}
 				else {
 					alert('Formulaire soumis avec succès !')
@@ -1561,9 +1559,13 @@ const nomField = ref()
 					{ ref: ageField, name: 'Âge' },
 				]
 
-				const invalidFields = fields
-					.filter(({ ref }) => !ref.value?.validateOnSubmit())
-					.map(({ name }) => name)
+				const invalidFields: string[] = []
+				for (const { ref, name } of fields) {
+					const isValid = await ref.value?.validateOnSubmit()
+					if (!isValid) {
+						invalidFields.push(name)
+					}
+				}
 
 				if (invalidFields.length > 0) {
 					alert('Les champs suivants sont invalides: ' + invalidFields.join('\\n'))