@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/DownloadBtn/accessibilite/Accessibility.mdx

@@ -1,15 +1,77 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../DownloadBtn.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks'
+import * as DownloadBtnStories from '../DownloadBtn.stories'
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg'
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx'
 
-<Meta of={Stories} />
+<Meta of={DownloadBtnStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout componentName="DownloadBtn" iconSrc={AccessibilityIcon}>
 
+    <AuditSection>
+        <p>Rapport d’audit manuel : <a href="/audits/DownloadBtn.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></p>
+    </AuditSection>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/DownloadBtn.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
-		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4007" target="_blank" style={{color:'#0C41BD'}}>issue #4007</a>)</p>
-	</div>
+    <CriteriaSection>
+
+        <CriteriaCard icon="🏷️" title="Nom accessible explicite">
+            <ul>
+                <li>Le bouton doit avoir un texte visible explicite.</li>
+                <li>Si icône seule, un aria-label est obligatoire.</li>
+                <li>L’icône doit être décorative.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Interaction clavier">
+            <ul>
+                <li>Activation via Entrée et Espace.</li>
+                <li>Ordre de tabulation cohérent.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🔄" title="Gestion des états">
+            <ul>
+                <li>Annonce du chargement via aria-live.</li>
+                <li>Message d’erreur accessible en cas d’échec.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="👁️" title="Focus visible">
+            <ul>
+                <li>Focus clavier visible.</li>
+                <li>Ne pas supprimer le focus natif.</li>
+            </ul>
+        </CriteriaCard>
+
+    </CriteriaSection>
+
+    <DemoSection componentName="DownloadBtn">
+        <Primary/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Indiquer le format et le poids du fichier.</li>
+            <li>Fournir un fallbackFilename explicite.</li>
+            <li>Désactiver le bouton pendant le chargement.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li>
+                <a href="https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/" target="_blank" rel="noopener noreferrer">
+                    RGAA 4.1 – Critères
+                </a>
+            </li>
+        </ul>
+    </ResourcesSection>
+
+</AccessibilityGuideLayout>

package/src/components/DownloadBtn/config.ts

@@ -1,6 +1,6 @@
 export const config = {
 	btn: {
-		variant: 'outlined',
+		variant: 'outlined' as const,
 		color: 'primary',
 		class: 'text-wrap',
 		minHeight: '36px',

package/src/components/DownloadBtn/tests/DownloadBtn.a11y.spec.ts

@@ -0,0 +1,25 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import DownloadBtn from '../DownloadBtn.vue'
+
+describe('DownloadBtn – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(DownloadBtn, {
+			props: {
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- deso
+				filePromise: () => Promise.resolve({ data: new Blob(), status: 200, statusText: 'OK', headers: {}, config: {} as any }),
+				fallbackFilename: 'file.pdf',
+			},
+			slots: {
+				default: 'Télécharger',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DownloadBtn – default state')
+	})
+})

package/src/components/ErrorPage/ErrorPage.stories.ts

@@ -22,19 +22,19 @@ export const Default: Story = {
 			{
 				name: 'Template',
 				code: `
-				<template>
-					<div style="padding: 20px; background: rgb(231, 236, 245)">
-						<ErrorPage />
-					</div>
-				</template>
-				`,
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage />
+                    </div>
+                </template>
+                `,
 			}, {
 				name: 'Script',
 				code: `
-				<script setup lang="ts">
-					import { ErrorPage } from '@cnamts/synapse'
-				</script>
-				`,
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
 			},
 		],
 	},
@@ -54,22 +54,22 @@ export const WithLink: Story = {
 			{
 				name: 'Template',
 				code: `
-				<template>
-					<div style="padding: 20px; background: rgb(231, 236, 245)">
-						<ErrorPage 
-							btn-href=""
-							btn-text="Retour à l'accueil"
-								/>
-					</div>
-				</template>
-				`,
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage 
+                            btn-href="/"
+                            btn-text="Retour à l'accueil"
+                        />
+                    </div>
+                </template>
+                `,
 			}, {
 				name: 'Script',
 				code: `
-				<script setup lang="ts">
-					import { ErrorPage } from '@cnamts/synapse'
-				</script>
-				`,
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
 			},
 		],
 	},
