@cnamts/synapse 0.0.4-alpha → 0.0.6-alpha

package/src/stories/GuideDuDev/CommentUtiliserLesRules.mdx

@@ -0,0 +1,120 @@
+import {Meta, Source} from '@storybook/addon-docs/blocks';
+
+<Meta title="Guide Du Dev/Comment utiliser les rules"/>
+
+# Comment utiliser les règles de validation
+
+Ce guide décrit comment utiliser le composable `useFieldValidation` pour créer des règles de validation flexibles et personnalisées dans votre projet Vue.js.
+
+---
+
+## Introduction
+
+Le composable `useFieldValidation` vous permet de définir des règles de validation dynamiques pour différents champs dans vos formulaires. Ce composable est conçu pour être flexible, réutilisable et facilement intégrable avec des bibliothèques comme Vuetify.
+
+---
+
+## Structure du composable
+
+### Type `RuleOptions`
+
+<Source dark code={`
+type RuleOptions = {
+  fieldName?: string; // Nom du champ utilisé dans les messages d'erreur
+  message?: string; // Message personnalisé pour la règle
+  successMessage?: string; // Message personnalisé de validation réussie
+  length?: number; // Longueur minimale ou maximale
+  value?: number; // Valeur minimale ou maximale
+  pattern?: RegExp; // Motif à valider
+  ignoreSpace?: boolean; // Ignorer les espaces lors de la validation de longueur
+  validate?: (value: any) => boolean | string; // Validation personnalisée
+};
+`}
+/>
+
+### Type `ValidationResult`
+
+<Source dark code={`
+type ValidationResult = {
+  success?: string; // Message de validation réussie
+  error?: string; // Message d'erreur
+};
+`}
+/>
+
+---
+
+## Exemple d'intégration
+
+### Script Vue.js
+
+<Source dark code={`
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { useFieldValidation } from '@cnamts/synapse';
+
+const { generateRules } = useFieldValidation();
+
+const firstName = ref('');
+const email = ref('');
+const age = ref('');
+
+const rules = {
+  firstName: generateRules([
+    { type: 'required', options: { message: 'Ce champ est requis.' } },
+    { type: 'minLength', options: { length: 3, ignoreSpace: true } },
+    { type: 'maxLength', options: { length: 20 } },
+  ]),
+  email: generateRules([
+    { type: 'required', options: { fieldName: 'Email' } },
+    { type: 'email' },
+  ]),
+  age: generateRules([
+    { type: 'min', options: { value: 18 } },
+    { type: 'max', options: { value: 99 } },
+  ]),
+};
+
+const validateField = (field: string) => {
+  return rules[field].every((rule) => rule(field));
+};
+
+const handleSubmit = () => {
+  if (validateField('firstName') && validateField('email') && validateField('age')) {
+    alert('Formulaire valide.');
+  } else {
+    alert('Merci de vérifier les champs.');
+  }
+};
+</script>
+`}
+/>
+
+Vous pouvez retrouver un exemple complet sur le [NirField](/docs/composants-formulaires-nirfield--docs).
+
+---
+
+## Fonctionnalités supportées
+
+- **Validation requise** (`required`) : Assurez-vous qu'un champ est rempli.
+- **Longueur minimale** (`minLength`) : Validez un champ avec un nombre minimal de caractères.
+- **Longueur maximale** (`maxLength`) : Limitez un champ à un nombre maximal de caractères.
+- **Valeur minimale** (`min`) : Assurez-vous que la valeur est au moins égale à une valeur définie.
+- **Valeur maximale** (`max`) : Assurez-vous que la valeur ne dépasse pas une valeur définie.
+- **Validation par motif** (`matchPattern`) : Validez un champ à l'aide d'une expression régulière.
+- **Validation d'email** (`email`) : Assurez-vous que la valeur est une adresse email valide.
+- **Validation personnalisée** (`custom`) : Implémentez des règles spécifiques via une fonction.
+
+---
+
+## Bonnes pratiques
+
+- **Centralisation** : Centralisez la logique de validation pour garantir une maintenance facile.
+- **Accessibilité** : Vérifiez que les messages d'erreur sont clairs et concis pour tous les utilisateurs.
+
+---
+
+## Conclusion
+
+Avec `useFieldValidation`, vous disposez d'un outil pour gérer les validations de vos formulaires dans Vue.js. Ce composable est idéal pour créer des validations personnalisées et intégrer des champs avec des bibliothèques comme Vuetify.
+

package/src/stories/GuideDuDev/components.stories.ts

