@cnamts/synapse 0.0.14-alpha → 0.0.16-alpha

package/src/components/RatingPicker/RatingPicker.stories.ts

@@ -331,7 +331,7 @@ export const ReadOnly: Story = {
 		v-model="ratingEmotion"
 		label="Êtes-vous satisfait de ce service ?"
 		type="emotion"
-		read-only
+		readonly
 	/>
 </template>
         `,

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,17 +1,20 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SkipLink > renders correctly 1`] = `
-<div class="vd-skip-link-container">
-  <span tabindex="-1"></span>
+<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
-      vd-skip-link
     "
     href="#main"
   >Aller au contenu principal</a>
-</div>
+</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/SyAlert/Accessibilite.stories.ts

@@ -159,6 +159,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/SyAlert.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/4010" target="_blank" style="color:#0C41BD;">issue #4010</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/SyAlert/SyAlert.mdx

@@ -25,12 +25,8 @@ const showAlert = ref(true);
 </script>
 
 <template>
-  <div class="d-flex flex-wrap align-center justify-center">
-    <SyAlert v-model="showAlert" type="warning" variant="tonal" :closable="true">
-      <template #default>This is a warning alert</template>
-    </SyAlert>
-
-    <VBtn v-if="!showAlert" color="primary" @click="showAlert = true" class="ma-6">Réinitialiser</VBtn>
-  </div>
+  <SyAlert v-model="showAlert" type="warning" variant="tonal" :closable="true">
+    Ceci est une alerte de type "warning".
+  </SyAlert>
 </template>
 `} />

package/src/components/SyAlert/SyAlert.stories.ts

