@cnamts/synapse 0.0.8-alpha → 0.0.9-alpha

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

@@ -0,0 +1,191 @@
+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/Navigation/ExternalLinks/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>
+														<p>{{ value.info4 }}</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/ExternalLinks/AccessibiliteItems.ts

@@ -0,0 +1,197 @@
+import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+
+export const AccessibiliteItemsIndeterminate = [
+
+	{
+		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.DEV,
+
+			},
+		],
+	},
+	{
+		title: 'Catégorie 6 : Liens',
+		subtitle: '6.1 Chaque lien est-il explicite ? ',
+		items: [
+
+			{
+
+				precision: '6.1.3 Chaque lien composite vérifie-t-il une de ces conditions ? '
+					+ '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.3',
+				solution: [{
+					info1: '1. Retrouver dans le document les liens composites (lien composé à la fois de contenu texte et d’éléments de type image) ; ',
+					info2: '2. Pour chaque lien composite, vérifier que ce qui permet d’en comprendre la fonction et la destination est : '
+						+ 'Soit l’intitulé du lien seul, fourni par la combinaison du contenu texte et de l’alternative textuelle de l’image ; '
+						+ 'Soit le contexte du lien. ',
+					info3: '3. Si c’est le cas pour chaque lien composite, 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,
+
+			},
+
+		],
+	},
+
+	{
+		title: 'Catégorie 12 : Navigation',
+		subtitle: '12.11 Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier ?',
+
+		items2: [
+			{
+				subtitle: '12.8 Dans chaque page web, l’ordre de tabulation est-il cohérent',
+				precision: ' 12.8.2 Pour chaque script qui met à jour ou insère un contenu, l’ordre de tabulation reste-t-il cohérent ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.8.2',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des contenus insérés au moyen d’un script (affichage d’éléments masqués, mise jour de contenu via AJAX par exemple) ;',
+					info2: '2. Positionner la tabulation sur l’élément déclencheur et l’activer ;',
+					info3: '3. Après l’affichage du contenu mis à jour, vérifier que la tabulation reste cohérente (repositionnement correct du focus) ;',
+					info4: '4. Si c’est le cas, le test est validé.',
+
+				}],
+				expertise: ExpertiseLevelEnum.DEV,
+
+			},
+
+		],
+		items: [
+			{
+				precision: '12.11.1 Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier ?',
+				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#12.11.1',
+				solution: [{
+					info1: '1. Retrouver dans le document l’ensemble des contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface ;',
+					info2: '2. Pour chaque contenu additionnel, s’il contient des composants d’interface avec lesquels l’utilisateur peut interagir au clavier (par exemple, une infobulle personnalisée qui propose un lien dans son contenu), vérifier que ces composants d’interface sont atteignables au clavier ;',
+					info3: '3. Si c’est le cas pour chaque contenu additionnel, 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 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/ExternalLinks/constants/ExpertiseLevelEnum.ts

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

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
-"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;" aria-haspopup="menu" aria-expanded="true" aria-owns="external-link-btn" aria-label="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;" aria-haspopup="menu" aria-expanded="true" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
     <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="mr-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
     <!---->
     <!---->
@@ -11,7 +11,7 @@ exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
     <transition-stub name="fade-transition" appear="true" persisted="false" css="true">
       <!---->
     </transition-stub>
-    <transition-stub name="fade-transition" appear="true" persisted="true" css="true" target="<button data-v-353763df=&quot;&quot; type=&quot;button&quot; class=&quot;v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn&quot; style=&quot;background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;true&quot; aria-owns=&quot;external-link-btn&quot; aria-label=&quot;external-link-btn&quot;><span class=&quot;v-btn__overlay&quot;></span><span class=&quot;v-btn__underlay&quot;></span><!----><span class=&quot;v-btn__content&quot; data-no-activator=&quot;&quot;><span data-v-353763df=&quot;&quot; class=&quot;mr-3 vd-external-links-btn-text white--text&quot;>Consulter les données externes</span><i data-v-353763df=&quot;&quot; class=&quot;M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white&quot; aria-hidden=&quot;true&quot;></i></span><!----><!----></button>">
+    <transition-stub name="fade-transition" appear="true" persisted="true" css="true" target="<button data-v-353763df=&quot;&quot; type=&quot;button&quot; class=&quot;v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn&quot; style=&quot;background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;external-link-btn&quot; aria-label=&quot;external-link-btn&quot; aria-owns=&quot;external-link-btn&quot;><span class=&quot;v-btn__overlay&quot;></span><span class=&quot;v-btn__underlay&quot;></span><!----><span class=&quot;v-btn__content&quot; data-no-activator=&quot;&quot;><span data-v-353763df=&quot;&quot; class=&quot;mr-3 vd-external-links-btn-text white--text&quot;>Consulter les données externes</span><i data-v-353763df=&quot;&quot; class=&quot;M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white&quot; aria-hidden=&quot;true&quot;></i></span><!----><!----></button>">
       <div class="v-overlay__content" style="--v-overlay-anchor-origin: top right; transform-origin: bottom right; top: 12px; left: 12px; min-width: 0px; max-width: 0px; max-height: 0px;">
         <div data-v-353763df="" class="v-list v-theme--light v-list--density-default elevation-3 v-list--one-line py-0 vd-external-links-list" tabindex="0" role="listbox"><a data-v-353763df="" class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line rounded-0 v-list-item--variant-text" tabindex="-2" href="https://www.ameli.fr" target="_blank" rel="noopener noreferrer"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
             <!---->
@@ -58,7 +58,7 @@ exports[`ExternalLinks > renders correctly 1`] = `
 `;
 
 exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
-"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="true" aria-owns="external-link-btn" aria-label="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="true" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
     <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
     <!---->
     <!---->
@@ -68,7 +68,7 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
     <transition-stub name="fade-transition" appear="true" persisted="false" css="true">
       <!---->
     </transition-stub>
-    <transition-stub name="fade-transition" appear="true" persisted="true" css="true" target="<button data-v-353763df=&quot;&quot; type=&quot;button&quot; class=&quot;v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn&quot; style=&quot;background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;true&quot; aria-owns=&quot;external-link-btn&quot; aria-label=&quot;external-link-btn&quot;><span class=&quot;v-btn__overlay&quot;></span><span class=&quot;v-btn__underlay&quot;></span><!----><span class=&quot;v-btn__content&quot; data-no-activator=&quot;&quot;><span data-v-353763df=&quot;&quot; class=&quot;ml-3 vd-external-links-btn-text white--text&quot;>Consulter les données externes</span><i data-v-353763df=&quot;&quot; class=&quot;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white&quot; aria-hidden=&quot;true&quot;></i></span><!----><!----></button>">
+    <transition-stub name="fade-transition" appear="true" persisted="true" css="true" target="<button data-v-353763df=&quot;&quot; type=&quot;button&quot; class=&quot;v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn&quot; style=&quot;background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;external-link-btn&quot; aria-label=&quot;external-link-btn&quot; aria-owns=&quot;external-link-btn&quot;><span class=&quot;v-btn__overlay&quot;></span><span class=&quot;v-btn__underlay&quot;></span><!----><span class=&quot;v-btn__content&quot; data-no-activator=&quot;&quot;><span data-v-353763df=&quot;&quot; class=&quot;ml-3 vd-external-links-btn-text white--text&quot;>Consulter les données externes</span><i data-v-353763df=&quot;&quot; class=&quot;M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white&quot; aria-hidden=&quot;true&quot;></i></span><!----><!----></button>">
       <div class="v-overlay__content" style="--v-overlay-anchor-origin: bottom right; transform-origin: top right; top: 12px; left: 12px; min-width: 0px; max-width: 0px; max-height: 0px;">
         <div data-v-353763df="" class="v-list v-theme--light v-list--density-default elevation-3 v-list--one-line py-0 vd-external-links-list" tabindex="0" role="listbox"><a data-v-353763df="" class="v-list-item v-list-item--link v-theme--light v-list-item--density-default v-list-item--one-line rounded-0 v-list-item--variant-text" tabindex="-2" href="https://www.ameli.fr" target="_blank" rel="noopener noreferrer"><span class="v-list-item__overlay"></span><span class="v-list-item__underlay"></span>
             <!---->
@@ -109,7 +109,7 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
 `;
 
 exports[`ExternalLinks > slides on hover or focus 1`] = `
-"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-owns="external-link-btn" aria-label="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
     <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
     <!---->
     <!---->
@@ -119,7 +119,7 @@ exports[`ExternalLinks > slides on hover or focus 1`] = `
 `;
 
 exports[`ExternalLinks > slides on hover or focus 2`] = `
-"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-owns="external-link-btn" aria-label="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
     <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
     <!---->
     <!---->
@@ -129,7 +129,7 @@ exports[`ExternalLinks > slides on hover or focus 2`] = `
 `;
 
 exports[`ExternalLinks > slides on hover or focus 3`] = `
-"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-owns="external-link-btn" aria-label="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
     <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
     <!---->
     <!---->
@@ -139,7 +139,7 @@ exports[`ExternalLinks > slides on hover or focus 3`] = `
 `;
 
 exports[`ExternalLinks > slides on hover or focus 4`] = `
-"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-owns="external-link-btn" aria-label="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
     <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
     <!---->
     <!---->
@@ -149,7 +149,7 @@ exports[`ExternalLinks > slides on hover or focus 4`] = `
 `;
 
 exports[`ExternalLinks > slides on hover or focus 5`] = `
-"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-owns="external-link-btn" aria-label="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+"<div data-v-353763df="" id="external-link-btn"><button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 vd-external-links-btn" style="background-color: #3d67ae; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(calc(100% - 48px)); position: absolute; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="false" aria-controls="external-link-btn" aria-label="external-link-btn" aria-owns="external-link-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
     <!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 vd-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span>
     <!---->
     <!---->