@cnamts/synapse 0.0.13-alpha → 0.0.15-alpha

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

@@ -159,6 +159,14 @@ export const Legende: StoryObj = {
 					Problèmes relevés par Tanaguru
 				  </div>
 				</div>
+				  <div class="mt-4">
+					  <p>Rapport d’audit manuel : <a href="/audits/SkipLink.xlsx" style="color:#0C41BD;">Voir le
+						  rapport</a></p>
+					  <p style="color: grey; font-size: 14px">Correctifs associés (<a
+						  href="https://github.com/assurance-maladie-digital/design-system/issues/4012" target="_blank"
+						  style="color:#0C41BD;"
+					  >issue #4012</a>)</p>
+				</div>
 			  </div>
             `,
 		}

package/src/components/SkipLink/SkipLink.vue

@@ -39,7 +39,8 @@
 				if (fail) return
 				if (to.path === from.path) return
 				nextTick(() => {
-					skipLinkSpan.value?.focus()
+					const link = document.querySelector('a.sy-skip-link') as HTMLAnchorElement
+					if (link) link.focus()
 				})
 			})
 		}
@@ -47,25 +48,26 @@
 </script>
 
 <template>
-	<div class="vd-skip-link-container">
-		<span
-			ref="skipLinkSpan"
-			tabindex="-1"
-		/>
+	<nav
+		aria-label="Liens d'évitement"
+		class="sy-skip-link-container"
+	>
+		<div ref="skipLinkSpan" />
 
 		<a
+			ref="skipLink"
 			:href="target"
-			class="vd-skip-link text-primary d-block d-sr-only-focusable px-2"
+			class="sy-skip-link text-primary d-block d-sr-only-focusable px-2"
 		>
 			<slot>{{ label }}</slot>
 		</a>
-	</div>
+	</nav>
 </template>
 
 <style lang="scss" scoped>
 @use '/src/assets/tokens';
 
-.vd-skip-link {
+.sy-skip-link {
 	z-index: 150;
 	position: fixed;
 	top: 0;

package/src/components/SkipLink/tests/__snapshots__/skipLink.spec.ts.snap

@@ -1,3 +1,20 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`SkipLink > renders correctly 1`] = `"<div data-v-bf1925a1="" class="vd-skip-link-container"><span data-v-bf1925a1="" tabindex="-1"></span><a data-v-bf1925a1="" href="#main" class="vd-skip-link text-primary d-block d-sr-only-focusable px-2">Aller au contenu principal</a></div>"`;
+exports[`SkipLink > renders correctly 1`] = `
+<nav
+  aria-label="Liens d'évitement"
+  class="sy-skip-link-container"
+>
+  <div></div>
+  <a
+    class="
+      d-block
+      d-sr-only-focusable
+      px-2
+      sy-skip-link
+      text-primary
+    "
+    href="#main"
+  >Aller au contenu principal</a>
+</nav>
+`;

package/src/components/SkipLink/tests/skipLink.spec.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import SkipLink from '../SkipLink.vue'
+import { locales } from '../locales'
 
 // Create a mock router
 const router = createRouter({
@@ -28,19 +29,132 @@ describe('SkipLink', () => {
 	})
 
 	it('focuses the skip link on route change', async () => {
-		const wrapper = mount(SkipLink, {
+		// Monter le composant
+		mount(SkipLink, {
 			global: {
 				plugins: [router],
 			},
 		})
 
-		// Create a mock for the focus method
-		const spy = vi.spyOn(wrapper.vm.$refs.skipLinkSpan as HTMLLinkElement, 'focus')
+		// Espionner querySelector et focus
+		const linkElement = document.createElement('a')
+		const focusSpy = vi.spyOn(linkElement, 'focus')
+		vi.spyOn(document, 'querySelector').mockImplementation(() => linkElement)
 
-		// Trigger the route change
+		// Déclencher le changement de route
 		await router.push('/about')
-		await router.isReady() // Ensure the router is ready
+		await router.isReady()
+		await new Promise(resolve => setTimeout(resolve, 0))
+
+		expect(focusSpy).toHaveBeenCalled()
+	})
+
+	it('accepte des props personnalisées', () => {
+		const customLabel = 'Accéder au contenu'
+		const customTarget = '#content'
+
+		const wrapper = mount(SkipLink, {
+			props: {
+				label: customLabel,
+				target: customTarget,
+			},
+		})
+
+		const link = wrapper.find('a.sy-skip-link')
+		expect(link.text()).toBe(customLabel)
+		expect(link.attributes('href')).toBe(customTarget)
+	})
+
+	it('utilise les valeurs par défaut', () => {
+		const wrapper = mount(SkipLink)
+
+		const link = wrapper.find('a.sy-skip-link')
+		expect(link.text()).toBe(locales.label)
+		expect(link.attributes('href')).toBe('#main')
+	})
+
+	it('contient les attributs d\'accessibilité corrects', () => {
+		const wrapper = mount(SkipLink)
+
+		expect(wrapper.find('nav').attributes('aria-label')).toBe('Liens d\'évitement')
+		expect(wrapper.find('a.sy-skip-link').exists()).toBe(true)
+	})
+
+	it('ne déplace pas le focus si la navigation échoue', async () => {
+		// Mock du router avec un hook afterEach qui simule un échec
+		const mockRouter = {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			afterEach: (callback: any) => {
+				// Simuler un appel avec fail=true
+				callback(
+					{ path: '/new-path' },
+					{ path: '/' },
+					true, // fail=true
+				)
+			},
+		}
+
+		// Espionner querySelector et focus
+		const linkElement = document.createElement('a')
+		const focusSpy = vi.spyOn(linkElement, 'focus')
+		vi.spyOn(document, 'querySelector').mockImplementation(() => linkElement)
+
+		// Mock de getCurrentInstance pour injecter notre router
+		// eslint-disable-next-line @typescript-eslint/no-require-imports
+		vi.spyOn(require('vue'), 'getCurrentInstance').mockReturnValue({
+			appContext: {
+				app: {
+					config: {
+						globalProperties: {
+							$router: mockRouter,
+						},
+					},
+				},
+			},
+		})
+
+		mount(SkipLink)
+		await new Promise(resolve => setTimeout(resolve, 0))
+
+		expect(focusSpy).not.toHaveBeenCalled()
+	})
+
+	it('ne déplace pas le focus si le chemin reste identique', async () => {
+		// Mock du router avec un hook afterEach où to.path = from.path
+		const mockRouter = {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+			afterEach: (callback: any) => {
+				// Simuler un appel avec les mêmes chemins
+				callback(
+					{ path: '/same-path' },
+					{ path: '/same-path' },
+					false,
+				)
+			},
+		}
+
+		// Espionner querySelector et focus
+		const linkElement = document.createElement('a')
+		const focusSpy = vi.spyOn(linkElement, 'focus')
+		vi.spyOn(document, 'querySelector').mockImplementation(() => linkElement)
+
+		// Mock de getCurrentInstance
+		/* eslint-disable */
+		vi.spyOn(require('vue'), 'getCurrentInstance').mockReturnValue({
+			appContext: {
+				app: {
+					config: {
+						globalProperties: {
+							$router: mockRouter,
+						},
+					},
+				},
+			},
+		})
+
+		mount(SkipLink)
+		await new Promise(resolve => setTimeout(resolve, 0))
 
-		expect(spy).toHaveBeenCalled()
+		expect(focusSpy).not.toHaveBeenCalled()
 	})
 })

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

@@ -1,24 +1,118 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SocialMediaLinks > renders correctly with default props 1`] = `
-"<div data-v-9d3df26f="" class="d-flex flex-column"><span data-v-9d3df26f="" class="vd-social-media-links-label text-subtitle-2 text--primary">Suivez-nous :</span>
-  <ul data-v-9d3df26f="" class="vd-social-media-links-content d-flex max-width-none"></ul>
-</div>"
+<div class="
+  d-flex
+  flex-column
+">
+  <span class="
+    text--primary
+    text-subtitle-2
+    vd-social-media-links-label
+  ">
+    Suivez-nous :
+  </span>
+  <ul class="
+    d-flex
+    max-width-none
+    vd-social-media-links-content
+  "></ul>
+</div>
 `;
 
 exports[`SocialMediaLinks > renders correctly with provided links 1`] = `
-"<div data-v-9d3df26f="" class="d-flex flex-column"><span data-v-9d3df26f="" class="vd-social-media-links-label text-subtitle-2 text--primary">Suivez-nous :</span>
-  <ul data-v-9d3df26f="" class="vd-social-media-links-content d-flex max-width-none">
-    <li data-v-9d3df26f=""><a data-v-9d3df26f="" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text" href="https://twitter.com" id="social-btn-0" target="_blank" rel="noopener noreferrer" aria-label="Lien vers Twitter"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><i data-v-9d3df26f="" class="mdi-twitter mdi v-icon notranslate v-theme--light vd-social-media-links-icon" style="font-size: 30px; height: 30px; width: 30px;" aria-hidden="true"></i></span>
-        <!---->
-        <!---->
-      </a></li>
-    <li data-v-9d3df26f=""><a data-v-9d3df26f="" class="v-btn v-btn--icon v-theme--light v-btn--density-default v-btn--size-default v-btn--variant-text" href="https://facebook.com" id="social-btn-1" target="_blank" rel="noopener noreferrer" aria-label="Lien vers Facebook"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><i data-v-9d3df26f="" class="mdi-facebook mdi v-icon notranslate v-theme--light vd-social-media-links-icon" style="font-size: 30px; height: 30px; width: 30px;" aria-hidden="true"></i></span>
-        <!---->
-        <!---->
-      </a></li>
+<div class="
+  d-flex
+  flex-column
+">
+  <span class="
+    text--primary
+    text-subtitle-2
+    vd-social-media-links-label
+  ">
+    Suivez-nous :
+  </span>
+  <ul class="
+    d-flex
+    max-width-none
+    vd-social-media-links-content
+  ">
+    <li>
+      <a
+        aria-label="Lien vers Twitter"
+        class="
+          v-btn
+          v-btn--density-default
+          v-btn--icon
+          v-btn--size-default
+          v-btn--variant-text
+          v-theme--light
+        "
+        href="https://twitter.com"
+        id="social-btn-0"
+        rel="noopener noreferrer"
+        target="_blank"
+      ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        
+      <!----><span
+        class="v-btn__content"
+        data-no-activator=""
+      ><i
+        aria-hidden="true"
+        class="
+          mdi
+          mdi-twitter
+          notranslate
+          v-icon
+          v-theme--light
+          vd-social-media-links-icon
+        "
+        style="font-size: 30px; height: 30px; width: 30px;"
+      ></i></span>
+        
+      <!---->
+        
+      <!---->
+      </a>
+    </li>
+    <li>
+      <a
+        aria-label="Lien vers Facebook"
+        class="
+          v-btn
+          v-btn--density-default
+          v-btn--icon
+          v-btn--size-default
+          v-btn--variant-text
+          v-theme--light
+        "
+        href="https://facebook.com"
+        id="social-btn-1"
+        rel="noopener noreferrer"
+        target="_blank"
+      ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+        
+      <!----><span
+        class="v-btn__content"
+        data-no-activator=""
+      ><i
+        aria-hidden="true"
+        class="
+          mdi
+          mdi-facebook
+          notranslate
+          v-icon
+          v-theme--light
+          vd-social-media-links-icon
+        "
+        style="font-size: 30px; height: 30px; width: 30px;"
+      ></i></span>
+        
+      <!---->
+        
+      <!---->
+      </a>
+    </li>
   </ul>
-</div>"
+</div>
 `;

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

@@ -80,7 +80,7 @@ const meta = {
 					location: 'end center',
 					offset: 16,
 					zIndex: 8,
-					contentClass: 'vd-copy-tooltip-menu text-white text-body-2 ml-2',
+					contentClass: 'sy-copy-tooltip-menu text-white text-body-2 ml-2',
 				},
 				btn: {
 					icon: true,

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

@@ -111,7 +111,7 @@ describe('SubHeader', () => {
 			},
 		})
 
-		const btn = wrapper.find('.vd-data-list-item-action-btn')
+		const btn = wrapper.find('.sy-data-list-item-action-btn')
 		await btn.trigger('click')
 
 		await wrapper.vm.$nextTick()

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

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