@@ -1,21 +1,21 @@
-import Alert from '../../components/Alert/Alert.vue'
+import SyAlert from '@/components/SyAlert/SyAlert.vue'
 
 export default {
 	title: 'Guide Du Dev/Rapport de bug',
-	component: Alert,
+	component: SyAlert,
 }
 export const Info = {
 	render: () => {
 		return {
-			components: { Alert },
+			components: { SyAlert },
 			setup() {
 				return { }
 			},
 			template: `
-				<Alert type="info" variant="tonal" :closable="false">
+				<SyAlert type="info" variant="tonal" :closable="false">
 					<template #default>Lorsque vous créez une reproduction minimale, supprimez tous les éléments, propriétés, variables, données et autres qui ne sont pas nécessaires pour reproduire le bug. Cela facilitera le traitement du rapport et le temps qu’il faudra pour identifier puis résoudre le bug.
 					</template>
-				</Alert>
+				</SyAlert>
 			`,
 		}
 	},

package/src/stories/GuideDuDev/moduleDeNotification.mdx

@@ -122,7 +122,7 @@ Utilisation dans un composant Vue
 <Source dark code={`
 <script setup lang="ts">
 	import { VBtn } from 'vuetify/components'
-	import NotificationBar from '@cnamts/synapse'
+	import { NotificationBar } from '@cnamts/synapse'
 	import { useNotificationService } from '@cnamts/synapse/src/services/NotificationService'
 	import type { Notification } from '@cnamts/synapse/src/components/NotificationBar/types'
 

package/src/stories/{Fondamentaux → Guidelines}/Accessibilite/Accessibilite.stories.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/vue3'
 import { AccessibiliteItems } from './AccessibiliteItems'
 
 export default {
-	title: 'Fondamentaux/Accessibilité',
+	title: 'Guidelines/Accessibilité',
 }
 
 export const AccessibilitePanel: StoryObj = {

package/src/stories/{Fondamentaux → Guidelines}/EcoConception/Econception.stories.ts

@@ -1,9 +1,9 @@
 import { VExpansionPanels, VExpansionPanel } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
-import { ecoDesignItems } from '@/stories/Fondamentaux/EcoConception/ecoDesignItems'
+import { ecoDesignItems } from '@/stories/Guidelines/EcoConception/ecoDesignItems'
 
 export default {
-	title: 'Fondamentaux/Éco-conception',
+	title: 'Guidelines/Éco-conception',
 }
 
 export const EcoPanel: StoryObj = {

package/src/stories/Guidelines/Vuetify/Vuetify.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Vuetify.stories.ts';
+
+<Meta of={AccessStories} />
+
+Vuetify & Accessibilité
+=============
+
+<Story of={AccessStories.Legende} />
+
+<Story of={AccessStories.VuetifyPanel} />

package/src/stories/Guidelines/Vuetify/Vuetify.stories.ts

@@ -0,0 +1,138 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, VRow, VCol } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { VuetifyItems } from './VuetifyItems'
+import { mdiCheckboxMarkedCircleOutline, mdiLinkVariant, mdiAlertCircleOutline } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircleOutline
+const linkICon = mdiLinkVariant
+const iconAlert = mdiAlertCircleOutline
+export default {
+	title: 'Guidelines/Vuetify',
+}
+
+export const VuetifyPanel: StoryObj = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+			setup() {
+				return { VuetifyItems, checkIcon, iconAlert, linkICon }
+			},
+			template: `
+				<div v-for="(item, index) in VuetifyItems" :key="index">
+					<v-data-table
+						:items="item.items"
+						:items-per-page="23"
+						hide-default-footer>
+						<template v-slot:header.name="{ header }">
+							Composant Vuetify
+						</template>
+
+						<template v-slot:header.errorImportants="{ header }">
+							Erreurs bloquantes (Tanaguru)
+						</template>
+						<template v-slot:item.name="{ item }">
+							<v-chip v-if="item.errorImportants == 0 && item.errorIndeterminated == 0"
+									style="font-size: 12px; line-height: 15px;">
+								<VIcon style="margin-right: 2px;" :icon="checkIcon"/>
+								{{ item.name }}
+							</v-chip>
+							<v-chip v-else style="font-size: 12px; line-height: 15px;">
+								<VIcon style="margin-right: 2px;" :icon="iconAlert"/>
+								{{ item.name }}
+							</v-chip>
+						</template>
+
+						<template v-slot:item.solution="{ item }">
+							<div v-if="item.solution.length > 0">
+							<span v-for="(item, index) in item.solution"
+								  style="display:flex; align-items: center; font-size: 12px; line-height: 15px; font-weight: bold">
+								{{ item.name }} <a :href="item.href" v-if="item.href">
+								<VBtn color="primary" style="margin-left: 5px;" :icon="linkICon" size="small"
+									  variant="text"/></a>
+							</span>
+							</div>
+						</template>
+
+						<template v-slot:item.errorImportants="{ item }">
+							<div v-if="item.errorImportants.length === 0">
+								<p style="margin-top: 5px; margin-bottom: 5px; font-size: 12px;">Pas d'erreur
+									d'accessibilité relevée à ce jour</p>
+							</div>
+							<div v-else v-for="item in item.errorImportants" :key="index"
+								 style="width: 100% !important; font-size: 12px; line-height: 15px;">
+								<p style="margin-top: 5px; margin-bottom: 5px;">
+									<span style="font-weight: bold;">{{ item.match('[0-9.]+')?.join('') || '' }} </span>
+									{{ item.replace(/[0-9.]/g, '') }}
+								</p>
+							</div>
+						</template>
+
+						<template v-slot:item.errorIndeterminated="{ item }">
+							<div v-if="item.errorIndeterminated.length === 0">
+								<p style="margin-top: 5px; margin-bottom: 5px; font-size: 12px;">Pas d'erreur
+									d'accessibilité relevée à ce jour</p>
+							</div>
+							<div v-else v-for="item in item.errorIndeterminated" :key="index"
+								 style="width: 100% !important; font-size: 12px; line-height: 15px;">
+								<p style="margin-top: 5px; margin-bottom: 5px;">
+									<span style="font-weight: bold;">{{ item.match('[0-9.]+')?.join('') || '' }} </span>
+									{{ item.replace(/[0-9.]/g, '') }}
+								</p>
+							</div>
+						</template>
+
+						<template v-slot:header.errorIndeterminated="{ header }">
+							Erreurs indéterminées (Tanaguru)
+						</template>
+						<template v-slot:header.solution="{ header }">
+							Solution
+						</template>
+
+						<template v-slot:header.href="{ header }" style="display:none">
+							<th v-if="false" style="display:none"></th>
+						</template>
+
+						<template v-slot:item.href="{ item }" style="display:none">
+							<td v-if="false">{{ item.someColumn }}</td>
+						</template>
+					</v-data-table>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+	},
+	render: (args) => {
+		return {
+			components: { VIcon, VRow, VCol },
+			setup() {
+				return { args, checkIcon, iconAlert }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 13/12/2024</p>
+
+				<VRow class="mt-2 mb-5">
+				<VCol cols="12" sm="12" class="m-2 p-2 v-col-auto">
+				<div style="font-size: 13px;">
+					<p>L'étude relève que la majorité des composants garantissent l'accessibilité numérique par défaut tel que défini par le RGAA. <br />Nous identifions néanmoins pour certains composants qu'un travail d'ajustement est nécessaire. Ce travail peut être réalisé directement par les produits.<br />Dans une démarche d'accélération de la fabrication, nous proposons pour chaque composant relevant d'un manque sur le sujet des solutions afin d'en faciliter la mise en conformité. Ces solutions peuvent être de nature : composant ou recommandation.</p>
+					<br />
+					<p>Pour chaque composant, nous indiquons les erreurs remontées par l'outil Tanaguru : Erreurs bloquantes et indéterminées.<br />Ces erreurs doivent être analysées contextuellement. Pour rappel, l'accessibilité numérique ne se mesure par sur des composants seuls dénués de contexte.<br />Une appréciation de la part du développeur est nécessaire pour en évaluer la pertinence.</p>
+				</div>
+                </VCol>
+
+                <VCol cols="12" sm="4" class="m-2 p-2 v-col-auto">
+				  <p style="font-size: 13px;"><VIcon style="margin-right: 2px;" :icon="iconAlert" />  Composant non conforme par défaut.</p>
+                  <p style="font-size: 13px;"><VIcon style="margin-right: 2px;" :icon="checkIcon" />  Composant conforme.</p>
+                </VCol>
+               
+              </VRow>
+			 
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/Guidelines/Vuetify/VuetifyItems.ts

@@ -0,0 +1,350 @@
+export const VuetifyItems = [
+	{
+		items: [
+			{
+				name: 'VTextField',
+				errorImportants: ['11.1.1 Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.'],
+				errorIndeterminated: [
+					'3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions',
+					'11.13.1 La finalité d\'un champs de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l\'utilisateur',
+					'12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier.',
+
+				],
+				solution: [
+					{
+						name: 'SyTextField',
+						href: '/?path=/docs/composants-formulaires-sytextfield--docs',
+					},
+
+				],
+			},
+			{
+				name: 'Select',
+				errorImportants: [
+
+					'8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié',
+					'11.1.1 Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+					'12.11 Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier',
+
+				],
+				errorIndeterminated: [
+					'3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions',
+					'10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance',
+					'11.13 La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur',
+					'11.2.2 Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé',
+					'11.2.3 Chaque étiquette implémentée via l’attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée',
+					'12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier.',
+
+				],
+				solution: [
+					{
+						name: 'SySelect',
+						href: '/?path=/docs/composants-formulaires-syselect--docs',
+					},
+					{
+						name: 'SyInputSelect',
+						href: '/?path=/docs/composants-formulaires-syinputselect--docs',
+					},
+					{
+						name: 'SyBtnSelect',
+						href: '/?path=/docs/composants-formulaires-sybtnselect--docs',
+					},
+				],
+			},
+			{
+				name: 'Divider',
+				errorImportants: [
+
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [],
+			},
+			{
+				name: 'Buttons',
+				errorImportants: [
+
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [],
+			},
+			{
+				name: 'Chips',
+				errorImportants: [
+
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [],
+			},
+			{
+				name: 'Tooltip',
+				errorImportants: [
+
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [],
+			},
+			{
+				name: 'Cards',
+				errorImportants: [
+					'3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions',
+					'8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié',
+					'11.1.1 Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'Tabs',
+				errorImportants: [
+					'12.11 Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier',
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+
+			{
+				name: 'Textarea',
+				errorImportants: [
+					'11.1.1 Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+				],
+				errorIndeterminated: [
+
+					'3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions',
+					'10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance',
+					'11.13 La finalité d’un champ de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l’utilisateur',
+					'12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier.',
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+
+			{
+				name: 'Sliders',
+				errorImportants: [
+					'11.1.1 Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'Table',
+				errorImportants: [
+					'5.4 Pour chaque tableau de données ayant un titre, le titre est-il correctement associé au tableau de données',
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'Expansion panels',
+				errorImportants: [
+
+				],
+				errorIndeterminated: [
+
+					'10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance',
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'Breadcrumbs',
+				errorImportants: [
+					'3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions',
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+
+			{
+				name: 'Progress Linear',
+				errorImportants: [
+					'8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié',
+					'11.1.1 Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'Progress circular',
+				errorImportants: [
+					'1.1.5 Chaque image vectorielle (balise <svg>) porteuse d’information, vérifie-t-elle ces conditions -La balise <svg> possède un attribut WAI-ARIA role="img" ;',
+					'1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance',
+					'8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié',
+					'11.1.1 Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+
+			{
+				name: 'Lists',
+				errorImportants: [
+					'3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions',
+					'7.4 Pour chaque script qui initie un changement de contexte, l’utilisateur est-il averti ou en a-t-il le contrôle',
+					'8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié',
+					'11.1.1 Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+				],
+				errorIndeterminated: [
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'Steppers',
+				errorImportants: [
+					'3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions',
+
+				],
+				errorIndeterminated: [
+					'3.1.2 Pour chaque indication de couleur donnée par un texte, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'Combobox',
+				errorImportants: [
+					'8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié',
+					'11.1.1 Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+					'12.11 Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier',
+				],
+				errorIndeterminated: [
+					'3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions',
+					'10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance',
+					'11.13.1 La finalité d\'un champs de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l\'utilisateur',
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'Autocomplete',
+				errorImportants: [
+					'3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions',
+					'8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié',
+					'11.1.1 Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
+					'12.11 Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier',
+				],
+				errorIndeterminated: [
+					'3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions',
+					'10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance',
+					'11.13.1 La finalité d\'un champs de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l\'utilisateur',
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'Switches',
+				errorImportants: [
+					'8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié',
+
+				],
+				errorIndeterminated: [
+					'10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance',
+					'11.2.3 Chaque étiquette implémentée via l’attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée',
+					'12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier.',
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'Checkboxes',
+				errorImportants: [
+					'8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié',
+
+				],
+				errorIndeterminated: [
+					'10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance',
+					'11.2.3 Chaque étiquette implémentée via l’attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée',
+					'12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier.',
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'RadioButtons',
+				errorImportants: [
+					'8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié',
+
+				],
+				errorIndeterminated: [
+					'10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance',
+					'11.2.3 Chaque étiquette implémentée via l’attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée',
+					'12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier.',
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+			{
+				name: 'OTP Input',
+				errorImportants: [
+					'11.1 Chaque champ de formulaire a-t-il une étiquette',
+					'11.4 Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés',
+
+				],
+				errorIndeterminated: [
+					'10.8 Pour chaque page web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance',
+					'11.2.3 Chaque étiquette implémentée via l’attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée',
+					'11.13.1 La finalité d\'un champs de saisie peut-elle être déduite pour faciliter le remplissage automatique des champs avec les données de l\'utilisateur',
+
+				],
+				solution: [{
+					name: 'En étude',
+				}],
+			},
+		],
+	},
+
+]