@cnamts/synapse 0.0.5-alpha → 0.0.7-alpha

package/src/components/NirField/Accessibilite.stories.ts

@@ -0,0 +1,214 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Formulaires/NirField/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+              <div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+                <v-col cols="6">
+                  <div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+                    <h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+                    <div style="display: flex; align-items: center;">
+                      <v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+                             rounded>Tanaguru
+                      </v-btn>
+                    </div>
+                  </div>
+
+                  <v-expansion-panels value="opened" multiple>
+                    <v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index"
+                                       style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+                      <v-expansion-panel-title>
+                        <VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+                        {{ item.title }}
+                      </v-expansion-panel-title>
+                      <v-expansion-panel-text>
+                        <v-expansion-panels>
+                          <v-expansion-panel>
+                            <v-expansion-panel-title
+                                style="font-weight: bold; font-size: 13px; line-height: 16px;">
+                              {{ item.subtitle }}
+                            </v-expansion-panel-title>
+                            <v-expansion-panel-text>
+                              <div v-for="(value, i) in item.items" :key="i">
+                                <p style="font-size: 13px;line-height: 16px;">
+                                  {{ value.precision }}
+                                </p>
+                                <div v-for="element in value.solution"
+                                     style="margin-top:15px; font-size: 13px;line-height: 16px;">
+                                  <p style="font-weight: bold;">Méthodologie du test : <a
+                                      href="value.link" target="blank">
+                                    <VIcon :icon="linkICon"/>
+                                  </a></p>
+                                  <p>{{ element.info1 }}</p>
+                                  <p>{{ element.info2 }}</p>
+                                  <p>{{ element.info3 }}</p>
+                                </div>
+                                <span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+                              </div>
+                            </v-expansion-panel-text>
+                          </v-expansion-panel>
+                          <v-expansion-panel v-for="(i, index) in item.items2" :key="i" style="margin-top: 10px;">
+                            <v-expansion-panel-title
+                                style="font-weight: bold; font-size: 13px; line-height: 16px;">
+                              {{ i.subtitle }}
+                            </v-expansion-panel-title>
+                            <v-expansion-panel-text>
+                              <div>
+                                <p style="font-size: 13px;line-height: 16px;">
+                                  {{ i.precision }}
+                                </p>
+                                <div v-for="(value, index) in i.solution"
+                                     style="margin-top:15px; font-size: 13px;line-height: 16px;">
+                                  <p style="font-weight: bold;">Méthodologie du test : <a
+                                      href="{{i.link}}" target="blank">
+                                    <VIcon :icon="linkICon"/>
+                                  </a></p>
+                                  <p>{{ value.info1 }}</p>
+                                  <p>{{ value.info2 }}</p>
+                                  <p>{{ value.info3 }}</p>
+                                </div>
+                                <span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+                              </div>
+                            </v-expansion-panel-text>
+                          </v-expansion-panel>
+                        </v-expansion-panels>
+                      </v-expansion-panel-text>
+                    </v-expansion-panel>
+                  </v-expansion-panels>
+                </v-col>
+                <v-col cols="6">
+                  <div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+                    <h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+                    <div style="display: flex; align-items: center;">
+                      <v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+                             rounded>Tanaguru
+                      </v-btn>
+                    </div>
+                  </div>
+                  <v-expansion-panels value="opened" multiple>
+                    <v-expansion-panel
+                        v-for="(item, index) in AccessibiliteItemsValidated"
+                        :key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+                      <v-expansion-panel-title>
+                        <VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+                        {{ item.title }}
+                      </v-expansion-panel-title>
+                      <v-expansion-panel-text>
+                        <v-expansion-panels>
+                          <v-expansion-panel v-for="(i, index) in item.items2" :key="i" style="margin-bottom: 10px;">
+                            <v-expansion-panel-title
+                                style="font-weight: bold; font-size: 13px; line-height: 16px;">
+                              {{ i.subtitle }}
+                            </v-expansion-panel-title>
+                            <v-expansion-panel-text>
+                              <div>
+                                <p style="font-size: 13px;line-height: 16px;">
+                                  {{ i.precision }}
+                                </p>
+                                <div v-for="(value, index) in i.solution"
+                                     style="margin-top:15px; font-size: 13px;line-height: 16px;">
+                                  <p style="font-weight: bold;">Méthodologie du test : <a
+                                      href="{{i.link}}" target="blank">
+                                    <VIcon :icon="linkICon"/>
+                                  </a></p>
+                                  <p>{{ value.info1 }}</p>
+                                  <p>{{ value.info2 }}</p>
+                                  <p>{{ value.info3 }}</p>
+                                </div>
+                                <span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+                              </div>
+                            </v-expansion-panel-text>
+                          </v-expansion-panel>
+                          <v-expansion-panel>
+                            <v-expansion-panel-title
+                                style="font-weight: bold; font-size: 13px; line-height: 16px;">
+                              {{ item.subtitle }}
+                            </v-expansion-panel-title>
+                            <v-expansion-panel-text>
+                              <div v-for="(value, i) in item.items" :key="i">
+                                <p style="font-size: 13px;line-height: 16px;">
+                                  {{ value.precision }}
+                                </p>
+                                <div v-for="element in value.solution"
+                                     style="margin-top:15px; font-size: 13px;line-height: 16px;">
+                                  <p style="font-weight: bold;">Méthodologie du test : <a
+                                      href="value.link" target="blank">
+                                    <VIcon :icon="linkICon"/>
+                                  </a></p>
+                                  <p>{{ element.info1 }}</p>
+                                  <p>{{ element.info2 }}</p>
+                                  <p>{{ element.info3 }}</p>
+                                </div>
+                                <span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+                              </div>
+                            </v-expansion-panel-text>
+                          </v-expansion-panel>
+                        </v-expansion-panels>
+                      </v-expansion-panel-text>
+                    </v-expansion-panel>
+                  </v-expansion-panels>
+                </v-col>
+              </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/NirField/AccessibiliteItems.ts

