@cnamts/synapse 1.0.15 → 1.0.17

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

@@ -0,0 +1,26 @@
+// @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'
+import { filePromise } from './data/filePromise'
+
+// Scénario d’accessibilité : bouton de téléchargement prêt à l’emploi
+// avec icône, texte par défaut et état initial idle.
+
+describe('DownloadBtn – accessibility (axe)', () => {
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(DownloadBtn, {
+			props: {
+				filePromise,
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DownloadBtn – default state', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -131,3 +131,63 @@ export const WithLink: Story = {
 		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
 	],
 }
+
+export const CustomIllustration: Story = {
+	args: {
+		...Default.args,
+		btnHref: '/',
+		btnText: 'Retour à l\'accueil',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<div style="padding: 20px; background: rgb(231, 236, 245)">
+						<ErrorPage
+							page-title="une erreur est survenue"
+							code="500"
+							message="Une erreur est survenue de notre côté, veuillez réessayer plus tard."
+							btn-href="/"
+							btn-text="Retour à l'accueil"
+						>
+							<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>
+				`,
+			},
+		],
+	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
+	render: args => ({
+		components: { ErrorPage },
+		setup() {
+			return { args }
+		},
+		template: `
+			<ErrorPage v-bind="args">
+				<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>
+		`,
+	}),
+}

package/src/components/ErrorPage/ErrorPage.vue

@@ -114,7 +114,7 @@
 					<slot name="action">
 						<VBtn
 							v-if="!hideBtn && btnText && (btnLink || btnHref)"
-							:to="btnLink"
+							:to="btnHref ? undefined : btnLink"
 							:href="btnHref"
 							color="primary"
 							class="mt-6"

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

@@ -0,0 +1,29 @@
+// @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 ErrorPage from '../ErrorPage.vue'
+
+// Scénario d’accessibilité : page d’erreur avec titre, message, code
+// et bouton de retour vers la page d’accueil.
+
+describe('ErrorPage – accessibility (axe)', () => {
+	it('has no obvious axe violations with title, message and action button', async () => {
+		const wrapper = mount(ErrorPage, {
+			props: {
+				pageTitle: 'Une erreur est survenue',
+				message: 'Un problème technique est survenu. Merci de réessayer plus tard.',
+				code: '500',
+				btnText: 'Retour à l\'accueil',
+				btnHref: 'https://www.ameli.fr',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'ErrorPage – default error page', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -30,4 +30,21 @@ describe('ErrorPage', () => {
 		expect(wrapper.find('a').exists()).toBe(true)
 		expect(wrapper.html()).toMatchSnapshot()
 	})
+
+	it('uses href without router navigation when only btnHref is provided', () => {
+		const wrapper = mount(ErrorPage, {
+			props: {
+				code: '401',
+				pageTitle: 'Auth error',
+				message: 'You are not authorized',
+				btnText: 'Logout',
+				btnHref: 'https://google.com',
+			},
+		})
+
+		const link = wrapper.find('a')
+		expect(link.exists()).toBe(true)
+		expect(link.attributes('href')).toBe('https://google.com')
+		expect(link.attributes('to')).toBeUndefined()
+	})
 })

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

@@ -175,6 +175,9 @@ export const Default: Story = {
 		],
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -230,6 +233,9 @@ export const NudgeTop: Story = {
 		],
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -286,6 +292,9 @@ export const NudgeBottom: Story = {
 		],
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -328,6 +337,9 @@ export const NoData: Story = {
 		items: [],
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -368,6 +380,9 @@ export const BtnText: Story = {
 		btnText: 'Afficher les liens externes',
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -430,6 +445,9 @@ export const VuetifyOptions: Story = {
 		],
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -508,6 +526,9 @@ export const CustomLinksIcon: Story = {
 		}
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',

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

@@ -0,0 +1,39 @@
+// @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'
+
+const items = [
+	{ text: 'ameli.fr', href: 'https://www.ameli.fr' },
+	{ text: 'Service-public.fr', href: 'https://www.service-public.fr' },
+]
+
+// Scénario d’accessibilité : bouton externe fixé en bas à droite,
+// menu ouvert avec une liste de liens.
+
+describe('ExternalLinks – accessibility (axe)', () => {
+	it('has no obvious axe violations with menu open and items', async () => {
+		const wrapper = mount(ExternalLinks, {
+			props: {
+				position: 'bottom right',
+				items,
+				fixed: true,
+			},
+			attachTo: document.body,
+		})
+
+		const button = wrapper.find('button')
+		await button.trigger('click')
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(document.body)
+		assertNoA11yViolations(results, 'ExternalLinks – menu open with items', {
+			ignoreRules: ['region'],
+		})
+
+		wrapper.unmount()
+	})
+})

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

@@ -327,7 +327,6 @@ exports[`ExternalLinks > renders correctly 1`] = `
     persistent="false"
     scrim="false"
     scrollstrategy="reposition"
-    sticktotarget="false"
     submenu="false"
     transition="fade-transition"
     zindex="4"

package/src/components/FileList/FileList.stories.ts

@@ -262,6 +262,9 @@ export const States: Story = {
 		onPreview: fn(),
 	},
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',

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

@@ -0,0 +1,41 @@
+// @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 FileList from '../FileList.vue'
+
+// Scénario d’accessibilité : liste de fichiers avec différents états
+// (initial, succès, erreur) et actions disponibles.
+
+describe('FileList – accessibility (axe)', () => {
+	it('has no obvious axe violations with multiple upload items', async () => {
+		const wrapper = mount(FileList, {
+			props: {
+				uploadList: [
+					{
+						id: 'residence',
+						title: 'Attestation de domicile',
+						state: 'initial',
+						optional: true,
+						showUploadBtn: true,
+					},
+					{
+						id: 'identityCard',
+						title: 'Carte d\'identité',
+						state: 'success',
+						showPreviewBtn: true,
+						showDeleteBtn: true,
+						fileName: 'carte-identite.pdf',
+					},
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'FileList – default items', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/FilePreview/FilePreview.stories.ts

@@ -87,6 +87,9 @@ export const Default: Story = {
 		},
 	}),
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',

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

@@ -0,0 +1,47 @@
+// @vitest-environment jsdom
+
+import { beforeAll, afterAll, describe, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import FilePreview from '../FilePreview.vue'
+
+let originalCreateObjectURL: typeof URL.createObjectURL
+let originalRevokeObjectURL: typeof URL.revokeObjectURL
+
+beforeAll(() => {
+	originalCreateObjectURL = URL.createObjectURL
+	originalRevokeObjectURL = URL.revokeObjectURL
+	// Éviter les erreurs jsdom liées à createObjectURL/revokeObjectURL
+	URL.createObjectURL = vi.fn(() => 'blob:mock')
+	URL.revokeObjectURL = vi.fn()
+})
+
+afterAll(() => {
+	URL.createObjectURL = originalCreateObjectURL
+	URL.revokeObjectURL = originalRevokeObjectURL
+})
+
+// Scénario d’accessibilité : aperçu d’une image avec texte alternatif.
+
+describe('FilePreview – accessibility (axe)', () => {
+	it('has no obvious axe violations for image preview with alt text', async () => {
+		const file = new File([''], 'photo.png', { type: 'image/png' })
+
+		const wrapper = mount(FilePreview, {
+			props: {
+				file,
+				options: {
+					image: {
+						alt: 'Aperçu du fichier image téléversé',
+					},
+				},
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'FilePreview – image preview', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/FileUpload/tests/FileUpload.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 FileUpload from '../FileUpload.vue'
+
+// Scénario d’accessibilité : zone de dépôt de fichier simple, sans fichier sélectionné,
+// avec les textes d’aide par défaut.
+
+describe('FileUpload – accessibility (axe)', () => {
+	it('has no obvious axe violations in default single-file state', async () => {
+		const wrapper = mount(FileUpload, {
+			props: {
+				modelValue: [],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'FileUpload – default state', {
+			ignoreRules: ['region'],
+		})
+	})
+})

package/src/components/FilterInline/FilterInline.stories.ts

@@ -207,6 +207,9 @@ export const Default: Story = {
 		`,
 	}),
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -367,6 +370,9 @@ export const ChipFormat: Story = {
 		`,
 	}),
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -593,6 +599,9 @@ export const FilterCombination: Story = {
 		`,
 	}),
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		layout: 'fullscreen',
 		sourceCode: [
 			{
@@ -826,6 +835,9 @@ export const Boolean: Story = {
 		`,
 	}),
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -976,6 +988,9 @@ export const ManyFields: Story = {
 		`,
 	}),
 	parameters: {
+		a11y: {
+			disable: true,
+		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/FilterInline/FilterInline.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 	import useFilterable, { type FilterProp } from '@/composables/useFilterable/useFilterable'
-	import { mdiChevronDown } from '@mdi/js'
+	import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
 	import { toRef } from 'vue'
 	import ChipList from '../ChipList/ChipList.vue'
 	import { locales as defaultLocales } from './locales'
@@ -41,13 +41,12 @@
 			nudge-bottom="10px"
 			z-index="1000"
 		>
-			<template #activator="{ props: menuProps }">
+			<template #activator="{ props: menuProps, isActive }">
 				<VBtn
 					v-bind="menuProps"
 					:class="`sy-filter-${filter.name}`"
 					:variant="getFilterCount(filter) ? undefined : 'outlined'"
 					color="secondary"
-					rounded
 					class="ma-2"
 				>
 					<VBadge
@@ -64,7 +63,7 @@
 						size="small"
 						class="ml-1"
 					>
-						{{ mdiChevronDown }}
+						{{ isActive ? mdiChevronUp : mdiChevronDown }}
 					</VIcon>
 				</VBtn>
 			</template>
@@ -105,4 +104,9 @@
 	color: tokens.$cyan-darken-40 !important;
 	background-color: white;
 }
+
+:deep(.v-btn[class*='sy-filter-']) {
+	border-radius: 64px !important;
+}
+
 </style>

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

@@ -0,0 +1,36 @@
+// @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 FilterInline from '../FilterInline.vue'
+
+// Scénario d’accessibilité : filtres en ligne avec plusieurs filtres actifs
+// (boutons avec badges et liste de chips), menu fermé.
+
+describe('FilterInline – accessibility (axe)', () => {
+	it('has no obvious axe violations with multiple active filters', async () => {
+		const wrapper = mount(FilterInline, {
+			props: {
+				modelValue: [
+					{
+						name: 'name',
+						label: 'Nom',
+						value: 'John Doe',
+					},
+					{
+						name: 'profession',
+						label: 'Profession',
+						value: ['Infirmier', 'Pharmacien'],
+					},
+				],
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'FilterInline – multiple active filters', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -19,7 +19,6 @@ exports[`FilterInline > renders correctly with an active filter 1`] = `
       v-btn
       v-btn--density-default
       v-btn--elevated
-      v-btn--rounded
       v-btn--size-default
       v-btn--variant-elevated
       v-theme--light
@@ -101,7 +100,6 @@ exports[`FilterInline > renders correctly with multiple active filters 1`] = `
       v-btn
       v-btn--density-default
       v-btn--elevated
-      v-btn--rounded
       v-btn--size-default
       v-btn--variant-elevated
       v-theme--light
@@ -172,7 +170,6 @@ exports[`FilterInline > renders correctly with multiple active filters 1`] = `
       v-btn
       v-btn--density-default
       v-btn--elevated
-      v-btn--rounded
       v-btn--size-default
       v-btn--variant-elevated
       v-theme--light

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

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