@cnamts/synapse 0.0.5-alpha → 0.0.6-alpha

package/src/components/FooterBar/AccessibiliteItems.ts

@@ -0,0 +1,257 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+	{
+		title: 'Catégorie 1 : Images',
+		subtitle: '1.6  Chaque image porteuse d’information a-t-elle, si nécessaire, une description détaillée ?',
+
+		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.3 Pour chaque image porteuse d’information ayant une alternative textuelle, cette alternative est-elle pertinente (hors cas particuliers) ?  ',
+				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,
+
+			},
+		],
+		items: [
+			{
+				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,
+
+			},
+			{
+				precision: '1.6.5 Chaque image vectorielle (balise <svg>) porteuse d’information, qui nécessite une description détaillée, vérifie-t-elle une de ces conditions ? '
+					+ 'Il existe un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente ; '
+					+ 'Il existe un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ; '
+					+ 'Il existe un attribut WAI-ARIA aria-describedby associant un passage de texte faisant office de description détaillée ; '
+					+ '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.5',
+				solution: [{
+					info1: '1. Retrouver dans le document les éléments <svg> porteurs d’information qui nécessitent une description détaillée ; ',
+					info2: '2. Pour chaque élément <svg>, vérifier qu’il existe : '
+						+ 'Soit un attribut WAI-ARIA aria-label contenant l’alternative textuelle et une référence à une description détaillée adjacente ; '
+						+ 'Soit un attribut WAI-ARIA aria-labelledby associant un passage de texte faisant office d’alternative textuelle et un autre faisant office de description détaillée ; '
+						+ 'Soit un attribut WAI-ARIA aria-describedby associant un passage de texte faisant office de description détaillée ; '
+						+ '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 élément <svg>, le test est validé.',
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+	},
+
+	{
+		title: 'Catégorie 3 : Couleurs',
+		items: [
+
+		],
+		items2: [
+			{
+				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 ?',
+				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,
+
+			},
+			{
+				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é?',
+				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.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,
+
+			},
+
+		],
+	},
+
+]
+
+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,
+
+			},
+
+		],
+		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.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 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/FooterBar/FooterBar.mdx

