@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/MaintenancePage/locales.ts

@@ -1,5 +1,26 @@
+import imgUrlAp from './assets/maintenance-ap.svg'
+import imgUrlCnam from './assets/maintenance.svg'
+
 export const locales = {
-	pageTitle: 'Maintenance en cours',
-	message:
-		'L’application n’est pas disponible pour le moment, veuillez nous excuser pour la gêne occasionnée.',
+	default: {
+		pageTitle: 'Maintenance en cours',
+		message:
+      'L’application n’est pas disponible pour le moment, veuillez nous excuser pour la gêne occasionnée.',
+		src: imgUrlCnam,
+		code: '',
+	},
+	cnam: {
+		pageTitle: 'Maintenance en cours',
+		message:
+      'L’application n’est pas disponible pour le moment, veuillez nous excuser pour la gêne occasionnée.',
+		src: imgUrlCnam,
+		code: '',
+	},
+	ap: {
+		pageTitle: 'Pour votre confort, nous améliorons ce service !',
+		message:
+      'Nous mettons en œuvre les mesures nécessaires pour que vous puissiez le retrouver rapidement. Veuillez nous excuser pour la gêne occasionnée.',
+		src: imgUrlAp,
+		code: '503',
+	},
 }

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

@@ -1,13 +1,31 @@
 // @vitest-environment jsdom
 
-import { describe, it } from 'vitest'
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import StatusPage from '../../StatusPage/StatusPage.vue'
+
+const themeLocales = {
+	pageTitle: 'Maintenance en cours',
+	message: 'L\'application n\'est pas disponible pour le moment.',
+	code: '503',
+	src: '/img/maintenance.svg',
+}
+
+vi.mock('@/utils/theme', () => ({
+	useThemeLocales: () => ({
+		themeLocales: ref(themeLocales),
+	}),
+}))
+
+// Import après les mocks
 import MaintenancePage from '../MaintenancePage.vue'
 