@@ -84,39 +84,168 @@ export const CustomIllustration: Story = {
 			{
 				name: 'Template',
 				code: `
-				<template>
-					<div style="padding: 20px; background: rgb(231, 236, 245)">
-						<ErrorPage>
-							<template #illustration>
-								<div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
-									<span style="font-weight: 700; color: #0D419A;">Illustration</span>
-								</div>
-							</template>
-						</ErrorPage>
-					</div>
-				</template>
-				`,
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage>
+                            <template #illustration>
+                                <div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
+                                    <span style="font-weight: 700; color: #0D419A;">Illustration</span>
+                                </div>
+                            </template>
+                        </ErrorPage>
+                    </div>
+                </template>
+                `,
 			},
 			{
 				name: 'Script',
 				code: `
-				<script setup lang="ts">
-					import { ErrorPage } from '@cnamts/synapse'
-				</script>
-				`,
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
 			},
 		],
 	},
 	render: () => ({
 		components: { ErrorPage },
 		template: `
-			<ErrorPage>
-				<template #illustration>
-					<div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
-						<span style="font-weight: 700; color: #0D419A;">Illustration</span>
-					</div>
-				</template>
-			</ErrorPage>
-		`,
+            <ErrorPage>
+                <template #illustration>
+                    <div style="width: 260px; height: 200px; display: grid; place-items: center; border-radius: 12px; background: white; border: 2px dashed #0D419A;">
+                        <span style="font-weight: 700; color: #0D419A;">Illustration</span>
+                    </div>
+                </template>
+            </ErrorPage>
+        `,
 	}),
 }
+
+export const SlotAction: Story = {
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage :hide-btn="true">
+                            <template #action>
+                                <div style="display: flex; gap: 8px; margin-top: 16px;">
+                                    <VBtn href="/" color="primary">Retour à l'accueil</VBtn>
+                                    <VBtn variant="outlined" color="primary">Déconnexion</VBtn>
+                                </div>
+                            </template>
+                        </ErrorPage>
+                    </div>
+                </template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
+			},
+		],
+	},
+	render: () => ({
+		components: { ErrorPage },
+		template: `
+            <ErrorPage :hide-btn="true">
+                <template #action>
+                    <div style="display: flex; gap: 8px; margin-top: 16px;">
+                        <VBtn href="/" color="primary">Retour à l'accueil</VBtn>
+                        <VBtn variant="outlined" color="primary">Déconnexion</VBtn>
+                    </div>
+                </template>
+            </ErrorPage>
+        `,
+	}),
+}
+
+export const SlotAdditionalContent: Story = {
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage>
+                            <template #additional-content>
+                                <p style="text-align: center; color: #555;">
+                                    Si le problème persiste, veuillez contacter le support technique.
+                                </p>
+                            </template>
+                        </ErrorPage>
+                    </div>
+                </template>
+                `,
+			},
+			{
+				name: 'Script',
+				code: `
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
+			},
+		],
+	},
+	render: () => ({
+		components: { ErrorPage },
+		template: `
+            <ErrorPage>
+                <template #additional-content>
+                    <p style="text-align: center; color: #555;">
+                        Si le problème persiste, veuillez contacter le support technique.
+                    </p>
+                </template>
+            </ErrorPage>
+        `,
+	}),
+}
+
+export const WithRole: Story = {
+	args: {
+		...Default.args,
+		role: 'region',
+		uniqueId: 'error-page-region',
+	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage
+                            role="region"
+                            unique-id="error-page-region"
+                        />
+                    </div>
+                </template>
+                `,
+			}, {
+				name: 'Script',
+				code: `
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
+			},
+		],
+	},
+}

package/src/components/ErrorPage/ErrorPage.vue

@@ -4,6 +4,7 @@
 	import { computed } from 'vue'
 	import type { RouteRecordRaw } from 'vue-router'
 	import { useThemeLocales } from '@/utils/theme'
+	import type { PageAriaRole } from '../types'
 
 	const props = defineProps<{
 		pageTitle?: string
@@ -14,6 +15,9 @@
 		btnHref?: string
 		btnLink?: RouteRecordRaw | string
 		hideBtn?: boolean
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+		uniqueId?: string
+		role?: PageAriaRole
 	}>()
 
 	const { themeLocales } = useThemeLocales(locales)
