@cnamts/synapse 0.0.5-alpha → 0.0.7-alpha

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',
+				}],
+			},
+		],
+	},
+
+]