@cnamts/synapse 0.0.9-alpha → 0.0.11-alpha

package/src/components/SelectBtnField/AccessibiliteItems.ts

@@ -0,0 +1,191 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.3 Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ? ',
+
+		items2: [
+			{
+				subtitle: '1.6  Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?',
+				precision: '1.6.1 Chaque image (balise <img>) porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ? '
+					+ 'Il existe un attribut longdesc qui donne l’adresse (URL) d’une page ou d’un emplacement dans la page contenant la description détaillée ; '
+					+ 'Il existe une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ; '
+					+ 'Il existe un lien ou un bouton adjacent permettant d’accéder à la description détaillée.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.6.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les images structurées au moyen d’un élément <img> (ou d’un élément possédant l’attribut WAI-ARIA role="img") porteuses d’information qui nécessitent une description détaillée ; ',
+					info2: '2. Pour chaque image, vérifier qu’il existe : '
+						+ 'Soit un attribut longdesc qui donne l’adresse (url) d’une page ou d’un emplacement dans la page contenant la description détaillée ; '
+						+ 'Soit une alternative textuelle contenant la référence à une description détaillée adjacente à l’image ; '
+						+ 'Soit un lien ou un bouton adjacent permettant d’accéder à la description détaillée.',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+		items: [
+			{
+				precision: '1.3.1 Chaque image (balise <img> ou balise possédant l’attribut WAI-ARIA role="img") porteuse d’information, ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?  '
+					+ 'S’il est présent, le contenu de l’attribut title est pertinent ; '
+					+ 'S’il est présent, le contenu de l’attribut alt est pertinent ; '
+					+ 'S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent. '
+					+ 'S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent ;',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.3.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les images structurées au moyen d’un élément <img> (ou d’un élément possédant l’attribut WAI-ARIA role="img") pourvues d’une alternative textuelle ; ',
+					info2: '2. Pour chaque image, vérifier que l’alternative textuelle est pertinente ;',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+			{
+				precision: '1.3.9 Pour chaque image porteuse d’information et ayant une alternative textuelle, l’alternative textuelle est-elle courte et concise (hors cas particuliers) ? ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.3.9',
+				solution: [{
+					info1: '1. Retrouver dans le document les images pourvues d’une alternative textuelle ; ',
+					info2: '2. Pour chaque image, vérifier l’alternative textuelle est courte et concise ;',
+					info3: '3. Si c’est le cas pour chaque image, 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,
+
+			},
+
+		],
+	},
+]
+
+export const AccessibiliteItemsValidated = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.3 Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ? ',
+
+		items2: [
+			{
+				subtitle: '1.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+				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,
+
+			},
+		],
+		items: [
+			{
+				precision: '1.3.1 Chaque image (balise <img> ou balise possédant l’attribut WAI-ARIA role="img") porteuse d’information, ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?  '
+					+ 'S’il est présent, le contenu de l’attribut title est pertinent ; '
+					+ 'S’il est présent, le contenu de l’attribut alt est pertinent ; '
+					+ 'S’il est présent, le passage de texte associé via l’attribut WAI-ARIA aria-labelledby est pertinent. '
+					+ 'S’il est présent, le contenu de l’attribut WAI-ARIA aria-label est pertinent ;',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.3.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les images structurées au moyen d’un élément <img> (ou d’un élément possédant l’attribut WAI-ARIA role="img") pourvues d’une alternative textuelle ; ',
+					info2: '2. Pour chaque image, vérifier que l’alternative textuelle est pertinente ;',
+					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 7 : Scripts',
+		subtitle: '7.1 Chaque script est-il, si nécessaire, compatible avec les technologies d’assistance ?',
+		items: [
+
+			{
+				precision: ' 7.1.3 Chaque script qui génère ou contrôle un composant d’interface vérifie-t-il ces conditions : '
+					+ 'Le composant possède un nom pertinent ;'
+					+ 'Le nom accessible du composant contient au moins l’intitulé visible ;'
+					+ 'Le composant possède un rôle pertinent.',
+
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#7.1.3',
+				solution: [{
+					info1: '1. Pour chacun des composants d’interface ayant validé le test 7.1.1, vérifier que le composant d’interface possède : ',
+					info2: '2. Un nom pertinent (intitulé visible) et un rôle pertinent',
+					info3: '3. Si le composant d’interface possède un nom accessible, vérifier que ce nom est pertinent et contient au moins l’intitulé visible.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 8 : Eléments Obligatoires',
+		subtitle: '8.9 Dans chaque page web, les balises ne doivent pas être utilisées uniquement à des fins de présentation',
+		items: [
+
+			{
+				precision: ' 8.9.1 Dans chaque page web les balises (à l’exception de <div>, <span> et <table>) ne doivent pas être utilisées uniquement à des fins de présentation. Cette règle est-elle respectée',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#8.9.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des éléments sémantiques utilisés à des fins de présentation ;',
+					info2: '2. Pour chacun de ces éléments, vérifier que :'
+						+ 'L’élément est pourvu d’un attribut role=“presentation” ;'
+						+ 'L’utilisation de cet élément à des fins de présentation reste justifée',
+					info3: '3. Si c’est le cas, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+]

package/src/components/SelectBtnField/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/SelectBtnField/Usages.stories.ts

@@ -0,0 +1,40 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Formulaires/SelectBtnField/Usages',
+}
+const itemsToDo = [
+	'Utiliser des libellés clairs et compréhensibles.',
+	'Limiter le nombre d\'options pour éviter la surcharge cognitive.',
+]
+
+const itemsNotToDo = [
+	'Utiliser ce composant pour un trop grand nombre d\'options. (Privilégier alors un bouton select).',
+	'Rendre la sélection ambiguë (ex. : icônes sans texte explicatif).',
+	'Forcer une selection initiale si elle n\'est pas nécessaire.',
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/SelectBtnField/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/SkipLink/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/SkipLink/Usages.stories.ts

@@ -0,0 +1,41 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Navigation/SkipLink/Usages',
+}
+
+const itemsToDo = [
+	'Le composant lien d\'évitement est invisible par défaut pour ne pas encombrer l\'interface.',
+	'Il doit alors être le premier élément dans l\'ordre du focus.',
+	'Les libellés des liens doivent être clairs et concis tel que "Aller au contenu principal" ou "Passer au menu".',
+]
+
+const itemsNotToDo = [
+	'Utiliser des libellés trop vagues ou trop longs.',
+
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/SyAlert/SyAlert.vue

@@ -32,7 +32,10 @@
 		}[props.type]
 	})
 
+	const emit = defineEmits(['click:close'])
+
 	function dismissAlert() {
+		emit('click:close')
 		show.value = false
 	}
 
@@ -45,12 +48,12 @@
 <template>
 	<VAlert
 		v-model="show"
-		:type
-		:closable
-		:variant
-		:class="`alert alert--${type}`"
-		:color="type"
-		:border="variant === 'tonal' ? 'start' : false"
+		:type="props.type"
+		:closable="props.closable"
+		:variant="props.variant"
+		:class="`alert alert--${props.type}`"
+		:color="props.type"
+		:border="props.variant === 'tonal' ? 'start' : false"
 	>
 		<template #prepend>
 			<VIcon
@@ -68,11 +71,11 @@
 		</template>
 
 		<template
-			v-if="closable"
+			v-if="props.closable"
 			#close
 		>
 			<VBtn
-				:color="variant === 'outlined' ? undefined : 'primary'"
+				:color="props.variant === 'outlined' ? undefined : 'primary'"
 				:ripple="false"
 				variant="text"
 				width="auto"
@@ -251,5 +254,4 @@
 		)
 	);
 }
-
 </style>

package/src/components/SyAlert/Usages.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story} from "@storybook/blocks";
+import * as stories from "./Usages.stories.ts";
+
+<Meta of={stories} />
+
+# Usages
+
+<Story of={stories.UsagePage} />
+<br />

package/src/components/SyAlert/Usages.stories.ts

@@ -0,0 +1,40 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { checkIcon, linkICon, croixIcon } from '@/constants/icons'
+import Usages from '@/components/Usages/Usages.vue'
+
+export default {
+	title: 'Composants/Feedback/SyAlert/Usages',
+}
+
+const itemsToDo = [
+	'La nature du message (erreur, succès, information) doit être clairement exprimée dans le titre de l\'alerte. La couleur ou l\'icône n\'étant pas accessibles ou compréhensibles par tous les utilisateurs.',
+	'Placer la bannière en tête de la section à laquelle elle s\'applique.',
+]
+
+const itemsNotToDo = [
+	'Utiliser ce composant à la place d\'une page d\'erreur.',
+
+]
+
+export const UsagePage: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon, Usages },
+
+			setup() {
+				const icon = checkIcon
+
+				return { icon, linkICon, croixIcon, checkIcon, itemsNotToDo, itemsToDo }
+			},
+			template: `
+				 <Usages
+					:items1="itemsToDo"
+					:items2="itemsNotToDo"
+				/>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/TableToolbar/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />

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

@@ -0,0 +1,216 @@
+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/Tableaux/TableToolbar/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-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>
+				<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'],
+}