@@ -35,6 +39,9 @@
 		:btn-href="props.btnHref"
 		:btn-link="props.btnLink"
 		:hide-btn="props.hideBtn"
+		:unique-id="props.uniqueId ?? undefined"
+		:heading-level="props.headingLevel"
+		:role="props.role"
 	>
 		<template
 			v-if="src || $slots.illustration"
@@ -49,6 +56,20 @@
 				>
 			</slot>
 		</template>
+
+		<template
+			v-if="$slots.action"
+			#action
+		>
+			<slot name="action" />
+		</template>
+
+		<template
+			v-if="$slots['additional-content']"
+			#additional-content
+		>
+			<slot name="additional-content" />
+		</template>
 	</StatusPage>
 </template>
 

package/src/components/ErrorPage/accessibilite/Accessibility.mdx

@@ -32,6 +32,14 @@ import {
             </ul>
         </CriteriaCard>
 
+        <CriteriaCard icon="🏷️" title="Rôle et identifiant ARIA">
+            <ul>
+                <li><strong>Prop <code>role</code></strong> : permet de définir le rôle ARIA de la page d'erreur — deux valeurs acceptées : <code>main</code> ou <code>region</code></li>
+                <li><strong>Prop <code>uniqueId</code></strong> : permet de définir un identifiant unique sur le conteneur, facilitant le ciblage par <code>aria-labelledby</code> ou <code>aria-describedby</code> depuis d'autres éléments</li>
+                <li><strong>Usage recommandé</strong> : utiliser <code>role="main"</code> si la page d'erreur constitue le contenu principal, ou <code>role="region"</code> si elle est intégrée dans une section d'une mise en page plus complexe</li>
+            </ul>
+        </CriteriaCard>
+
         <CriteriaCard icon="🔗" title="Liens et boutons">
             <ul>
                 <li><strong>Bouton de retour</strong> : rendu via <code>btn-href</code> (balise <code>a</code>) ou <code>btn-link</code> (balise <code>router-link</code>)</li>
@@ -55,6 +63,10 @@ import {
         <Story of={Stories.Default} />
     </DemoSection>
 
+    <DemoSection title="Avec rôle et identifiant ARIA" componentName="ErrorPage">
+        <Story of={Stories.WithRole} />
+    </DemoSection>
+
     <BestPracticesSection>
         <ul>
             <li>Les valeurs par défaut de <code>page-title</code>, <code>message</code> et <code>code</code> proviennent du thème — les surcharger uniquement si le contexte métier le nécessite</li>
@@ -62,6 +74,8 @@ import {
             <li>Ne pas masquer le bouton (<code>hide-btn</code>) sans proposer une alternative de navigation claire</li>
             <li>Les illustrations doivent toujours être décoratives (<code>aria-hidden="true"</code>) — ne jamais y placer d'information essentielle</li>
             <li>Personnaliser <code>code-error-text</code> si le contexte métier nécessite une formulation différente de <em>"Code d'erreur : "</em></li>
+            <li>Utiliser <code>role</code> pour préciser le rôle sémantique du composant dans son contexte d'intégration — préférer <code>role="main"</code> pour le contenu principal ou <code>role="region"</code> pour une section d'une mise en page plus complexe</li>
+            <li>Utiliser <code>unique-id</code> pour permettre à d'autres éléments de référencer la page d'erreur via <code>aria-labelledby</code> ou <code>aria-describedby</code></li>
         </ul>
     </BestPracticesSection>
 
@@ -71,6 +85,7 @@ import {
             <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 2.4.4 – Link Purpose</a></li>
             <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 1.1.1 – Non-text Content</a></li>
             <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/" target="_blank" style={{ color: '#0C41BD' }}>ARIA Authoring Practices Guide</a></li>
+            <li><a href="https://www.w3.org/TR/wai-aria-1.2/#landmark_roles" target="_blank" style={{ color: '#0C41BD' }}>WAI-ARIA 1.2 – Landmark Roles</a></li>
         </ul>
     </ResourcesSection>
 

package/src/components/ErrorPage/tests/ErrorPage.a11y.spec.ts

@@ -18,4 +18,21 @@ describe('ErrorPage – accessibility (axe)', () => {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no obvious axe violations with #action slot', async () => {
+		const wrapper = mount(ErrorPage, {
+			attachTo: document.body,
+			props: { headingLevel: 1, hideBtn: true },
+			slots: {
+				action: '<button>Retour à l\'accueil</button>',
+			},
+		})
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'ErrorPage – action slot', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
 })

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { shallowMount } from '@vue/test-utils'
+import { mount, shallowMount } from '@vue/test-utils'
 import ErrorPage from '../ErrorPage.vue'
 
 describe('ErrorPage', () => {
@@ -8,4 +8,24 @@ describe('ErrorPage', () => {
 
 		expect(wrapper.html()).toMatchSnapshot()
 	})
+
+	it('renders #action slot content', () => {
+		const wrapper = mount(ErrorPage, {
+			slots: {
+				action: '<button>Retour à l\'accueil</button>',
+			},
+		})
+
+		expect(wrapper.html()).toContain('Retour à l\'accueil')
+	})
+
+	it('renders #additional-content slot content', () => {
+		const wrapper = mount(ErrorPage, {
+			slots: {
+				'additional-content': '<p>Contenu additionnel</p>',
+			},
+		})
+
+		expect(wrapper.html()).toContain('Contenu additionnel')
+	})
 })

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

@@ -5,6 +5,7 @@ exports[`ErrorPage > renders correctly 1`] = `
   btnlink="/"
   code="500"
   codeerrortext="Code d'erreur : "
+  headinglevel="1"
   hidebtn="false"
   message="Une erreur est survenue de notre côté, veuillez réessayer plus tard."
   pagetitle="Une erreur est survenue"

package/src/components/ExternalLinks/tests/ExternalLinks.a11y.spec.ts

@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import ExternalLinks from '../ExternalLinks.vue'
+
+describe('ExternalLinks – accessibility (axe)', () => {
+	it('has no obvious axe violations', async () => {
+		const wrapper = mount(ExternalLinks, {
+			props: {
+				items: [
+					{ text: 'ameli.fr', href: 'https://ameli.fr' },
+					{ text: 'Legifrance', href: 'https://legifrance.gouv.fr' },
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'ExternalLinks – default state')
+	})
+})

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

@@ -7,6 +7,7 @@ exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
     aria-expanded="true"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -94,7 +95,7 @@ exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
       css="true"
       name="fade-transition"
       persisted="true"
-      target="<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 sy-external-links-btn" style="background-color: #0c419a; 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-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><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 sy-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><!----><!----></button>"
+      target="<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 sy-external-links-btn" style="background-color: #0c419a; 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="sy-external-links-menu-v-0" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><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 sy-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><!----><!----></button>"
     >
       <div
         class="v-overlay__content"
@@ -304,6 +305,7 @@ exports[`ExternalLinks > renders correctly 1`] = `
   <v-menu-stub
     activatorprops="[object Object]"
     attach="true"
+    capturefocus="true"
     class="
       sy-external-links
       sy-external-links--left
@@ -325,10 +327,13 @@ exports[`ExternalLinks > renders correctly 1`] = `
     openonhover="false"
     origin="auto"
     persistent="false"
+    retainfocus="false"
     scrim="false"
     scrollstrategy="reposition"
+    sticktotarget="false"
     submenu="false"
     transition="fade-transition"
+    viewportmargin="12"
     zindex="4"
   ></v-menu-stub>
 </div>
@@ -341,6 +346,7 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
     aria-expanded="true"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -428,7 +434,7 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
       css="true"
       name="fade-transition"
       persisted="true"
-      target="<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 sy-external-links-btn" style="background-color: #0c419a; 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-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><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 sy-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><!----><!----></button>"
+      target="<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 sy-external-links-btn" style="background-color: #0c419a; 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="sy-external-links-menu-v-0" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><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 sy-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><!----><!----></button>"
     >
       <div
         class="v-overlay__content"
@@ -639,6 +645,7 @@ exports[`ExternalLinks > slides on hover or focus 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -708,6 +715,7 @@ exports[`ExternalLinks > slides on hover or focus 2`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -777,6 +785,7 @@ exports[`ExternalLinks > slides on hover or focus 3`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -846,6 +855,7 @@ exports[`ExternalLinks > slides on hover or focus 4`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -915,6 +925,7 @@ exports[`ExternalLinks > slides on hover or focus 5`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3