@cnamts/synapse 0.0.5-alpha → 0.0.6-alpha

package/src/components/HeaderNavigationBar/HorizontalNavbar/HorizontalNavbar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { VTabs } from 'vuetify/components'
 	import type { NavigationItem } from '../types'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { config } from './config'
@@ -19,56 +18,59 @@
 </script>
 
 <template>
-	<VSheet
-		class="horizontal-menu px-12"
-		v-bind="options.sheet"
-	>
-		<slot name="navigation-bar-prepend" />
-		<slot>
-			<VTabs
-				class="horizontal-menu__tabs"
-				v-bind="options.tabs"
-			>
-				<VTab
-					v-for="(item, index) in items"
-					:key="index"
-					:href="item.href"
-					:to="item.to"
-					v-bind="options.tab"
-					tabindex="0"
-					class="horizontal-menu__item"
+	<VSheet v-bind="options.sheet">
+		<div class="horizontal-menu px-xl-0 px-14">
+			<slot name="navigation-bar-prepend" />
+			<slot>
+				<VTabs
+					class="horizontal-menu__tabs"
+					v-bind="options.tabs"
 				>
-					<span class="horizontal-menu__item-link">
-						{{ item.label }}
-					</span>
-				</VTab>
-			</VTabs>
-		</slot>
-		<slot name="navigation-bar-append" />
+					<VTab
+						v-for="(item, index) in items"
+						:key="index"
+						:href="item.href"
+						:to="item.to"
+						v-bind="options.tab"
+						tabindex="0"
+						class="horizontal-menu__item"
+					>
+						<span class="horizontal-menu__item-link">
+							{{ item.label }}
+						</span>
+					</VTab>
+				</VTabs>
+			</slot>
+			<slot name="navigation-bar-append" />
+		</div>
 	</VSheet>
 </template>
 
 <style lang="scss" scoped>