@@ -17,8 +17,8 @@ Le composant `FooterBar` est utilisé pour afficher une barre de pied de page av
 
 <Source dark code={`
     <script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
-	import CollapsibleList from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
+	import { CollapsibleList } from '@cnamts/synapse'
 	import { computed } from 'vue'
 	import { useDisplay } from 'vuetify'
 

package/src/components/FooterBar/FooterBar.stories.ts

@@ -213,7 +213,7 @@ export const Default: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
 	
 	const docProps = {
 		sitemapRoute: '/',
@@ -325,7 +325,7 @@ export const changeLinks: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
 	
 	const items = [
         		{
@@ -407,7 +407,7 @@ export const slotPrepend: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
 	
 	const items = [
         {
@@ -475,7 +475,7 @@ export const slotAppend: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
 	
 	const items = [
         {
@@ -541,7 +541,7 @@ export const extendedMode: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
 	
 	const items = [
         {
@@ -607,8 +607,8 @@ export const slotLogo: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
-	import Logo from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
+	import { Logo } from '@cnamts/synapse'
 	
 	const items = [
         {
@@ -689,8 +689,8 @@ export const collapsibleList: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
-	import CollapsibleList from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
+	import { CollapsibleList } from '@cnamts/synapse'
 	
 	const items = [
         {
@@ -817,7 +817,7 @@ export const hideSectionLogo: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
 	
 	const items = [
         {
@@ -880,7 +880,7 @@ export const hideSectionSocialMediaLinks: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
 	
 	const items = [
         {
@@ -943,7 +943,7 @@ export const customSocialMediaLinks: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
 	import { mdiFacebook, mdiTwitter, mdiLinkedin, mdiYoutube } from '@mdi/js'
 	
 	const items = [
@@ -1051,7 +1051,7 @@ export const lightTheme: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
 	
 	const items = [
         {
@@ -1114,7 +1114,7 @@ export const customTheme: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FooterBar from '@cnamts/synapse'
+	import { FooterBar } from '@cnamts/synapse'
 	
 	const items = [
         {

package/src/components/FooterBar/FooterBar.vue

@@ -145,91 +145,93 @@
 		}"
 		role="contentinfo"
 	>
-		<div
-			v-if="extendedMode"
-			class="d-flex align-start align-sm-center mb-6"
-		>
-			<div class="d-flex flex-grow-1 flex-column flex-sm-row">
-				<slot name="logo">
-					<Logo
-						v-if="!props.hideLogo"
-						:size="logoSize"
-						:class="{ 'mb-2 mb-sm-0': !props.hideSocialMediaLinks }"
-						class="logo"
-					/>
-				</slot>
+		<div class="container">
+			<div
+				v-if="extendedMode"
+				class="d-flex align-start align-sm-center mb-6"
+			>
+				<div class="d-flex flex-grow-1 flex-column flex-sm-row">
+					<slot name="logo">
+						<Logo
+							v-if="!props.hideLogo"
+							:size="logoSize"
+							:class="{ 'mb-2 mb-sm-0': !props.hideSocialMediaLinks }"
+							class="logo"
+						/>
+					</slot>
 
-				<VSpacer v-bind="options.spacer" />
+					<VSpacer v-bind="options.spacer" />
 
-				<SocialMediaLinks
-					v-if="!props.hideSocialMediaLinks"
-					:links="props.socialMediaLinks"
-					class="mr-8 social"
-				/>
-			</div>
+					<SocialMediaLinks
+						v-if="!props.hideSocialMediaLinks"
+						:links="props.socialMediaLinks"
+						class="mr-8 social"
+					/>
+				</div>
 
-			<VBtn
-				id="scroll-btn"
-				v-bind="options.goTopBtn"
-				:aria-label="locales.goTopBtnLabel"
-				@click="scrollToTop"
-			>
-				<VIcon
-					v-bind="options.goTopBtnIcon"
-					class="scroll"
+				<VBtn
+					id="scroll-btn"
+					v-bind="options.goTopBtn"
+					:aria-label="locales.goTopBtnLabel"
+					@click="scrollToTop"
 				>
-					{{ arrowTopIcon }}
-				</VIcon>
-			</VBtn>
-		</div>
-
-		<VDivider
-			v-if="extendedMode"
-			v-bind="options.divider"
-			class="mb-3"
-		/>
+					<VIcon
+						v-bind="options.goTopBtnIcon"
+						class="scroll"
+					>
+						{{ arrowTopIcon }}
+					</VIcon>
+				</VBtn>
+			</div>
 
-		<slot />
+			<VDivider
+				v-if="extendedMode"
+				v-bind="options.divider"
+				class="mb-3"
+			/>
 
-		<VDivider
-			v-if="extendedMode"
-			v-bind="options.divider"
-			class="mt-3 mb-6"
-		/>
+			<slot />
 
-		<ul
-			:class="{ 'py-2 py-sm-0': !extendedMode }"
-			class="vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3"
-		>
-			<slot name="prepend" />
+			<VDivider
+				v-if="extendedMode"
+				v-bind="options.divider"
+				class="mt-3 mb-6"
+			/>
 
-			<li
-				v-for="(item, index) in footerLinksMapping"
-				:key="index"
+			<ul
+				:class="{ 'py-2 py-sm-0': !extendedMode }"
+				class="vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3"
 			>
-				<component
-					:is="getLinkComponent(item)"
-					:href="item.href"
-					:to="item.to"
-					:aria-label="item.ariaLabel"
-					:target="item.openInNewTab ? '_blank' : undefined"
-					:tabindex="index"
-					:rel="item.openInNewTab ? 'noopener noreferrer' : undefined"
-					class="my-3 mx-4"
+				<slot name="prepend" />
+
+				<li
+					v-for="(item, index) in footerLinksMapping"
+					:key="index"
 				>
-					{{ item.text }}
-				</component>
-			</li>
+					<component
+						:is="getLinkComponent(item)"
+						:href="item.href"
+						:to="item.to"
+						:aria-label="item.ariaLabel"
+						:target="item.openInNewTab ? '_blank' : undefined"
+						:tabindex="index"
+						:rel="item.openInNewTab ? 'noopener noreferrer' : undefined"
+						class="my-3 mx-4"
+					>
+						{{ item.text }}
+					</component>
+				</li>
 
-			<li
-				v-if="props.version"
-				class="text-primary my-3 mx-4"
-			>
-				{{ locales.versionLabel }} {{ props.version }}
-			</li>
+				<li
+					v-if="props.version"
+					class="text-primary my-3 mx-4"
+				>
+					{{ locales.versionLabel }} {{ props.version }}
+				</li>
 
-			<slot name="append" />
-		</ul>
+				<slot name="append" />
+			</ul>
+		</div>
 	</VFooter>
 </template>
 
@@ -247,6 +249,11 @@ a {
 .v-footer {
   flex-grow: 0 !important;
   justify-content: center;
+  .container {
+    width: 100%;
+    max-width: 1712px;
+    margin: 0 auto;
+  }
 }
 .vd-footer-bar :deep() {
   .vd-footer-bar-links a {

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

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

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

@@ -2,26 +2,28 @@
 
 exports[`FooterBar > renders correctly 1`] = `
 "<footer data-v-a13c4e60="" class="v-footer v-theme--light bg-backgroundSurface elevation-3 vd-footer-bar flex-column align-stretch pa-3 w-100 v-theme--dark" style="height: auto;" role="contentinfo">
-  <!--v-if-->
-  <!--v-if-->
-  <!--v-if-->
-  <ul data-v-a13c4e60="" class="py-2 py-sm-0 vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3">
-    <li data-v-a13c4e60="">
-      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="0" class="my-3 mx-4">Plan du site</routerlink>
-    </li>
-    <li data-v-a13c4e60="">
-      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="1" class="my-3 mx-4">Conditions générales d’utilisation</routerlink>
-    </li>
-    <li data-v-a13c4e60="">
-      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="2" class="my-3 mx-4">Gestion des cookies</routerlink>
-    </li>
-    <li data-v-a13c4e60="">
-      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="3" class="my-3 mx-4">Mentions légales</routerlink>
-    </li>
-    <li data-v-a13c4e60="">
-      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="4" class="my-3 mx-4">Accessibilité&nbsp;: non conforme</routerlink>
-    </li>
+  <div data-v-a13c4e60="" class="container">
     <!--v-if-->
-  </ul>
+    <!--v-if-->
+    <!--v-if-->
+    <ul data-v-a13c4e60="" class="py-2 py-sm-0 vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3">
+      <li data-v-a13c4e60="">
+        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="0" class="my-3 mx-4">Plan du site</routerlink>
+      </li>
+      <li data-v-a13c4e60="">
+        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="1" class="my-3 mx-4">Conditions générales d’utilisation</routerlink>
+      </li>
+      <li data-v-a13c4e60="">
+        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="2" class="my-3 mx-4">Gestion des cookies</routerlink>
+      </li>
+      <li data-v-a13c4e60="">
+        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="3" class="my-3 mx-4">Mentions légales</routerlink>
+      </li>
+      <li data-v-a13c4e60="">
+        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="4" class="my-3 mx-4">Accessibilité&nbsp;: non conforme</routerlink>
+      </li>
+      <!--v-if-->
+    </ul>
+  </div>
 </footer>"
 `;

package/src/components/FranceConnectBtn/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',
 		items: [

package/src/components/FranceConnectBtn/FranceConnectBtn.mdx

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