-// Scénario d’accessibilité : page de maintenance basée sur ErrorPage,
-// sans bouton d’action, avec illustration décorative masquée.
+afterEach(() => {
+	vi.clearAllMocks()
+})
 
 describe('MaintenancePage – accessibility (axe)', () => {
 	it('has no obvious axe violations in default state', async () => {
@@ -15,7 +33,62 @@ describe('MaintenancePage – accessibility (axe)', () => {
 
 		const results = await axe(wrapper.element as HTMLElement)
 		assertNoA11yViolations(results, 'MaintenancePage – default state', {
+			// Ignoré car la page repose sur la structure de StatusPage/PageContainer
 			ignoreRules: ['region'],
 		})
 	})
 })
+
+describe('MaintenancePage – StatusPage wiring', () => {
+	it('passes expected props to StatusPage and hides the action button', () => {
+		const wrapper = mount(MaintenancePage)
+		const statusPage = wrapper.findComponent(StatusPage)
+
+		expect(statusPage.exists()).toBe(true)
+		expect(statusPage.props()).toMatchObject({
+			pageTitle: themeLocales.pageTitle,
+			message: themeLocales.message,
+			code: themeLocales.code,
+			hideBtn: true,
+		})
+	})
+
+	it('renders a single main heading with the page title', () => {
+		const wrapper = mount(MaintenancePage)
+		const headings = wrapper.findAll('h1')
+
+		expect(headings).toHaveLength(1)
+		expect(headings[0]!.text()).toContain(themeLocales.pageTitle)
+	})
+
+	it('displays the status code block when provided', () => {
+		const wrapper = mount(MaintenancePage)
+		const code = wrapper.find('.sy-code')
+
+		expect(code.exists()).toBe(true)
+		expect(code.text()).toContain(themeLocales.code)
+	})
+})
+
+describe('MaintenancePage – illustration', () => {
+	it('renders decorative illustration with proper ARIA when provided by theme', () => {
+		const wrapper = mount(MaintenancePage)
+		const img = wrapper.find('img')
+
+		expect(img.exists()).toBe(true)
+		expect(img.attributes('aria-hidden')).toBe('true')
+		expect(img.attributes('alt')).toBe('')
+	})
+
+	it('uses custom illustration slot instead of default decorative image', () => {
+		const wrapper = mount(MaintenancePage, {
+			slots: {
+				illustration: '<img class="custom-illustration" src="/custom.svg" alt="Illustration personnalisée" />',
+			},
+		})
+
+		const customImg = wrapper.find('.custom-illustration')
+		expect(customImg.exists()).toBe(true)
+		expect(wrapper.find('img[aria-hidden="true"]').exists()).toBe(false)
+	})
+})

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

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-
-import MaintenancePage from '../'
+import StatusPage from '../../StatusPage/StatusPage.vue'
+import MaintenancePage from '../MaintenancePage.vue'
 
 describe('MaintenancePage', () => {
 	it('renders correctly', () => {
@@ -9,4 +9,62 @@ describe('MaintenancePage', () => {
 
 		expect(wrapper.html()).toMatchSnapshot()
 	})
+
+	it('renders StatusPage component', () => {
+		const wrapper = shallowMount(MaintenancePage)
+
+		expect(wrapper.findComponent(StatusPage).exists()).toBe(true)
+	})
+
+	it('passes correct props to StatusPage', () => {
+		const wrapper = shallowMount(MaintenancePage)
+		const statusPage = wrapper.findComponent(StatusPage)
+
+		expect(statusPage.props('hideBtn')).toBe(true)
+		expect(statusPage.props('pageTitle')).toBeDefined()
+		expect(statusPage.props('message')).toBeDefined()
+		expect(statusPage.props('code')).toBeDefined()
+	})
+
+	it('passes a uniqueId prop to StatusPage', () => {
+		const wrapper = shallowMount(MaintenancePage)
+		const statusPage = wrapper.findComponent(StatusPage)
+
+		expect(statusPage.props('uniqueId')).toBeDefined()
+	})
+
+	it('passes a custom uniqueId prop to StatusPage', () => {
+		const wrapper = shallowMount(MaintenancePage, {
+			props: {
+				uniqueId: 'custom-id',
+			},
+		})
+		const statusPage = wrapper.findComponent(StatusPage)
+
+		expect(statusPage.props('uniqueId')).toBe('custom-id')
+	})
+
+	it('renders default illustration when no slot is provided', () => {
+		const wrapper = shallowMount(MaintenancePage)
+
+		// Vérifie que le composant peut être rendu sans erreur
+		expect(wrapper.vm).toBeDefined()
+	})
+
+	it('renders img with correct attributes', () => {
+		const wrapper = shallowMount(MaintenancePage)
+		const img = wrapper.find('img')
+
+		if (img.exists()) {
+			expect(img.attributes('alt')).toBe('')
+			expect(img.attributes('aria-hidden')).toBe('true')
+		}
+	})
+
+	it('applies correct styles to img', () => {
+		const wrapper = shallowMount(MaintenancePage)
+		const style = wrapper.vm.$el.querySelector('style')
+
+		expect(style).toBeDefined()
+	})
 })

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

@@ -1,11 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`MaintenancePage > renders correctly 1`] = `
-<error-page-stub
+<status-page-stub
   btnlink="/"
+  code=""
   codeerrortext="Code d'erreur : "
+  headinglevel="1"
   hidebtn="true"
   message="L’application n’est pas disponible pour le moment, veuillez nous excuser pour la gêne occasionnée."
   pagetitle="Maintenance en cours"
-></error-page-stub>
+  uniqueid=""
+></status-page-stub>
 `;

package/src/components/NotFoundPage/NotFoundPage.mdx

@@ -7,7 +7,7 @@ import * as NotFoundPageStories from "./NotFoundPage.stories";
 <div className="header">
   <h1>NotFoundPage</h1>
   <p>Le composant `NotFoundPage` permet d'afficher une page 404.
-Il est basé sur le composant `ErrorPage` du design system.</p>
+Il est basé sur le composant `StatusPage` du design system.</p>
 </div>
 
 <Canvas of={NotFoundPageStories.Default} />

package/src/components/NotFoundPage/NotFoundPage.stories.ts

@@ -1,11 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import NotFoundPage from './NotFoundPage.vue'
 
-const meta = {
+const meta: Meta<typeof NotFoundPage> = {
 	title: 'Templates/NotFoundPage',
 	component: NotFoundPage,
 	parameters: {
 		layout: 'fullscreen',
+		docs: {
+			inlineStories: true,
+		},
 	},
 	argTypes: {
 		hideBtn: {
@@ -74,9 +77,6 @@ export const WithErrorCode: Story = {
 		query: {
 			support_id: '1234567890123456789',
 		},
-		btnText: 'Retour à l’accueil',
-		btnHref: '/',
-		hideBtn: false,
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/NotFoundPage/NotFoundPage.vue

@@ -1,22 +1,31 @@
 <script setup lang="ts">
-	import { onMounted, ref } from 'vue'
-	import ErrorPage from '../ErrorPage/ErrorPage.vue'
-	import { locales } from './locales'
+	import { computed, onMounted, ref } from 'vue'
+	import StatusPage from '../StatusPage/StatusPage.vue'
+	import { locales, SUPPORT_ID_PARAM_NAME, supportIdMessage } from './locales'
 	import type { RouteRecordRaw } from 'vue-router'
+	import { useThemeLocales } from '@/utils/theme'
+
+	const { themeLocales } = useThemeLocales(locales)
 
-	const SUPPORT_ID_PARAM_NAME = 'support_id'
 	const supportId = ref<string | undefined>()
 
-	withDefaults(defineProps<{
+	interface Props {
 		btnText?: string
 		btnHref?: string
 		btnLink?: RouteRecordRaw | string
 		hideBtn?: boolean
-	}>(), {
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+		src?: string
+		uniqueId?: string
+	}
+	const props = withDefaults(defineProps<Props>(), {
 		btnText: undefined,
 		btnLink: '/',
 		btnHref: undefined,
 		hideBtn: false,
+		headingLevel: 1,
+		src: undefined,
+		uniqueId: undefined,
 	})
 
 	onMounted(() => {
@@ -29,40 +38,47 @@
 
 		supportId.value = supportIdParam.trim().match(/.{1,4}/g)?.join(' ')
 	})
+	const src = computed(() => props.src || themeLocales.value.src)
 </script>
 
 <template>
-	<ErrorPage
-		:code="locales.code"
-		:page-title="locales.pageTitle"
-		:message="locales.message"
+	<StatusPage
+		:page-title="themeLocales.pageTitle"
+		:heading-level="headingLevel"
+		:message="themeLocales.message"
+		:code="themeLocales.code"
 		:btn-text="btnText"
 		:btn-href="btnHref"
 		:btn-link="btnLink"
 		:hide-btn="hideBtn"
+		:unique-id="uniqueId"
 	>
 		<template
 			v-if="supportId"
 			#additional-content
 		>
 			<p class="mt-4">
-				{{ locales.supportIdMessage }}
+				{{ supportIdMessage }}
 
 				<b>{{ supportId }}</b>
 				.
 			</p>
 		</template>
 
-		<template #illustration>
+		<template
+			v-if="src || $slots.illustration"
+			#illustration
+		>
 			<slot name="illustration">
 				<img
-					src="./assets/not-found.svg"
+					v-if="src"
+					:src="src"
 					alt=""
 					aria-hidden="true"
 				>
 			</slot>
 		</template>
-	</ErrorPage>
+	</StatusPage>
 </template>
 
 <style lang="scss" scoped>

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

@@ -1,15 +1,89 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as Stories from '../NotFoundPage.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
+<AccessibilityGuideLayout
+    componentName="NotFoundPage"
+    iconSrc={AccessibilityIcon}
+>
+
+<div class="mt-2">
+    <p>Rapport d'audit manuel : <a href="/audits/NotFoundPage.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/654" target="_blank" style={{color:'#0C41BD'}}>issue #654</a>)</p>
 </div>
 
+    <CriteriaSection>
+        <CriteriaCard icon="🔍" title="Structure sémantique">
+            <ul>
+                <li><strong>Titre de page</strong> : rendu dans une balise <code>h1</code> via <code>StatusPage</code>, sa valeur provient des locales du thème via <code>useThemeLocales</code></li>
+                <li><strong>Code d'erreur</strong> : le code <em>404</em> est précédé du texte masqué visuellement <code>codeErrorText</code> (par défaut <em>"Code d'erreur : "</em>) pour les lecteurs d'écran</li>
+                <li><strong>Identifiant de support</strong> : si le paramètre <code>support_id</code> est présent dans l'URL, il est affiché dans le slot <code>#additional-content</code> avec un formatage espacé par groupes de 4 caractères pour faciliter la lecture</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>Prop <code>role</code></strong> : aucune prop <code>role</code> n'est exposée sur ce composant — la <code>NotFoundPage</code> est une page statique d'information, sa structure sémantique (<code>h1</code>, paragraphe) suffit à en exprimer le rôle sans qu'un attribut ARIA <code>role</code> supplémentaire soit nécessaire ; l'exposer risquerait d'introduire de mauvaises utilisations pouvant nuire à l'expérience des utilisateurs de lecteurs d'écran</li>
+            </ul>
+        </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/NotFoundPage.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/654" target="_blank" style={{color:'#0C41BD'}}>issue #654</a>)</p>
-	</div>
+        <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>), par défaut redirige vers <code>/</code></li>
+                <li><strong>Texte du bouton</strong> : doit être explicite et décrire la destination, ex. <em>"Retour à l'accueil"</em></li>
+                <li><strong>Masquage du bouton</strong> : la prop <code>hide-btn</code> permet de masquer le bouton si une alternative de navigation est présente</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🖼️" title="Illustration">
+            <ul>
+                <li><strong>Image décorative</strong> : l'illustration par défaut possède <code>alt=""</code> et <code>aria-hidden="true"</code> car elle est purement décorative</li>
+                <li><strong>Source thémable</strong> : l'image source provient des locales du thème via <code>useThemeLocales</code></li>
+                <li><strong>Slot <code>#illustration</code></strong> : si une illustration personnalisée est fournie, les mêmes règles d'accessibilité s'appliquent</li>
+                <li><strong>Mise en page adaptive</strong> : la colonne illustration n'est affichée que si <code>src</code> ou le slot <code>#illustration</code> est fourni</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🪪" title="Identifiant de support">
+            <ul>
+                <li><strong>Paramètre URL</strong> : le paramètre <code>support_id</code> est lu depuis <code>document.location.search</code> au montage du composant via <code>onMounted</code></li>
+                <li><strong>Formatage lisible</strong> : l'identifiant est découpé en groupes de 4 caractères séparés par des espaces pour faciliter la lecture vocale et visuelle, ex. <em>"1234 5678 9012 3456 789"</em></li>
+                <li><strong>Contenu conditionnel</strong> : la section identifiant n'est affichée que si <code>support_id</code> est présent dans l'URL</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection title="État par défaut" componentName="NotFoundPage">
+        <Story
+            of={Stories.Default}
+            parameters={{ docs: { inlineStories: true } }}
+        />
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Fournir un <code>btn-text</code> explicite — éviter les libellés génériques comme <em>"Cliquez ici"</em></li>
+            <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>Le slot <code>#illustration</code> personnalisé doit respecter les mêmes règles : <code>alt=""</code> et <code>aria-hidden="true"</code> si l'image est décorative</li>
+            <li>Ne pas stocker d'informations sensibles dans le paramètre <code>support_id</code> visible dans l'URL</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html" target="_blank" style={{ color: '#0C41BD' }}>WCAG 1.3.1 – Info and Relationships</a></li>
+            <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>
+        </ul>
+    </ResourcesSection>
+
+</AccessibilityGuideLayout>