@cnamts/synapse 0.0.5-alpha → 0.0.7-alpha

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

@@ -0,0 +1,190 @@
+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: 'Templates/NotFoundPage/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 v-if="AccessibiliteItemsValidated.length > 0" 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-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>
+						<div v-else style="display: flex;justify-content: center;"><span style="text-align:center;"  >Pas de critère d'accessibilité bloquant</span></div>
+					</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/NotFoundPage/AccessibiliteItems.ts

@@ -0,0 +1,205 @@
+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.1  Chaque image porteuse d’information a-t-elle une alternative textuelle ? ',
+				precision: '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" ; '
+					+ 'La balise <svg> a une alternative textuelle.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.1.5',
+				solution: [{
+					info1: '1. Retrouver dans le document les éléments <svg> ; Pour chaque élément <svg>, déterminer si l’image est porteuse d’information ; ',
+					info2: '2. S’assurer que l’élément <svg> est pourvu d’un attribut WAI-ARIA role="img" ; Si ce n’est pas le cas, le test est invalidé.',
+					info3: '3. Le cas échéant, vérifier que l’élément <svg> est pourvu au moins d’une alternative textuelle parmi les suivantes : '
+						+ 'Contenu de l’élément <title> ; '
+						+ 'Passage de texte associé via l’attribut WAI-ARIA aria-labelledby ; '
+						+ 'Contenu de l’attribut WAI-ARIA aria-label ;',
+					info4: '4. Si au moins une alternative textuelle est trouvée, le test est validé. ',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+			{
+				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 3 : Couleurs',
+		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 ?',
+		items: [
+			{
+				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 9 : Structuration de l’information',
+		subtitle: '9.1 Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres',
+		items: [
+			{
+
+				precision: '9.1.1 Dans chaque page web, la hiérarchie entre les titres (balise <hx> ou balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level) est-elle pertinente ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#9.1.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les titres (balise <hx> ou balise possédant un attribut WAI-ARIA role="heading" associé à un attribut WAI-ARIA aria-level) ;',
+					info2: '2. Vérifier que la hiérarchie entre les titres est pertinente ;',
+					info3: '3. Si c’est le cas, 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) ? ',
+		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,
+
+			},
+			{
+				precision: ' 3.2.3 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée supérieure ou égale à 24px vérifient-ils une de ces conditions (hors cas particuliers) ? '
+					+ 'Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ; '
+					+ 'Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.3',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée supérieure ou égale à 24px qui pourraient poser des problèmes de contraste ; ',
+					info2: '2. our chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins. ',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+			{
+				precision: ' 3.2.4 Dans chaque page web, le texte et le texte en image en gras d’une taille restituée supérieure ou égale à 18,5px vérifient-ils une de ces conditions (hors cas particuliers) ? '
+					+ 'Le rapport de contraste entre le texte et son arrière-plan est de 3:1, au moins ; '
+					+ 'Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins. ',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.4',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image en gras d’une taille restituée supérieure ou égale à 18,5px 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 3:1, au moins ; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 3:1, au moins. ',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+
+]

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

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

package/src/components/NotFoundPage/tests/__snapshots__/NotFoundPage.spec.ts.snap

@@ -1,8 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
-"<div data-v-fb0b02fd="" data-v-8f2b5bad="" data-v-c9c5b952="" class="py-10 px-8 vd-page-container d-flex justify-center">
-  <div data-v-fb0b02fd="" class="v-sheet v-theme--light bg-transparent" style="width: 960px;">
+"<div data-v-fb0b02fd="" data-v-8f2b5bad="" data-v-c9c5b952="" class="py-10 px-14 vd-page-container d-flex justify-center">
+  <div data-v-fb0b02fd="" class="v-sheet v-theme--light bg-transparent" style="width: 800px;">
     <div data-v-8f2b5bad="" class="v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated pa-6 pa-sm-16">
       <!---->
       <div class="v-card__loader">
@@ -39,8 +39,8 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
 `;
 
 exports[`NotFoundPage > renders correctly 1`] = `
-"<div data-v-fb0b02fd="" data-v-8f2b5bad="" data-v-c9c5b952="" class="py-10 px-8 vd-page-container d-flex justify-center">
-  <div data-v-fb0b02fd="" class="v-sheet v-theme--light bg-transparent" style="width: 960px;">
+"<div data-v-fb0b02fd="" data-v-8f2b5bad="" data-v-c9c5b952="" class="py-10 px-14 vd-page-container d-flex justify-center">
+  <div data-v-fb0b02fd="" class="v-sheet v-theme--light bg-transparent" style="width: 800px;">
     <div data-v-8f2b5bad="" class="v-card v-theme--light v-card--density-default elevation-0 v-card--variant-elevated pa-6 pa-sm-16">
       <!---->
       <div class="v-card__loader">

package/src/components/NotificationBar/AccessibiliteItems.ts

@@ -1,37 +1,7 @@
 import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
-	{
-		title: 'Catégorie 1 : Images',
-		subtitle: '1.4 Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?',
-		items: [
-			{
-
-				precision: '1.4.1 Pour chaque image (balise <img>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?',
-				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.4.1',
-				solution: [{
-					info1: '1. Retrouver dans le document les images structurées au moyen d’un élément <img> pourvues d’une alternative textuelle et utilisées comme CAPTCHA ou comme image-test',
-					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.4.6 Pour chaque image vectorielle (balise <svg>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?',
-				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.4.6',
-				solution: [{
-					info1: '1. Retrouver dans le document les éléments <svg> pourvus d’une alternative textuelle et utilisés comme CAPTCHA ou comme image-test;',
-					info2: '2. Pour chaque élément <svg>, 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,
-
-			},
-
-		],
-	},
 	{
 		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é?',

package/src/components/NotificationBar/NotificationBar.mdx

@@ -30,7 +30,7 @@ import * as NotificationBarStories from './NotificationBar.stories';
 <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/components/PageContainer/PageContainer.mdx

@@ -18,7 +18,7 @@ Le composant `PageContainer` est un conteneur transparent utilisé pour afficher
 
 <Source dark code={`
 <script setup lang="ts">
-import PageContainer from '@cnamts/synapse'
+import { PageContainer } from '@cnamts/synapse'
 </script>
 
 <template>

package/src/components/PageContainer/PageContainer.stories.ts

@@ -11,12 +11,12 @@ const meta = {
 	},
 	argTypes: {
 		size: {
-			options: ['xl', 'l', 'm', 's'],
+			options: ['xl', 'lg', 'md', 'sm', 'xs'],
 			control: { type: 'select' },
-			default: 'xl',
+			default: undefined,
 		},
 		spacing: {
-			options: ['xs', 'sm', 'md', 'lg', 'xl'],
+			options: ['xl', 'lg', 'md', 'sm', 'xs'],
 			control: { type: 'select' },
 			default: undefined,
 		},
@@ -47,7 +47,7 @@ export const Default: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import PageContainer from '@cnamts/synapse'
+	import { PageContainer } from '@cnamts/synapse'
 </script>
 				`,
 			},
@@ -77,7 +77,7 @@ export const Size: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-	<PageContainer size="s">
+	<PageContainer size="sm">
 		Contenu de la page
 	</PageContainer>
 </template>
@@ -86,7 +86,7 @@ export const Size: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import PageContainer from '@cnamts/synapse'
+	import { PageContainer } from '@cnamts/synapse'
 </script>
 				`,
 			},
@@ -94,7 +94,7 @@ export const Size: Story = {
 	},
 	args: {
 		default: 'Contenu de la page',
-		size: 's',
+		size: 'sm',
 	},
 	render: (args) => {
 		return {
@@ -128,7 +128,7 @@ export const Color: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import PageContainer from '@cnamts/synapse'
+	import { PageContainer } from '@cnamts/synapse'
 </script>
 				`,
 			},
@@ -172,7 +172,7 @@ export const Card: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import PageContainer from '@cnamts/synapse'
+	import { PageContainer } from '@cnamts/synapse'
 	import { VCard } from 'vuetify/components'
 </script>
 				`,

package/src/components/PageContainer/PageContainer.vue

@@ -3,11 +3,11 @@
 	import { useDisplay } from 'vuetify'
 
 	const props = withDefaults(defineProps<{
-		size?: 'xl' | 'l' | 'm' | 's'
-		spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+		size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
+		spacing?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
 		color?: string
 	}>(), {
-		size: 'xl',
+		size: undefined,
 		spacing: undefined,
 		color: 'transparent',
 	})
@@ -15,32 +15,35 @@
 	const display = useDisplay()
 
 	const spacingMapping: Record<string, string> = {
-		xs: 'px-0',
+		xs: 'px-4',
 		sm: 'px-4',
-		md: 'px-8',
-		lg: 'px-8',
-		xl: 'px-8',
+		md: 'px-14',
+		lg: 'px-14',
+		xl: 'px-0',
 	}
 
-	const spacingX = spacingMapping[display.name.value]
+	const sizeMapping: Record<string, number> = {
+		xs: 340,
+		sm: 540,
+		md: 800,
+		lg: 1280,
+		xl: 1712,
+	}
 
 	const spacingClass = computed(() => {
 		if (props.spacing) {
 			return `py-10 ${spacingMapping[props.spacing]}`
 		}
-
-		return `py-10 ${spacingX}`
+		return `py-10 ${spacingMapping[display.name.value]}`
 	})
 
-	const sizeMapping: Record<string, number> = {
-		xl: 1440,
-		l: 960,
-		m: 800,
-		s: 600,
-	}
-
 	const containerSize = computed(() => {
-		return sizeMapping[props.size]
+		if (props.size) {
+			return sizeMapping[props.size]
+		}
+		else {
+			return sizeMapping[display.name.value] ?? sizeMapping['xl']
+		}
 	})
 
 	defineExpose({
@@ -63,5 +66,8 @@
 <style lang="scss" scoped>
 .vd-page-container {
   flex: 1;
+  width: 100%;
+  max-width: 1712px;
+  margin: 0 auto;
 }
 </style>

package/src/components/PageContainer/tests/PageContainer.spec.ts

@@ -44,13 +44,13 @@ describe('PageContainer', () => {
 	it('containerSize computed property', async () => {
 		const wrapper = mount(PageContainer, {
 			props: {
-				size: 'l',
+				size: 'md',
 			},
 			global: {
 				plugins: [vuetify],
 			},
 		})
 
-		expect(wrapper.vm.containerSize).toBe(960)
+		expect(wrapper.vm.containerSize).toBe(800)
 	})
 })

package/src/components/PageContainer/tests/__snapshots__/PageContainer.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PageContainer > render correctly 1`] = `
-"<div data-v-fb0b02fd="" class="py-10 px-8 vd-page-container d-flex justify-center">
-  <div data-v-fb0b02fd="" class="v-sheet v-theme--light bg-transparent" style="width: 1440px;"></div>
+"<div data-v-fb0b02fd="" class="py-10 px-14 vd-page-container d-flex justify-center">
+  <div data-v-fb0b02fd="" class="v-sheet v-theme--light bg-transparent" style="width: 800px;"></div>
 </div>"
 `;