@cnamts/synapse 1.0.21 → 1.0.22

package/src/components/LogoBrandSection/LogoBrandSection.stories.ts

@@ -5,6 +5,20 @@ const meta = {
 	title: 'Composants/Données/LogoBrandSection',
 	component: LogoBrandSection,
 	argTypes: {
+		'headingLevelTitle': {
+			control: {
+				type: 'select',
+			},
+			options: [1, 2, 3, 4, 5, 6],
+			description: 'Le niveau de titre pour le serviceTitle.',
+		},
+		'headingLevelSubtitle': {
+			control: {
+				type: 'select',
+			},
+			options: [1, 2, 3, 4, 5, 6],
+			description: 'Le niveau de titre pour le serviceSubTitle.',
+		},
 		'theme': {
 			description: 'Applique un preset de style à la section.',
 			control: {
@@ -72,6 +86,8 @@ const meta = {
 	},
 	args: {
 		theme: 'default',
+		headingLevelSubtitle: 2,
+		headingLevelTitle: 1,
 	},
 } satisfies Meta<typeof LogoBrandSection>
 
@@ -81,6 +97,8 @@ type Story = StoryObj<typeof LogoBrandSection>
 
 export const Default: Story = {
 	args: {
+		headingLevelSubtitle: 2,
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubTitle: 'Documentation du Design System',
 	},
@@ -91,6 +109,8 @@ export const Default: Story = {
 				code: `
 				<template>
 					<LogoBrandSection
+						:heading-level-title="headingLevelTitle"
+						:heading-level-subtitle="headingLevelSubtitle"
 						service-title="Synapse"
 						service-sub-title="Documentation du Design System"
 					/>
@@ -113,6 +133,8 @@ export const WithBrand: Story = {
 	args: {
 		serviceTitle: 'Synapse',
 		serviceSubTitle: ' Documentation du Design System',
+		headingLevelTitle: 1,
+		headingLevelSubtitle: 2,
 	},
 	render: (args) => {
 		return {

package/src/components/LogoBrandSection/LogoBrandSection.vue

@@ -8,6 +8,7 @@
 	import { locales } from './locales'
 	import { secondaryLogoMapping } from './secondaryLogoMapping'
 	import type { Theme } from './types'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	const props = withDefaults(
 		defineProps<{
@@ -21,12 +22,16 @@
 				to?: RouteLocationRaw
 				href?: string
 			}
+			headingLevelTitle?: 1 | 2 | 3 | 4 | 5 | 6
+			headingLevelSubtitle?: 1 | 2 | 3 | 4
 		}>(), {
 			theme: 'default',
 			serviceTitle: undefined,
 			serviceSubTitle: undefined,
 			mobileVersion: false,
 			reduceLogo: false,
+			headingLevelTitle: 1,
+			headingLevelSubtitle: 2,
 			homeLink: () => ({
 				href: '/',
 			}),
@@ -246,12 +251,14 @@
 				class="vd-title-container d-flex justify-center flex-column text-primary"
 			>
 				<slot name="brand-content">
-					<h1
+					<SyHeading
 						v-if="service.title"
 						:class="{
 							'vd-compte-entreprise-title': isCompteEntreprise,
+							'vd-title text-caption text-md-subtitle-1 font-weight-medium': headingLevelTitle === 1,
+							'vd-title text-caption font-weight-medium': headingLevelTitle !== 1,
 						}"
-						class="vd-title text-caption text-md-subtitle-1 font-weight-medium"
+						:level="headingLevelTitle"
 					>
 						<template v-if="typeof service.title === 'string'">
 							<span>
@@ -267,14 +274,15 @@
 								{{ service.title.highlight }}
 							</span>
 						</template>
-					</h1>
+					</SyHeading>
 
-					<h2
+					<SyHeading
 						v-if="showServiceSubTitle"
 						class="vd-title text-caption"
+						:level="headingLevelSubtitle"
 					>
 						{{ service.subTitle }}
-					</h2>
+					</SyHeading>
 				</slot>
 			</div>
 		</slot>

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

@@ -17,6 +17,8 @@ describe('LogoBrandSection – accessibility (axe)', () => {
 				},
 			},
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',

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

@@ -9,6 +9,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -28,6 +30,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -42,6 +46,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'compte-entreprise',
 			},
 		})
@@ -54,6 +60,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -74,6 +82,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -88,6 +98,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: '',
@@ -102,6 +114,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
 			},
@@ -116,6 +130,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'cnam',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -131,6 +147,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'compte-entreprise',
 				serviceTitle: 'Service Title',
 				serviceSubTitle: 'Service Sub Title',
@@ -146,6 +164,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'risque-pro',
 				reduceLogo: false,
 			},
@@ -160,6 +180,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'risque-pro',
 				reduceLogo: true,
 			},
@@ -173,6 +195,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'compte-entreprise',
 			},
 		})
@@ -185,6 +209,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'compte-ameli',
 				mobileVersion: true,
 			},
@@ -199,6 +225,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				reduceLogo: true,
 			},
@@ -212,6 +240,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				reduceLogo: false,
 			},
@@ -225,6 +255,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'compte-ameli',
 			},
 		})
@@ -237,6 +269,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				homeLink: {
 					href: '#',
@@ -252,6 +286,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				homeLink: {
 					to: '/',
@@ -267,6 +303,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 				homeLink: {
 					href: undefined,
@@ -283,6 +321,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'default',
 			},
 		})
@@ -295,6 +335,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'ameli-pro',
 			},
 		})
@@ -307,6 +349,8 @@ describe('LogoBrandSection', () => {
 			global: {
 				stubs: ['RouterLink', 'Logo'] },
 			props: {
+				headingLevelTitle: 1,
+				headingLevelSubtitle: 2,
 				theme: 'ameli',
 				homeLink: {
 					href: undefined,

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

@@ -44,6 +44,7 @@ exports[`LogoBrandSection > renders correctly 1`] = `
   ">
     <h1 class="
       font-weight-medium
+      sy-heading
       text-caption
       text-md-subtitle-1
       vd-title
@@ -53,6 +54,7 @@ exports[`LogoBrandSection > renders correctly 1`] = `
       </span>
     </h1>
     <h2 class="
+      sy-heading
       text-caption
       vd-title
     ">

package/src/components/MaintenancePage/MaintenancePage.vue

@@ -1,26 +1,53 @@
 <script setup lang="ts">
+	import { computed } from 'vue'
 	import StatusPage from '../StatusPage/StatusPage.vue'
 	import { locales } from './locales'
 	import { useThemeLocales } from '@/utils/theme'
 
 	const { themeLocales } = useThemeLocales(locales)
+
+	interface Props {
+		pageTitle?: string
+		message?: string
+		code?: string
+		src?: string
+		uniqueId?: string
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+	}
+
+	const props = withDefaults(defineProps<Props>(), {
+		pageTitle: undefined,
+		message: undefined,
+		code: undefined,
+		src: undefined,
+		uniqueId: undefined,
+		headingLevel: 1,
+	})
+
+	// Utiliser les props de l'utilisateur en priorité, sinon les locales du thème
+	const pageTitle = computed(() => props.pageTitle || themeLocales.value.pageTitle)
+	const message = computed(() => props.message || themeLocales.value.message)
+	const code = computed(() => props.code || themeLocales.value.code)
+	const src = computed(() => props.src || themeLocales.value.src)
 </script>
 
 <template>
 	<StatusPage
-		:page-title="themeLocales.pageTitle"
-		:message="themeLocales.message"
-		:code="themeLocales.code"
+		:heading-level="headingLevel"
+		:unique-id="props.uniqueId"
+		:page-title="pageTitle"
+		:message="message"
+		:code="code"
 		:hide-btn="true"
 	>
 		<template
-			v-if="themeLocales.src || $slots.illustration"
+			v-if="src || $slots.illustration"
 			#illustration
 		>
 			<slot name="illustration">
 				<img
-					v-if="themeLocales.src"
-					:src="themeLocales.src"
+					v-if="src"
+					:src="src"
 					alt=""
 					aria-hidden="true"
 				>

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

@@ -28,7 +28,9 @@ import {
             <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 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>Valeurs par défaut</strong> : <code>pageTitle</code>, <code>message</code> et <code>code</code> proviennent des locales du thème via <code>useThemeLocales</code></li>
+                <li><strong>Valeurs par défaut</strong> : <code>pageTitle</code>, <code>message</code> <code>src</code> et <code>code</code> proviennent des locales du thème via <code>useThemeLocales</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>Prop <code>role</code></strong> : aucune prop <code>role</code> n'est exposée sur ce composant — la page de maintenance 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 (ex. <code>role="alert"</code> inapproprié) pouvant nuire à l'expérience des utilisateurs de lecteurs d'écran</li>
             </ul>
         </CriteriaCard>
 

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

@@ -1,6 +1,7 @@
 // @vitest-environment jsdom
 
 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'
@@ -8,14 +9,14 @@ import StatusPage from '../../StatusPage/StatusPage.vue'
 
 const themeLocales = {
 	pageTitle: 'Maintenance en cours',
-	message: 'L’application n’est pas disponible pour le moment.',
+	message: 'L\'application n\'est pas disponible pour le moment.',
 	code: '503',
 	src: '/img/maintenance.svg',
 }
 
 vi.mock('@/utils/theme', () => ({
 	useThemeLocales: () => ({
-		themeLocales,
+		themeLocales: ref(themeLocales),
 	}),
 }))
 

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

@@ -26,6 +26,24 @@ describe('MaintenancePage', () => {
 		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)
 

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

@@ -5,8 +5,10 @@ exports[`MaintenancePage > renders correctly 1`] = `
   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"
+  uniqueid=""
 ></status-page-stub>
 `;

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

@@ -1,7 +1,7 @@
 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: {

package/src/components/NotFoundPage/NotFoundPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { onMounted, ref } from 'vue'
+	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'
@@ -9,16 +9,23 @@
 
 	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(() => {
@@ -31,17 +38,20 @@
 
 		supportId.value = supportIdParam.trim().match(/.{1,4}/g)?.join(' ')
 	})
+	const src = computed(() => props.src || themeLocales.value.src)
 </script>
 
 <template>
 	<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"
@@ -56,12 +66,13 @@
 		</template>
 
 		<template
-			v-if="themeLocales.src || $slots.illustration"
+			v-if="src || $slots.illustration"
 			#illustration
 		>
 			<slot name="illustration">
 				<img
-					:src="themeLocales.src"
+					v-if="src"
+					:src="src"
 					alt=""
 					aria-hidden="true"
 				>

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

@@ -29,6 +29,8 @@ import {
                 <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>
 

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

@@ -192,4 +192,53 @@ describe('NotFoundPage – accessibility (axe)', () => {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no obvious axe violations with a custom uniqueId', async () => {
+		const wrapper = mount(NotFoundPage, {
+			props: {
+				uniqueId: 'custom-not-found-id',
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – custom uniqueId', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has a single h1 heading', async () => {
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const headings = wrapper.findAll('h1')
+		if (headings.length !== 1) {
+			throw new Error(`Expected exactly 1 h1 heading, found ${headings.length}`)
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – single h1', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with all props provided', async () => {
+		const wrapper = mount(NotFoundPage, {
+			props: {
+				uniqueId: 'full-props-id',
+				btnText: 'Retour à l\'accueil',
+				btnHref: 'https://example.com',
+				hideBtn: false,
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – all props', {
+			ignoreRules: ['region'],
+		})
+	})
 })

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

@@ -1,16 +1,17 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ref } from 'vue'
 import { mount, flushPromises } from '@vue/test-utils'
 import NotFoundPage from '../NotFoundPage.vue'
 import StatusPage from '../../StatusPage/StatusPage.vue'
 
 vi.mock('@/utils/theme', () => ({
 	useThemeLocales: () => ({
-		themeLocales: {
+		themeLocales: ref({
 			code: '404',
 			pageTitle: 'Page non trouvée',
 			message: 'Cette page n\'existe pas ou a été déplacée.',
 			src: '/src/components/NotFoundPage/assets/not-found.svg',
-		},
+		}),
 	}),
 }))
 
@@ -113,4 +114,26 @@ describe('NotFoundPage', () => {
 		expect(img.exists()).toBe(true)
 		expect(img.attributes('src')).toBe('/custom.svg')
 	})
+
+	it('passes a uniqueId prop to StatusPage', async () => {
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const statusPage = wrapper.findComponent(StatusPage)
+		expect(statusPage.props('uniqueId')).toBeDefined()
+	})
+
+	it('passes a custom uniqueId prop to StatusPage', async () => {
+		const wrapper = mount(NotFoundPage, {
+			props: {
+				uniqueId: 'custom-id',
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const statusPage = wrapper.findComponent(StatusPage)
+		expect(statusPage.props('uniqueId')).toBe('custom-id')
+	})
 })

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

@@ -107,6 +107,7 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
             font-weight-bold
             mb-2
             mb-4
+            sy-heading
             text-h5
           ">
             Page non trouvée
@@ -254,6 +255,7 @@ exports[`NotFoundPage > renders correctly 1`] = `
             font-weight-bold
             mb-2
             mb-4
+            sy-heading
             text-h5
           ">
             Page non trouvée