@cnamts/synapse 1.0.14 → 1.0.16

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/SyRadioGroup/Accessibilite.mdx

@@ -0,0 +1,263 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as SyRadioGroupStories from './SyRadioGroup.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import '../../../stories/styles/shared.css';
+
+<Meta of={SyRadioGroupStories} />
+
+<div className="accessibility-guide">
+<div className="header">
+  <h1>Guide d'Accessibilité du Composant SyRadioGroup</h1>
+</div>
+  
+  <div className="intro-section">
+    <img 
+      src={AccessibilityIcon} 
+      alt="Icône d'accessibilité" 
+      className="accessibility-icon"
+    />
+    <p className="intro-text">
+      Le composant SyRadioGroup a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C, 
+     <a href="https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio/#support-notice-header/" target="_blank" rel="noopener noreferrer"></a>. 
+      Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience utilisateur inclusive.
+    </p>
+</div>
+
+  <div className="criteria-section">
+    <h2>Critères d'accessibilité respectés</h2>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">🔍</span>
+        <h3>Structure sémantique</h3>
+      </div>
+      <ul>
+        <li><strong>Rôles ARIA appropriés</strong> : <code>role="radio"</code> pour le bouton radio</li>
+        <li><strong>État du bouton</strong> : <code>aria-checked</code> avec les valeurs <code>true</code>, <code>false</code></li>
+        <li><strong>Étiquetage explicite</strong> : Association claire entre le radio bouton et son label</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">⌨️</span>
+        <h3>Navigation clavier complète</h3>
+      </div>
+      <ul>
+        <li><strong>Fleche haut/ fleche bas </strong> : Pour naviguer entre les boutons radio</li>
+        <li><strong>Touche Tab</strong> : Navigation séquentielle entre les boutons radio</li>
+        <li><strong>Focus visible</strong> : Indication claire de l'élément actuellement focalisé</li>
+        <li><strong>Gestion des états multiples</strong> : Cycle entre les états non selectionné, selectionné</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">📱</span>
+        <h3>États et retours d'information</h3>
+      </div>
+      <ul>
+        <li><strong>État de sélection</strong> : <code>aria-checked</code> indique si le bouton est selectionné, non selectionné</li>
+        <li><strong>État de désactivation</strong> : <code>aria-disabled</code> signale les éléments non disponibles</li>
+        <li><strong>Validation visuelle</strong> : Couleurs et icônes spécifiques pour les états d'erreur, d'avertissement et de succès</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">🎨</span>
+        <h3>Personnalisation accessible</h3>
+      </div>
+      <ul>
+        <li><strong>Contraste configurable</strong> : Options de couleurs pour garantir un contraste suffisant</li>
+        <li><strong>Taille et espacement</strong> : Dimensions adaptées pour faciliter l'interaction tactile</li>
+        <li><strong>Compatibilité avec le mode contraste élevé</strong> : Utilisation de <code>currentColor</code> pour s'adapter aux paramètres système</li>
+        <li><strong>Densité ajustable</strong> : Options de densité pour s'adapter aux besoins des utilisateurs</li>
+      </ul>
+    </div>
+  </div>
+
+  <div className="demo-section">
+    <h2>Démonstration interactive</h2>
+    <p>
+      Explorez ci-dessous un exemple de SyRadioGroup entièrement accessible avec état indéterminé. 
+      Essayez de naviguer en utilisant uniquement votre clavier (fleche haut/bas pour naviguer, Espace pour activer) pour tester l'accessibilité.
+    </p>
+    <Primary />
+  </div>
+
+  <div className="best-practices">
+    <h2>Bonnes pratiques d'utilisation</h2>
+    <ul>
+      <li>Utilisez des libellés clairs et concis pour décrire l'action</li>
+      <li>Regroupez les boutons radio dans un radiogroup une légende explicative</li>
+      <li>Évitez de modifier l'état d'un bouton automatiquement sans action utilisateur explicite</li>
+      <li>Assurez-vous que la taille de la zone cliquable est suffisante (au moins 44×44 pixels pour les interfaces tactiles)</li>
+      <li>Fournissez un retour visuel et textuel clair pour les erreurs de validation</li>
+    </ul>
+  </div>
+
+  <div className="resources-section">
+    <h2>Ressources supplémentaires</h2>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/radio/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA</a></li>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio/#support-notice-header/" target="_blank" rel="noopener noreferrer">Exempler radiogroup WAI-ARIA</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://www.w3.org/TR/wai-aria-1.2/#radio" target="_blank" rel="noopener noreferrer">Spécification WAI-ARIA 1.2 pour le rôle radio</a></li>
+    </ul>
+  </div>
+</div>
+
+<style>
+{`
+  .accessibility-guide {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    color: #333;
+  }
+
+  .intro-section {
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    border-left: 5px solid #0077cc;
+  }
+
+  .accessibility-icon {
+    width: 60px;
+    height: 60px;
+    margin-right: 20px;
+    flex-shrink: 0;
+  }
+
+  .intro-text {
+    font-size: 1.1em;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  .criteria-section {
+    margin-bottom: 40px;
+  }
+
+  .criteria-section h2,
+  .demo-section h2,
+  .tri-state-section h2,
+  .parent-child-section h2,
+  .best-practices h2,
+  .resources-section h2 {
+    border-bottom: 2px solid #eaecef;
+    padding-bottom: 10px;
+    margin-top: 30px;
+    margin-bottom: 20px;
+    color: #0077cc;
+  }
+
+  .criteria-card {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin-bottom: 20px;
+  }
+
+  .criteria-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+  }
+
+  .criteria-icon {
+    font-size: 1.8em;
+    margin-right: 15px;
+  }
+
+  .criteria-header h3 {
+    margin: 0;
+    font-size: 1.3em;
+    color: #0077cc;
+  }
+
+  .criteria-card ul {
+    margin: 0;
+    padding-left: 20px;
+  }
+
+  .criteria-card li {
+    margin-bottom: 8px;
+    line-height: 1.5;
+  }
+
+  .demo-section {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 40px;
+  }
+
+  .tri-state-section,
+  .parent-child-section {
+    background-color: #f0f7ff;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+  }
+
+  .tri-state-section p,
+  .parent-child-section p {
+    line-height: 1.6;
+  }
+
+  .best-practices {
+    background-color: #f5f5f5;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+  }
+
+  .best-practices ul {
+    padding-left: 20px;
+  }
+
+  .best-practices li {
+    margin-bottom: 10px;
+    line-height: 1.5;
+  }
+
+  .resources-section {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+  }
+
+  .resources-section ul {
+    padding-left: 20px;
+  }
+
+  .resources-section li {
+    margin-bottom: 10px;
+  }
+
+  .resources-section a {
+    color: #0077cc;
+    text-decoration: none;
+  }
+
+  .resources-section a:hover {
+    text-decoration: underline;
+  }
+
+  code {
+    background-color: #f0f0f0;
+    padding: 2px 5px;
+    border-radius: 3px;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 0.9em;
+  }
+`}
+</style>

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

@@ -0,0 +1,37 @@
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
+import * as SyRadioGroupStories from "./SyRadioGroup.stories";
+
+<Meta of={SyRadioGroupStories} />
+
+<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>
+</div>
+
+Il étend les fonctionnalités de base de Vuetify avec :
+
+- Un système de validation avancé
+- Des états visuels (erreur, avertissement, succès)
+
+<Canvas of={SyRadioGroupStories.Default} />
+
+# API
+
+<Controls of={SyRadioGroupStories.Default} />
+
+## Validation
+
+Le composant supporte trois types de validation :
+- Règles d'erreur standard (`customRules`)
+- Règles d'avertissement (`customWarningRules`)
+- Règles de succès (`customSuccessRules`)
+
+### États visuels :
+
+La case à cocher adapte automatiquement son apparence selon son état :
+- Rouge pour les erreurs
+- Orange pour les avertissements
+- Vert pour les succès
+
+
+<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>