@cnamts/synapse 0.0.5-alpha → 0.0.7-alpha

package/src/components/SubHeader/AccessibiliteItems.ts

@@ -0,0 +1,146 @@
+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 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.2 Chaque image de décoration est-elle correctement ignorée par les technologies d’assistance ?',
+		items: [
+			{
+
+				precision: '1.2.4 Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ? '
+					+ ' La balise <svg> possède un attribut WAI-ARIA aria-hidden="true" ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’alternative textuelle ;'
+					+ ' Les balises <title> et <desc> sont absentes ou vides ;'
+					+ ' La balise <svg> et ses enfants sont dépourvus d’attribut title.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.2.4',
+				solution: [{
+					info1: '1. Pour chaque image, vérifier que l’élément <svg> ne possède pas d’attributs aria-labelledby ou aria-label et qu’il :'
+						+ ' Possède un attribut WAI-ARIA aria-hidden="true" ;'
+						+ ' Et est dépourvu d’alternative textuelle (ainsi que ses éléments enfants) ;'
+						+ ' Et ne contient pas d’éléments <title> et <desc> à moins que vides de contenu ;'
+						+ ' Et est dépourvu d’attribut title (ainsi que ses éléments enfants).'
+						+ ' Le nom du composant est cohérent avec l’état de la fonctionnalité ou des contenus contrôlés (par exemple pour une fonctionnalité permettant d’afficher ou de masquer une zone de contenu).',
+					info2: '2. Sinon, vérifier la présence d’un composant d’interface accessible permettant d’accéder aux mêmes fonctionnalités',
+					info3: '3. Si c’est le cas pour chaque image, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+
+		],
+	},
+	{
+		title: 'Catégorie 3 : Couleurs',
+		subtitle: '3.2 Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé?',
+		items: [
+			{
+				precision: '3.2.1 Dans chaque page web, le texte et le texte en image sans effet de graisse d’une taille restituée inférieure à 24px vérifient-ils une de ces conditions? Le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#3.2.1',
+				solution: [{
+					info1: '1. Retrouver dans le document les textes et les textes en image sans effet de graisse d’une taille restituée inférieure à 24px qui pourraient poser des problèmes de contraste ;',
+					info2: '2. Pour chacun de ces textes, vérifier que : Soit le rapport de contraste entre le texte et son arrière-plan est de 4.5:1, au moins; Soit un mécanisme permet à l’utilisateur d’afficher le texte avec un rapport de contraste de 4.5:1, au moins.',
+					info3: '3. Si c’est le cas pour chaque texte, le test est validé',
+				}],
+				expertise: ExpertiseLevelEnum.DESIGN,
+
+			},
+			{
+				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 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,
+
+			},
+
+		],
+	},
+
+]

package/src/components/SubHeader/SubHeader.mdx

@@ -18,7 +18,7 @@ Le composant `SubHeader` est utilisé pour afficher un bloc d’informations sou
 
 <Source dark code={`
 <script setup lang="ts">
-import SubHeader from '@cnamts/synapse'
+import { SubHeader } from '@cnamts/synapse'
 </script>
 
 <template>

package/src/components/SubHeader/SubHeader.stories.ts

@@ -117,7 +117,7 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SubHeader from '@cnamts/synapse'
+					import { SubHeader } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -197,7 +197,7 @@ export const DataList: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SubHeader from '@cnamts/synapse'
+					import { SubHeader } from '@cnamts/synapse'
 										
 					const items = [
 						{
@@ -294,9 +294,10 @@ export const ActionBtn: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SubHeader from '@cnamts/synapse'
+					import { SubHeader } from '@cnamts/synapse'
+					import { ref } from 'vue'
 										
-					const items = [
+					const items = ref([
 						{
 							title: 'Informations patient',
 							items: [
@@ -317,10 +318,12 @@ export const ActionBtn: Story = {
 								{ key: 'Dernière modification', value: '04/06/2020' },
 							],
 						},
-					]
+					])
 					
 					const updateInfo = (eventValue: { dataListIndex: number, itemIndex: number }) => {
-						items[eventValue.dataListIndex].items[eventValue.itemIndex].value = '25/09/1970'
+                        if (items) {
+							items[eventValue.dataListIndex].items[eventValue.itemIndex].value = '25/09/1970'
+						}
 					}
 				</script>
 				`,
@@ -401,7 +404,7 @@ export const HtmlValue: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SubHeader from '@cnamts/synapse'
+					import { SubHeader } from '@cnamts/synapse'
 										
 					const items = [
 						{
@@ -499,7 +502,7 @@ export const Loading: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SubHeader from '@cnamts/synapse'
+					import { SubHeader } from '@cnamts/synapse'
 					
 					const items = [
 						{
@@ -609,7 +612,7 @@ export const SlotAdditionalInformations: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SubHeader from '@cnamts/synapse'
+					import { SubHeader } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -694,7 +697,7 @@ export const SlotBackBtn: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SubHeader from '@cnamts/synapse'
+					import { SubHeader } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -765,7 +768,7 @@ export const SlotBackBtnIcon: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SubHeader from '@cnamts/synapse'
+					import { SubHeader } from '@cnamts/synapse'
 					import { mdiStepBackward } from '@mdi/js'
 					
 					const backArrowIcon = ref(mdiStepBackward)
@@ -829,7 +832,7 @@ export const SlotTitle: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SubHeader from '@cnamts/synapse'
+					import { SubHeader } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -891,7 +894,7 @@ export const SlotSubTitle: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SubHeader from '@cnamts/synapse'
+					import { SubHeader } from '@cnamts/synapse'
 				</script>
 				`,
 			},
@@ -954,7 +957,7 @@ export const SlotRightContent: Story = {
 				name: 'Script',
 				code: `
 				<script setup lang="ts">
-					import SubHeader from '@cnamts/synapse'
+					import { SubHeader } from '@cnamts/synapse'
 					
 					import { mdiClose, mdiContentCopy } from '@mdi/js'
 				</script>

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

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

package/src/components/SyAlert/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/{Alert → SyAlert}/Accessibilite.stories.ts

@@ -8,7 +8,7 @@ const iconEye = mdiEye
 const linkICon = mdiLink
 
 export default {
-	title: 'Composants/Feedback/Alert/Accessibilité',
+	title: 'Composants/Feedback/SyAlert/Accessibilité',
 }
 
 export const AccessibilitePanel: StoryObj = {

package/src/components/{Alert → SyAlert}/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 10 : Présentation de l’information',
 		subtitle: '10.8 Pour chaque page Web, les contenus cachés ont-ils vocation à être ignorés par les technologies d’assistance ?',
@@ -61,7 +31,7 @@ export const AccessibiliteItemsValidated = [
 		items: [
 
 			{
-				precision: 'Chaque image vectorielle (balise <svg>) de décoration, sans légende, vérifie-t-elle ces conditions ?'
+				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 ;'
@@ -88,7 +58,7 @@ export const AccessibiliteItemsValidated = [
 		items: [
 			{
 
-				precision: '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.',
+				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 ;',

package/src/components/{Alert/Alert.mdx → SyAlert/SyAlert.mdx}

@@ -1,24 +1,24 @@
 import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
 
-import * as AlertStories from './Alert.stories';
+import * as SyAlertStories from './SyAlert.stories';
 
-<Meta of={AlertStories} />
+<Meta of={SyAlertStories} />
 
-# AlertWrapper
+# SyAlert
 
-Le composant `AlertWrapper` est utilisé pour afficher une alerte à l’utilisateur.
+Le composant `SyAlert` est utilisé pour afficher une alerte à l’utilisateur.
 
-<Canvas of={AlertStories.Default}  />
+<Canvas of={SyAlertStories.Default}  />
 
 # API
 
-<Controls of={AlertStories.Default} />
+<Controls of={SyAlertStories.Default} />
 
 # Exemple d'utilisation
 
 <Source dark code={`
 <script setup lang="ts">
-import Alert from '@cnamts/synapse'
+import { SyAlert } from '@cnamts/synapse'
 import { ref } from 'vue'
 
 const showAlert = ref(true);
@@ -26,9 +26,9 @@ const showAlert = ref(true);
 
 <template>
   <div class="d-flex flex-wrap align-center justify-center">
-    <Alert v-model="showAlert" type="warning" variant="tonal" :closable="true">
+    <SyAlert v-model="showAlert" type="warning" variant="tonal" :closable="true">
       <template #default>This is a warning alert</template>
-    </Alert>
+    </SyAlert>
 
     <VBtn v-if="!showAlert" color="primary" @click="showAlert = true" class="ma-6">Réinitialiser</VBtn>
   </div>

package/src/components/{Alert/Alert.stories.ts → SyAlert/SyAlert.stories.ts}

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
-import Alert from './Alert.vue'
+import SyAlert from './SyAlert.vue'
 import { VBtn } from 'vuetify/components'
 
 const meta = {
-	title: 'Composants/Feedback/Alert',
-	component: Alert,
+	title: 'Composants/Feedback/SyAlert',
+	component: SyAlert,
 	parameters: {
 		layout: 'fullscreen',
 		controls: { exclude: ['prependIcon', 'dismissAlert'] },
@@ -24,7 +24,7 @@ const meta = {
 			default: 'outlined',
 		},
 	},
-} as Meta<typeof Alert>
+} as Meta<typeof SyAlert>
 
 export default meta
 
@@ -37,9 +37,9 @@ export const Default: Story = {
 				name: 'Template',
 				code: `<template>
 	<div class="d-flex flex-wrap align-center justify-center">
-		<Alert v-model="showAlert" type="success" variant="tonal" :closable="true">
+		<SyAlert v-model="showAlert" type="success" variant="tonal" :closable="true">
 			<template #default>This is a success alert</template>
-		</Alert>
+		</SyAlert>
 
 		<VBtn v-if="!showAlert" color="primary" @click="showAlert = true">
 			Réinitialiser
@@ -51,7 +51,7 @@ export const Default: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import Alert from '@cnamts/synapse'
+	import { SyAlert } from '@cnamts/synapse'
 	import { ref } from 'vue'
 	
 	const showAlert = ref(true);
@@ -69,15 +69,15 @@ export const Default: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { Alert, VBtn },
+			components: { SyAlert, VBtn },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center justify-center">
-					<Alert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
+					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
 						<template #default>{{ args.default }}</template>
-					</Alert>
+					</SyAlert>
 					<VBtn v-if="!args.modelValue" color="primary" @click="args.modelValue = true" class="ma-6">
 						Réinitialiser
 					</VBtn>
@@ -94,9 +94,9 @@ export const Outlined: Story = {
 				name: 'Template',
 				code: `<template>
 	<div class="d-flex flex-wrap align-center justify-center">
-		<Alert v-model="showAlert" type="warning" variant="outlined" :closable="true">
+		<SyAlert v-model="showAlert" type="warning" variant="outlined" :closable="true">
 			<template #default>This is a warning alert</template>
-		</Alert>
+		</SyAlert>
 
 		<VBtn v-if="!showAlert" color="primary" @click="showAlert = true">
 			Réinitialiser
@@ -108,7 +108,7 @@ export const Outlined: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import Alert from '@cnamts/synapse'
+	import { SyAlert } from '@cnamts/synapse'
 	import { ref } from 'vue'
 	
 	const showAlert = ref(true);
@@ -125,15 +125,15 @@ export const Outlined: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { Alert, VBtn },
+			components: { SyAlert, VBtn },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center justify-center">
-					<Alert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
+					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
 						<template #default>{{ args.default }}</template>
-					</Alert>
+					</SyAlert>
 					<VBtn v-if="!args.modelValue" color="primary" @click="args.modelValue = true" class="ma-6">
 						Réinitialiser
 					</VBtn>
@@ -150,10 +150,10 @@ export const SlotIcon: Story = {
 				name: 'Template',
 				code: `<template>
 	<div class="d-flex flex-wrap align-center justify-center">
-		<Alert v-model="showAlert" type="success" variant="tonal" :closable="true">
+		<SyAlert v-model="showAlert" type="success" variant="tonal" :closable="true">
 			<template #default>This is a success alert</template>
 			<template #icon>{{ icon }}</template>
-		</Alert>
+		</SyAlert>
 
 		<VBtn v-if="!showAlert" color="primary" @click="showAlert = true">
 			Réinitialiser
@@ -165,7 +165,7 @@ export const SlotIcon: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import Alert from '@cnamts/synapse'
+	import { SyAlert } from '@cnamts/synapse'
 	import { ref } from 'vue'
 	import { mdiAccountCheck } from '@mdi/js'
 	
@@ -185,16 +185,16 @@ export const SlotIcon: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { Alert, VBtn },
+			components: { SyAlert, VBtn },
 			setup() {
 				return { args }
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center justify-center">
-					<Alert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
+					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
 						<template #default>{{ args.default }}</template>
 						<template #icon>{{ args.icon }}</template>
-					</Alert>
+					</SyAlert>
 					<VBtn v-if="!args.modelValue" color="primary" @click="args.modelValue = true" class="ma-6">
 						Réinitialiser
 					</VBtn>

package/src/components/{Alert/Alert.vue → SyAlert/SyAlert.vue}

@@ -131,6 +131,13 @@
 	}
 }
 
+.v-btn {
+  text-transform: none;
+  font-weight: bold;
+  font-size: 0.75rem;
+  letter-spacing: normal;
+}
+
 @media screen and (max-width: 440px) {
 	.alert {
 		display: flex;

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

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

package/src/components/{Alert/tests/Alert.spec.ts → SyAlert/tests/SyAlert.spec.ts}

@@ -2,12 +2,12 @@ import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { vuetify } from '@tests/unit/setup'
 
-import Alert from '../Alert.vue'
+import SyAlert from '../SyAlert.vue'
 import { VBtn } from 'vuetify/components'
 
 describe('Alert', () => {
 	it('render correctly', async () => {
-		const wrapper = mount(Alert, {
+		const wrapper = mount(SyAlert, {
 			props: {
 				title: 'title',
 				message: 'message',
@@ -25,7 +25,7 @@ describe('Alert', () => {
 	})
 
 	it('show and hide correctly when modelValue is updated', async () => {
-		const wrapper = mount(Alert, {
+		const wrapper = mount(SyAlert, {
 			props: {
 				title: 'title',
 				message: 'message',
@@ -57,7 +57,7 @@ describe('Alert', () => {
 	})
 
 	it('hide when the close btn is clicked', async () => {
-		const wrapper = mount(Alert, {
+		const wrapper = mount(SyAlert, {
 			props: {
 				title: 'title',
 				message: 'message',
@@ -84,7 +84,7 @@ describe('Alert', () => {
 	})
 
 	it('prependIcon computed property', async () => {
-		const wrapper = mount(Alert, {
+		const wrapper = mount(SyAlert, {
 			props: {
 				title: 'title',
 				message: 'message',

package/src/components/{Alert/tests/__snapshots__/Alert.spec.ts.snap → SyAlert/tests/__snapshots__/SyAlert.spec.ts.snap}

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert > render correctly 1`] = `
-"<div data-v-284427ba="" class="v-alert v-alert--border v-alert--border-start v-theme--light text-success v-alert--density-default v-alert--variant-tonal alert alert--success" role="alert" message="message">
+"<div data-v-4c7c43b0="" class="v-alert v-alert--border v-alert--border-start v-theme--light text-success v-alert--density-default v-alert--variant-tonal alert alert--success" role="alert" message="message">
   <!----><span class="v-alert__underlay"></span>
   <div class="v-alert__border"></div>
-  <div class="v-alert__prepend"><i data-v-284427ba="" class="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z mdi v-icon notranslate v-theme--light alert-icon" style="font-size: 1.5rem; height: 1.5rem; width: 1.5rem;" aria-hidden="true"></i></div>
+  <div class="v-alert__prepend"><i data-v-4c7c43b0="" class="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z mdi v-icon notranslate v-theme--light alert-icon" style="font-size: 1.5rem; height: 1.5rem; width: 1.5rem;" aria-hidden="true"></i></div>
   <div class="v-alert__content">
     <div class="v-alert-title">title</div>
     <!---->slot content

package/src/components/UserMenuBtn/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 />