+@use '@/assets/tokens.scss' as *;
+@use '@/components/HeaderBar/consts' as *;
 
 .horizontal-menu {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
+  max-width: $header-max-width;
+  margin: 0 auto;
 }
 
 .horizontal-menu__tabs {
-	flex: 1 1 0;
+  flex: 1 1 0;
 }
 
 .horizontal-menu__item {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .horizontal-menu__item-link {
-	font-size: 0.875rem;
-	font-weight: 700;
+  font-size: 0.875rem;
+  font-weight: 700;
 }
 
 .v-tab-item--selected span {
-	color: #fff;
+  color: #fff;
 }
 </style>

package/src/components/HeaderToolbar/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/HeaderToolbar/Accessibilite.stories.ts

@@ -0,0 +1,203 @@
+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/Structure/HeaderToolbar/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>
+														<p>{{ element.info4 }}</p>
+														<p>{{ element.info5 }}</p>
+														<p>{{ element.info6 }}</p>
+														<p>{{ element.info7 }}</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-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>
+														<p>{{ element.info4 }}</p>
+														<p>{{ element.info5 }}</p>
+														<p>{{ element.info6 }}</p>
+														<p>{{ element.info7 }}</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/HeaderToolbar/AccessibiliteItems.ts

@@ -0,0 +1,200 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		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 6 : Liens',
+		subtitle: ' 6.1 Chaque lien est-il explicite',
+		items: [
+			{
+
+				precision: ' 6.1.5 Pour chaque lien ayant un intitulé visible, le nom accessible du lien contient-il au moins l’intitulé visible (hors cas particuliers) ? '
+					+ 'L’intitulé de lien seul permet d’en comprendre la fonction et la destination ; '
+					+ 'L’intitulé de lien additionné au contexte du lien permet d’en comprendre la fonction et la destination.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#6.1.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les liens autres que SVG dont le contenu est fourni à la fois par un intitulé visible et par le contenu soit d’un attribut title ou d’un attribut aria-label ou d’un attribut aria-labelledby ; ',
+					info2: '2. Pour chaque lien, vérifier que le contenu 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 lien, le test est validé pour les liens autres que SVG. ',
+					info4: '4. Retrouver dans le document les liens SVG dont le contenu est fourni à la fois par un intitulé visible et par le contenu soit d’un attribut aria-labelledby, ou d’un attribut aria-label ou d’un élément title (enfant direct de l’élément <svg>) ou d’un attribut x-link:title (SVG 1.1) ou d’un ou plusieurs éléments <text>; ',
+					info5: '5. Pour chaque lien SVG, vérifier que le contenu de l’attribut aria-labelledby ou de l’attribut aria-label ou de l’élément <title> ou de l’attribut x-link:title ou d’un ou plusieurs éléments <text> contient l’intitulé visible ; ',
+					info6: '6. Si c’est le cas pour chaque lien SVG, le test est validé pour les liens SVG. ',
+					info7: '7. Si le test est validé à la fois pour les liens non SVG et pour les liens SVG, le test est globalement validé. ',
+
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 9 : Structuration de l’information',
+		subtitle: '9.2.1 Dans chaque page web, la structure du document vérifie-t-elle ces conditions (hors cas particuliers) ? '
+			+ 'La zone d’en-tête de la page est structurée via une balise <header> ; '
+			+ 'Les zones de navigation principales et secondaires sont structurées via une balise <nav> ; '
+			+ 'La balise <nav> est réservée à la structuration des zones de navigation principales et secondaires ; '
+			+ 'La zone de contenu principal est structurée via une balise <main> ; '
+			+ 'La structure du document utilise une balise <main> visible unique ; '
+			+ 'La zone de pied de page est structurée via une balise <footer>.',
+		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.2.1',
+				solution: [{
+					info1: '1. Vérifier que la zone d’en-tête est structurée au moyen d’un élément <header> ; ',
+					info2: '2. Vérifier que les zones de navigation principales et secondaires sont structurées au moyen d’un élément <nav> ; ',
+					info3: '3. Vérifier que l’élément <nav> n’est pas utilisé en dehors de la structuration des zones de navigation principales et secondaires ; ',
+					info4: '4. Vérifier que la zone de contenu principal est structurée au moyen d’un élément <main> ; ',
+					info5: '5. Si le document possède plusieurs éléments <main>, vérifier qu’un seul de ces éléments est visible (les autres occurrences de l’élément sont pourvues d’un attribut hidden) ; ',
+					info6: '6. Vérifier que la zone de pied de page est structurée au moyen d’un élément <footer>. ',
+					info7: '7. Si c’est le cas pour chaque zone de contenu, 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.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. Retrouver dans le document les images décoratives dépourvues de légende structurées au moyen d’un élément <svg> ;',
+					info2: '2. 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).',
+					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.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,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 6 : Liens',
+		subtitle: '6.2 Dans chaque page web, chaque lien a-t-il un intitulé ? ',
+		items: [
+			{
+
+				precision: ' 6.2.1 Dans chaque page web, chaque lien a-t-il un intitulé entre <a> et </a> ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#6.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les liens quels qu’ils soient ; ',
+					info2: '2. Pour chaque lien, vérifier que le contenu de l’élément <a> (ou d’un élément pourvu d’un attribut WAI-ARIA role=link) contient un intitulé (texte ou alternative) ; ',
+					info3: '3. Si c’est le cas pour chaque lien, le test est validé.',
+				}],
+				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/HeaderToolbar/HeaderToolbar.mdx

@@ -22,7 +22,7 @@ L’élément `HeaderToolbar` est utilisé pour afficher une barre d'outils en h
 
 <Source dark code={`
 <script setup lang="ts">
-	import HeaderToolbar from '@cnamts/synapse'
+	import { HeaderToolbar } from '@cnamts/synapse'
 </script>
 
 <template>

package/src/components/HeaderToolbar/HeaderToolbar.stories.ts

@@ -43,7 +43,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import HeaderToolbar from '@cnamts/synapse'
+					import { HeaderToolbar } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -232,7 +232,7 @@ export const CustomLinks: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import HeaderToolbar from '@cnamts/synapse'
+					import { HeaderToolbar } from '@cnamts/synapse'
 					
 					const leftMenu = [
 						{

package/src/components/HeaderToolbar/HeaderToolbar.vue

@@ -249,6 +249,7 @@
 									<SyInputSelect
 										:items="itemsSelectMenu as unknown as string[]"
 										:label="item.title"
+										:outlined="false"
 										is-header-toolbar
 										@click="handleLink(index)"
 									/>

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

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

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

@@ -34,7 +34,7 @@ export const AccessibilitePanel: StoryObj = {
 							</div>
 						</div>
 
-						<v-expansion-panels value="opened" multiple>
+						<v-expansion-panels v-if="AccessibiliteItemsIndeterminate.length > 0" 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;"/>
@@ -72,6 +72,8 @@ export const AccessibilitePanel: StoryObj = {
 								</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>
 					<v-col cols="6">
 						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">

package/src/components/LangBtn/AccessibiliteItems.ts

@@ -1,37 +1,6 @@
 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,
-
-			},
-
-		],
-	},
 
 ]
 

package/src/components/LangBtn/LangBtn.mdx

@@ -17,7 +17,7 @@ Le composant `LangBtn` est utilisé pour afficher une alerte à l’utilisateur.
 
 <Source dark code={`
 <script setup lang="ts">
- import LangBtn from '@cnamts/synapse'
+ import { LangBtn } from '@cnamts/synapse'
  import { ref } from 'vue'
 
  const value = ref('fr')

package/src/components/LangBtn/LangBtn.stories.ts

@@ -55,7 +55,7 @@ export const Default: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import LangBtn from '@cnamts/synapse'
+	import { LangBtn } from '@cnamts/synapse'
 	import { ref } from 'vue'
 
 	const value = ref('fr')
@@ -117,7 +117,7 @@ export const AllLanguages: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import LangBtn from '@cnamts/synapse'
+	import { LangBtn } from '@cnamts/synapse'
 	import { ref } from 'vue'
 
 	const value = ref('fr')
@@ -166,7 +166,7 @@ export const NoDownArrow: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import LangBtn from '@cnamts/synapse'
+	import { LangBtn } from '@cnamts/synapse'
 	import { ref } from 'vue'
 
 	const value = ref('fr')
@@ -216,7 +216,7 @@ export const FlatBtn: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import LangBtn from '@cnamts/synapse'
+	import { LangBtn } from '@cnamts/synapse'
 	import { ref } from 'vue'
 
 	const value = ref('fr')