@@ -0,0 +1,243 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+		items: [
+			{
+				precision: '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? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+		items2: [
+			{
+				subtitle: '3.1 Dans chaque page web, l’information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?',
+				precision: '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 ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.1.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+		],
+	},
+
+	{
+		title: 'Catégorie 10 : Présentation de l’information',
+		subtitle: '10.1 Dans le site web, des feuilles de styles sont-elles utilisées pour contrôler la présentation de l’information ? ?',
+		items: [
+
+			{
+				precision: '10.1.1 Dans chaque page web, les balises servant à la présentation de l’information ne doivent pas être présentes dans le code source généré des pages. Cette règle est-elle respectée ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#10.1.1',
+				solution: [{
+					info1: '1. Vérifier l’absence des éléments de présentation <basefont>, <big>, <blink>, <center>, <font>, <marquee>, <s>, <strike>, <tt> ; ',
+					info2: '2. Vérifier l’absence de l’élément <u> uniquement si le DOCTYPE du document ne correspond pas à HTML 5 ; ',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 11 : Formulaires',
+		subtitle: '11.2 Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ? ',
+
+		items2: [
+
+			{
+
+				subtitle: '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 ?  ',
+				precision: '11.13.1 Chaque champ de formulaire dont l’objet se rapporte à une information concernant l’utilisateur vérifie-t-il ces conditions ? '
+					+ 'Le champ de formulaire possède un attribut autocomplete ; '
+					+ 'L’attribut autocomplete est pourvu d’une valeur présente dans la liste des valeurs possibles pour l’attribut autocomplete associés à un champ de formulaire ; '
+					+ 'La valeur indiquée pour l’attribut autocomplete est pertinente au regard du type d’information attendu. ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.13.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire qui se rapportent à une information concernant l’utilisateur (nom, prénom, numéro de téléphone, etc.) ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que : Le champ de formulaire possède un attribut autocomplete ; L’attribut autocomplete est pourvu d’une valeur présente dans la liste des valeurs possibles; La valeur indiquée pour l’attribut autocomplete est pertinente au regard du type d’information attendu.',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire retrouvé, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+		items: [
+			{
+				precision: '11.2.2 Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut title ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+			{
+				precision: '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 ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.3',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut WAI-ARIA aria-label ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+
+	},
+
+	{
+		title: 'Catégorie 12 : Navigation',
+		subtitle: '12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier. Cette règle est-elle respectée ?',
+		items: [
+			{
+
+				precision: '12.9.1 Dans chaque page web, chaque élément recevant le focus vérifie-t-il une de ces conditions ? '
+					+ 'Il est possible d’atteindre l’élément suivant ou précédent pouvant recevoir le focus avec la touche de tabulation ;'
+					+ 'L’utilisateur est informé d’un mécanisme fonctionnel permettant d’atteindre au clavier l’élément suivant ou précédent pouvant recevoir le focus.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments d’interface susceptibles de recevoir le focus (au moyen de la tabulation ou au moyen d’un script) ;',
+					info2: '2. Pour chaque élément d’interface, vérifier que l’utilisateur peut atteindre l’élément suivant ou précédent pouvant recevoir le focus : '
+						+ 'Soit au moyen de la touche de tabulation (Tab ou Maj+Tab) ;'
+						+ 'Soit au moyen d’une autre interaction clavier dont l’utilisateur est informé (par exemple, les flèches de direction).',
+					info3: '3. Si c’est le cas pour chaque élément d’interface, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+		items: [
+			{
+
+				precision: '1.2.4 Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ? '
+					+ ' La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ;'
+					+ ' Les balises <title> et <desc> sont absentes ou vides ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’attribut title.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2.4',
+				solution: [{
+					info1: '1. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :'
+						+ ' Possède un attribut WAI-ARIA aria-hidden="true" ;'
+						+ ' Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;'
+						+ ' Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;'
+						+ ' Et est dépourvu d’attribut title (ainsi que ses éléments enfants).'
+						+ ' Le nom du composant est cohérent avec l’état de la fonctionnalité ou des contenus contrôlés (par exemple pour une fonctionnalité permettant d’afficher ou de masquer une zone de contenu).',
+					info2: '2. Sinon, vérifier la présence d’un composant d’interface accessible permettant d’accéder aux mêmes fonctionnalités',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+		items: [
+			{
+				precision: '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? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+	{
+		title: 'Catégorie 11 : Formulaires',
+		subtitle: '11.2  Chaque étiquette associée à un champ de formulaire est-elle pertinente (hors cas particuliers) ?   ',
+		items: [
+			{
+
+				precision: '11.2.2 Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.2',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie par un attribut title ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’attribut est pertinent ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+			{
+				precision: '11.2.5 Chaque champ de formulaire ayant un intitulé visible vérifie-t-il ces conditions (hors cas particuliers) ? '
+					+ 'S’il est présent, le contenu de l’attribut WAI-ARIA aria-label du champ de formulaire contient au moins l’intitulé visible ; '
+					+ 'S’il est présent, le passage de texte lié au champ de formulaire via un attribut WAI-ARIA aria-labelledby contient au moins l’intitulé visible ; '
+					+ 'S’il est présent, le contenu de l’attribut title du champ de formulaire contient au moins l’intitulé visible ; '
+					+ 'S’il est présent le contenu de la balise <label> associé au champ de formulaire contient au moins l’intitulé visible.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.2.5',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire dont l’étiquette est fournie à la fois par un intitulé visible et par le contenu soit d’un élément <label>, soit d’un attribut title ou d’un attribut aria-label ou d’un attribut aria-labelledby ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le contenu de l’élément <label> ou de l’attribut title ou de l’attribut aria-label ou de l’attribut aria-labelledby contient l’intitulé visible ; ',
+					info3: '3. Si c’est le cas pour chaque champ de formulaire, le test est validé. ',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+		],
+
+		items2: [
+			{
+				subtitle: '11.1 Chaque champ de formulaire a-t-il une étiquette ',
+				precision: '11.1.1 Chaque champ de formulaire vérifie-t-il une de ces conditions ? '
+					+ 'Le champ de formulaire possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ; '
+					+ 'Le champ de formulaire possède un attribut WAI-ARIA aria-label ; '
+					+ 'Une balise <label> ayant un attribut for est associée au champ de formulaire ; '
+					+ 'Le champ de formulaire possède un attribut title ; '
+					+ '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.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#11.1.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les champs de formulaire ; ',
+					info2: '2. Pour chaque champ de formulaire, vérifier que le champ de formulaire : '
+						+ 'Possède un attribut WAI-ARIA aria-labelledby référençant un passage de texte identifié ; '
+						+ 'Possède un attribut WAI-ARIA aria-label ; '
+						+ 'Est associé à un élément <label> ayant un attribut for ; '
+						+ 'Possède un attribut title ; '
+						+ '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. ',
+					info3: '3. Si c’est le cas pour champ de formulaire, le test est validé. ',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+
+	},
+
+]

package/src/components/NirField/NirField.mdx

@@ -0,0 +1,213 @@
+import {Canvas, Meta, Controls, Source} from '@storybook/blocks';
+import * as NirFieldStories from './NirField.stories.ts';
+import NirField from './NirField.vue';
+
+<Meta title="Composants/Formulaires/NirField" component={NirField}/>
+
+# NirField
+
+Le composant `NirField` est utilisé pour afficher un champ de saisie de numéro de sécurité sociale.
+
+<Canvas story={{
+    height: '150px',
+}} of={NirFieldStories.Default}
+/>
+
+# API
+
+<Controls of={NirFieldStories.Default}/>
+
+## Utilisation
+
+<Source dark code={`
+<script lang="ts" setup>
+    import { NirField } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref('')
+	const nirFieldRef = ref() // Référence Vue pour accéder au composant enfant
+
+	const handleSubmit = () => {
+		// Appeler la méthode exposée validateOnSubmit via la référence
+		const isValid = nirFieldRef.value?.validateOnSubmit()
+		if (!isValid) {
+			alert('Corrigez les erreurs avant de soumettre !')
+		}
+		else {
+			alert('Formulaire soumis avec succès !')
+		}
+	}
+        </script>
+
+        <template>
+            <main>
+                <form
+                    class="mx-16 my-6"
+                    @submit.prevent="handleSubmit"
+                >
+                    <NirField
+                        ref="nirFieldRef"
+                        v-model="model"
+                        :display-key="true"
+                        required
+                    />
+                    <button type="submit">
+                        Soumettre
+                    </button>
+                </form>
+            </main>
+        </template>
+`}
+/>
+
+### Règles de gestion par défaut
+
+Le composant `NirField` utilise des règles de validation par défaut pour le numéro NIR et la Clé. Voici les règles de validation par défaut :
+
+#### Pour le numéro NIR :
+- Le numéro NIR doit être composé de 13 chiffres.
+- Le numéro NIR doit respecter le format suivant :
+- 1 chiffre pour le sexe (1-4, 7, 8)
+- 2 chiffres pour l'année de naissance
+- 2 chiffres pour le mois de naissance (01-12, 20-42)
+- 2 chiffres pour le département de naissance (01-99, 2A, 2B, 96, 97X, 98X)
+- 3 chiffres pour la commune de naissance
+- 3 chiffres pour le rang d'inscription
+- Le numéro NIR doit passer la validation de la clé de contrôle (2 chiffres).
+
+#### Pour la Clé :
+- La clé doit être composée de 2 chiffres.
+- La clé doit être valide en fonction du calcul de la clé NIR.
+
+
+
+
+### Règles de gestion personnalisées
+
+Vous pouvez définir des règles de gestion personnalisées pour le numéro NIR et la Clé via les props `custom-number-rules` et `custom-key-rules`.
+
+Il y a deux manieres possibles:
+
+Chaque règle est un objet avec la structure suivante :
+
+#### 1. Regles que nous mettons à disposition :
+
+- `type` (string) : Le type de validation (par exemple, `minLength`).
+- `options` (object) : Options pour la règle de validation, incluant :
+- `length` (number) : La longueur requise pour les règles `minLength`, `maxLength`, `min` et `max`.
+- `message` (string | optionnel) : Le message d'erreur à afficher si la validation échoue (sinon le message par default s'affiche).
+- `successMessage` (string | optionnel) : Le message à afficher si la validation réussit (sinon le message par default s'affiche).
+
+Vous trouverez la liste des rules mises à disposition dans la section [Comment utiliser les rules](/docs/guide-du-dev-comment-utiliser-les-rules--docs).
+
+#### 2. Regles personnalisées :
+
+Pour les regles de gestion personnalisées, vous pouvez utiliser les règles de type `custom` et définir une fonction de validation personnalisée. Cette fonction doit retourner un objet avec les propriétés `valid` (booléen) et `message` (string) :
+
+<Source dark code={`
+{
+    type: 'custom',
+    options: {
+      validate: (value: string) => value.startsWith('123') || 'Le NIR doit commencer par 123.',
+      message: 'Le NIR est invalide.',
+      successMessage: 'Le NIR est valide.',
+},
+
+    `}
+/>
+
+
+### Exemple d'utilisation
+
+Voici quelques exemples d'utilisation du composant `NirField` avec des règles de gestion personnalisées :
+
+<Source dark code={`
+<script setup lang="ts">
+import { ref } from 'vue'
+import { NirField } from './NirField.vue'
+
+const nir = ref('')
+const customNumberRules = [
+    {
+    type: 'custom',
+    options: {
+      validate: (value: string) => value.startsWith('123') || 'Le NIR doit commencer par 123.',
+      message: 'Le NIR est invalide.',
+      successMessage: 'Le NIR est valide.',
+    },
+  },
+]
+const customKeyRules = [
+  {
+    type: 'minLength',
+    options: {
+      length: 2,
+      message: 'La clé doit avoir au moins 2 caractères.',
+      successMessage: 'La clé a une longueur valide.',
+    },
+  },
+]
+</script>
+
+<template>
+  <NirField
+    v-model="nir"
+    :outlined="true"
+    :required="true"
+    numberLabel="NIR"
+    keyLabel="Clé"
+    :displayKey="true"
+    :customNumberRules="customNumberRules"
+    :customKeyRules="customKeyRules"
+  />
+</template>
+`}
+/>
+
+### Méthode validateOnSubmit
+
+La méthode `validateOnSubmit` permet de valider les champs du composant `NirField` lors de la soumission du formulaire. Elle retourne `true` si tous les champs sont valides, sinon `false`.
+
+Pour utiliser cette méthode, vous devez ajouter une référence Vue au composant `NirField` et appeler la méthode `validateOnSubmit` via cette référence.
+
+    <Source dark code={`
+<script setup lang="ts">
+    import {ref} from 'vue'
+    import { NirField } from '@cnamts/synapse'
+
+    const model = ref('')
+    const nirFieldRef = ref() // Référence Vue pour accéder au composant enfant
+    const handleSubmit = () => {
+    // Appeler la méthode exposée validateOnSubmit via la référence
+    const isValid = nirFieldRef.value?.validateOnSubmit()
+    if (!isValid) {
+    alert('Corrigez les erreurs avant de soumettre !')
+} else {
+    alert('Formulaire soumis avec succès !')
+}
+}
+</script>
+
+    <template>
+      <main>
+        <form
+          class="mx-16 my-6"
+          @submit.prevent="handleSubmit"
+        >
+          <NirField
+            ref="nirFieldRef"
+            v-model="model"
+            :display-key="true"
+            key-tooltip="message d'aide pour la clef"
+            nir-tooltip="message d'aide pour le NIR"
+            outlined
+            required
+          />
+          <button type="submit">
+            Soumettre
+          </button>
+        </form>
+      </main>
+    </template>
+`}
+/>