@@ -13,6 +13,13 @@ const meta = {
 		modelValue: true,
 	},
 	argTypes: {
+		modelValue: {
+			control: { type: 'boolean' },
+			description: 'Contrôle l\'affichage de l\'alerte',
+			table: {
+				category: 'props',
+			},
+		},
 		type: {
 			options: ['info', 'warning', 'success', 'error'],
 			control: { type: 'select' },
@@ -37,8 +44,8 @@ export const Default: Story = {
 				name: 'Template',
 				code: `<template>
 	<div class="d-flex flex-wrap align-center justify-center">
-		<SyAlert v-model="showAlert" type="success" variant="tonal" :closable="true">
-			<template #default>This is a success alert</template>
+		<SyAlert v-model="showAlert" type="success" variant="tonal" :closable="true" style="width: 100%">
+			<template #default>Contenu de l'alerte</template>
 		</SyAlert>
 
 		<VBtn v-if="!showAlert" color="primary" @click="showAlert = true">
@@ -65,7 +72,7 @@ export const Default: Story = {
 		type: 'success',
 		closable: true,
 		variant: 'tonal',
-		default: 'Alert content',
+		default: 'Contenu de l\'alerte',
 	},
 	render: (args) => {
 		return {
@@ -75,7 +82,7 @@ export const Default: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center justify-center">
-					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
+					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable" style="width: 100%">
 						<template #default>{{ args.default }}</template>
 					</SyAlert>
 					<VBtn v-if="!args.modelValue" color="primary" @click="args.modelValue = true" class="ma-6">
@@ -94,8 +101,8 @@ export const Outlined: Story = {
 				name: 'Template',
 				code: `<template>
 	<div class="d-flex flex-wrap align-center justify-center">
-		<SyAlert v-model="showAlert" type="warning" variant="outlined" :closable="true">
-			<template #default>This is a warning alert</template>
+		<SyAlert v-model="showAlert" type="warning" variant="outlined" :closable="true" style="width: 100%">
+			<template #default>Contenu de l'alerte</template>
 		</SyAlert>
 
 		<VBtn v-if="!showAlert" color="primary" @click="showAlert = true">
@@ -121,7 +128,7 @@ export const Outlined: Story = {
 		type: 'warning',
 		closable: true,
 		variant: 'outlined',
-		default: 'Alert content',
+		default: 'Contenu de l\'alerte',
 	},
 	render: (args) => {
 		return {
@@ -131,7 +138,7 @@ export const Outlined: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center justify-center">
-					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
+					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable" style="width: 100%">
 						<template #default>{{ args.default }}</template>
 					</SyAlert>
 					<VBtn v-if="!args.modelValue" color="primary" @click="args.modelValue = true" class="ma-6">
@@ -150,8 +157,8 @@ export const SlotIcon: Story = {
 				name: 'Template',
 				code: `<template>
 	<div class="d-flex flex-wrap align-center justify-center">
-		<SyAlert v-model="showAlert" type="success" variant="tonal" :closable="true">
-			<template #default>This is a success alert</template>
+		<SyAlert v-model="showAlert" type="success" variant="tonal" :closable="true" style="width: 100%">
+			<template #default>Contenu de l'alerte</template>
 			<template #icon>{{ icon }}</template>
 		</SyAlert>
 
@@ -180,7 +187,7 @@ export const SlotIcon: Story = {
 		type: 'success',
 		closable: true,
 		variant: 'tonal',
-		default: 'Alert content',
+		default: 'Contenu de l\'alerte',
 		icon: 'M21.1,12.5L22.5,13.91L15.97,20.5L12.5,17L13.9,15.59L15.97,17.67L21.1,12.5M10,17L13,20H3V18C3,15.79 6.58,14 11,14L12.89,14.11L10,17M11,4A4,4 0 0,1 15,8A4,4 0 0,1 11,12A4,4 0 0,1 7,8A4,4 0 0,1 11,4Z',
 	},
 	render: (args) => {
@@ -191,7 +198,7 @@ export const SlotIcon: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center justify-center">
-					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable">
+					<SyAlert v-model="args.modelValue" :type="args.type" :variant="args.variant" :closable="args.closable" style="width: 100%">
 						<template #default>{{ args.default }}</template>
 						<template #icon>{{ args.icon }}</template>
 					</SyAlert>

package/src/components/SyAlert/SyAlert.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed } from 'vue'
+	import { computed, ref, onMounted, useAttrs } from 'vue'
 	import { locales } from './locales'
 	import {
 		mdiAlertOutline,
@@ -8,6 +8,7 @@
 		mdiInformationOutline,
 		mdiClose,
 	} from '@mdi/js'
+	import type { VIcon } from 'vuetify/components'
 
 	const show = defineModel<boolean>({
 		default: true,
@@ -23,6 +24,8 @@
 		variant: 'tonal',
 	})
 
+	const attrs = useAttrs()
+
 	const prependIcon = computed(() => {
 		return {
 			info: mdiInformationOutline,
@@ -43,58 +46,71 @@
 		prependIcon,
 		dismissAlert,
 	})
+
+	const alertIcon = ref<typeof VIcon | null>(null)
+	onMounted(() => {
+		alertIcon.value?.$el?.querySelector('svg')?.setAttribute('role', 'presentation')
+	})
 </script>
 
 <template>
-	<VAlert
-		v-model="show"
-		:type="props.type"
-		:closable="props.closable"
-		:variant="props.variant"
-		:class="`alert alert--${props.type}`"
-		:color="props.type"
-		:border="props.variant === 'tonal' ? 'start' : false"
+	<div
+		class="sy-alert"
+		role="alert"
 	>
-		<template #prepend>
-			<VIcon
-				class="alert-icon"
-				size="1.5rem"
-			>
-				<slot name="icon">
-					{{ prependIcon }}
-				</slot>
-			</VIcon>
-		</template>
-
-		<template #default>
-			<slot />
-		</template>
-
-		<template
-			v-if="props.closable"
-			#close
+		<VAlert
+			v-model="show"
+			v-bind="attrs"
+			:type="props.type"
+			:closable="props.closable"
+			:variant="props.variant"
+			:class="`alert alert--${props.type}`"
+			:color="props.type"
+			:border="props.variant === 'tonal' ? 'start' : false"
 		>
-			<VBtn
-				:color="props.variant === 'outlined' ? undefined : 'primary'"
-				:ripple="false"
-				variant="text"
-				width="auto"
-				height="100%"
-				class="alert-close-btn"
-				@click="dismissAlert"
-			>
+			<template #prepend>
 				<VIcon
-					size="small"
+					ref="alertIcon"
+					class="alert-icon"
+					size="1.5rem"
+					role="presentation"
 				>
-					{{ mdiClose }}
+					<slot name="icon">
+						{{ prependIcon }}
+					</slot>
 				</VIcon>
+			</template>
+
+			<template #default>
+				<slot />
+			</template>
 
-				<span>
-					{{ locales.close }}
-				</span>
-			</VBtn>
-		</template>
-	</VAlert>
+			<template
+				v-if="props.closable"
+				#close
+			>
+				<VBtn
+					:color="props.variant === 'outlined' ? undefined : 'primary'"
+					:ripple="false"
+					variant="text"
+					width="auto"
+					height="100%"
+					class="alert-close-btn"
+					@click="dismissAlert"
+				>
+					<VIcon
+						size="small"
+					>
+						{{ mdiClose }}
+					</VIcon>
+
+					<span>
+						{{ locales.close }}
+					</span>
+				</VBtn>
+			</template>
+		</VAlert>
+	</div>
 </template>
 
 <style lang="scss" scoped>
@@ -128,17 +144,24 @@
 .alert-close-btn {
 	cursor: pointer;
 	line-height: 0;
-
-	.v-btn__overlay {
-		display: none;
-	}
-}
-
-.v-btn {
 	text-transform: none;
 	font-weight: bold;
 	font-size: 0.75rem;
 	letter-spacing: normal;
+
+	&:focus-visible {
+		outline: solid 2px black !important;
+		outline-color: var(--v-primary-base) !important;
+		outline-offset: 2px !important;
+
+		&::after {
+			visibility: hidden;
+		}
+	}
+
+	.v-btn__overlay {
+		display: none;
+	}
 }
 
 @media screen and (width <= 440px) {
@@ -254,4 +277,18 @@
 		)
 	);
 }
+
+.v-alert.v-theme--dark {
+	&.v-alert--variant-outlined {
+		background-color: tokens.$white-base !important;
+	}
+
+	.alert-close-btn {
+		color: black !important;
+
+		&:focus-visible {
+			outline-color: black !important;
+		}
+	}
+}
 </style>

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

@@ -46,7 +46,16 @@ describe('Alert', () => {
 			modelValue: false,
 		})
 
-		expect(wrapper.html()).toBeFalsy()
+		expect(wrapper.html()).toMatchInlineSnapshot(`
+			<div
+			  class="sy-alert"
+			  message="message"
+			  role="alert"
+			  title="title"
+			>
+			  <!---->
+			</div>
+		`)
 
 		await wrapper.setProps({
 			modelValue: true,
@@ -79,7 +88,16 @@ describe('Alert', () => {
 
 		await closeBtn.element.click()
 
-		expect(wrapper.html()).toBeFalsy()
+		expect(wrapper.html()).toMatchInlineSnapshot(`
+			<div
+			  class="sy-alert"
+			  message="message"
+			  role="alert"
+			  title="title"
+			>
+			  <!---->
+			</div>
+		`)
 		expect(wrapper.emitted('update:modelValue')![0]![0]).toBe(false)
 	})