@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/NotFoundPage/locales.ts

@@ -1,6 +1,26 @@
+import imgUrlAp from './assets/not-found-ap.svg'
+import imgUrlCnam from './assets/not-found-cnam.svg'
+
+export const SUPPORT_ID_PARAM_NAME = 'support_id'
+export const supportIdMessage = 'Votre identifiant de support est'
+
 export const locales = {
-	code: '404',
-	pageTitle: 'Page non trouvée',
-	message: 'Cette page n’existe pas ou a été déplacée.',
-	supportIdMessage: 'Votre identifiant de support est',
+	default: {
+		code: '404',
+		pageTitle: 'Page non trouvée',
+		message: 'Cette page n’existe pas ou a été déplacée.',
+		src: imgUrlCnam,
+	},
+	cnam: {
+		code: '404',
+		pageTitle: 'Page non trouvée',
+		message: 'Cette page n’existe pas ou a été déplacée.',
+		src: imgUrlCnam,
+	},
+	ap: {
+		code: '404',
+		pageTitle: 'Page non trouvée ou inexistante - Erreur 404',
+		message: 'La page que vous essayez d’afficher n’existe plus ou a été déplacée.',
+		src: imgUrlAp,
+	},
 }

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

@@ -1,31 +1,244 @@
 // @vitest-environment jsdom
 
 import { describe, it } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
 import NotFoundPage from '../NotFoundPage.vue'
 import { locales } from '../locales'
 
-// Scénario d’accessibilité : page 404 avec code, message et identifiant de support.
+// Scénario d'accessibilité : page 404 avec code, message et identifiant de support.
 
 describe('NotFoundPage – accessibility (axe)', () => {
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – default state', {
+			ignoreRules: ['region'],
+		})
+	})
+
 	it('has no obvious axe violations with support ID in URL', async () => {
 		// Simuler une URL contenant un identifiant de support
 		history.replaceState({}, '', `/not-found?support_id=1234567890123456789`)
 
 		const wrapper = mount(NotFoundPage)
+		await flushPromises()
 		await wrapper.vm.$nextTick()
 
-		// S’assurer que le contenu principal est bien rendu
+		// S'assurer que le contenu principal est bien rendu
 		const text = wrapper.text()
-		if (!text.includes(locales.code) || !text.includes(locales.message)) {
+		if (!text.includes(locales.default.code) || !text.includes(locales.default.message)) {
 			throw new Error('NotFoundPage main content not rendered as expected')
 		}
 
+		// Vérifier que le support ID est affiché avec un formatage espacé
+		if (!text.includes('1234 5678 9012 3456 789')) {
+			throw new Error('Support ID not formatted correctly')
+		}
+
 		const results = await axe(wrapper.element as HTMLElement)
 		assertNoA11yViolations(results, 'NotFoundPage – with support ID', {
 			ignoreRules: ['region'],
 		})
 	})
+
+	it('has no obvious axe violations with custom button text and href', async () => {
+		const wrapper = mount(NotFoundPage, {
+			props: {
+				btnText: 'Retour à l\'accueil',
+				btnHref: 'https://example.com',
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – with custom button props', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations when button is hidden', async () => {
+		const wrapper = mount(NotFoundPage, {
+			props: {
+				hideBtn: true,
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – button hidden', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with router link navigation', async () => {
+		const wrapper = mount(NotFoundPage, {
+			props: {
+				btnText: 'Retour',
+				btnLink: '/home',
+			},
+			global: {
+				stubs: {
+					RouterLink: true,
+				},
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – with router link', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has proper semantic structure for 404 error page', async () => {
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const text = wrapper.text()
+		// Vérifier que le code 404 est présent
+		if (!text.includes('404')) {
+			throw new Error('404 code not found in page content')
+		}
+
+		// Vérifier que le message est présent
+		if (!text.includes('Page non trouvée')) {
+			throw new Error('Page title not found in page content')
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – semantic structure', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with illustration slot', async () => {
+		const wrapper = mount(NotFoundPage, {
+			slots: {
+				illustration: '<img src="/custom-404.svg" alt="" aria-hidden="true" />',
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const img = wrapper.find('img')
+		if (img.exists() && img.attributes('alt') !== '') {
+			throw new Error('Illustration image should have empty alt for decorative purpose')
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – custom illustration', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has correct ARIA attributes on illustration image', async () => {
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const img = wrapper.find('img')
+		if (img.exists()) {
+			// L'image illustrative doit être marquée comme décoration
+			if (img.attributes('aria-hidden') !== 'true') {
+				throw new Error('Illustration should have aria-hidden="true"')
+			}
+
+			// L'alt doit être vide pour les images décoratives
+			if (img.attributes('alt') !== '') {
+				throw new Error('Decorative image should have empty alt text')
+			}
+		}
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – ARIA attributes on image', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with support ID containing spaces already', async () => {
+		// Tester avec un ID qui contient déjà des espacements
+		history.replaceState({}, '', `/not-found?support_id=  ABCD  EFGH  IJKL  `)
+
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – support ID with spaces', {
+			ignoreRules: ['region'],
+		})
+	})
+
+	it('has no obvious axe violations with long support ID', async () => {
+		// Tester avec un ID très long
+		const longId = '12345678901234567890123456789012'
+		history.replaceState({}, '', `/not-found?support_id=${longId}`)
+
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'NotFoundPage – long support ID', {
+			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,28 +1,139 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import { locales } from '../locales'
+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: 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',
+		}),
+	}),
+}))
 
 describe('NotFoundPage', () => {
-	it('renders correctly', () => {
+	beforeEach(() => {
+		history.replaceState({}, '', '/')
+	})
+
+	it('renders correctly', async () => {
 		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
 
-		expect(wrapper.text()).toContain(locales.code)
-		expect(wrapper.text()).toContain(locales.message)
+		expect(wrapper.findComponent(StatusPage).exists()).toBe(true)
+		expect(wrapper.text()).toContain('404')
+		expect(wrapper.text()).toContain('Page non trouvée')
 		expect(wrapper.html()).toMatchSnapshot()
 	})
 
 	it('display the support ID if provided in the url', async () => {
-		history.replaceState(
-			{},
-			'',
-			'/not-found?support_id=1234567890123456789',
-		)
-		const wrapper = mount(NotFoundPage)
+		history.replaceState({}, '', '/not-found?support_id=1234567890123456789')
 
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
 		await wrapper.vm.$nextTick()
 
+		expect(wrapper.text()).toContain('Votre identifiant de support est')
 		expect(wrapper.text()).toContain('1234 5678 9012 3456 789')
 		expect(wrapper.html()).toMatchSnapshot()
 	})
+
+	it('does not display support ID section when no support_id in url', async () => {
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.text()).not.toContain('Votre identifiant de support est')
+	})
+
+	it('renders StatusPage with correct props', async () => {
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const statusPage = wrapper.findComponent(StatusPage)
+		expect(statusPage.props('code')).toBe('404')
+		expect(statusPage.props('pageTitle')).toBe('Page non trouvée')
+		expect(statusPage.props('message')).toBe('Cette page n\'existe pas ou a été déplacée.')
+	})
+
+	it('renders with custom button props', async () => {
+		const wrapper = mount(NotFoundPage, {
+			props: {
+				btnText: 'Retour à l\'accueil',
+				btnHref: '/',
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const statusPage = wrapper.findComponent(StatusPage)
+		expect(statusPage.props('btnText')).toBe('Retour à l\'accueil')
+		expect(statusPage.props('btnHref')).toBe('/')
+	})
+
+	it('hides button when hideBtn prop is true', async () => {
+		const wrapper = mount(NotFoundPage, {
+			props: {
+				hideBtn: true,
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.findComponent(StatusPage).props('hideBtn')).toBe(true)
+	})
+
+	it('renders illustration with correct accessibility attributes', async () => {
+		const wrapper = mount(NotFoundPage)
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const img = wrapper.find('img')
+		expect(img.exists()).toBe(true)
+		expect(img.attributes('src')).toBe('/src/components/NotFoundPage/assets/not-found.svg')
+		expect(img.attributes('alt')).toBe('')
+		expect(img.attributes('aria-hidden')).toBe('true')
+	})
+
+	it('renders custom illustration slot', async () => {
+		const wrapper = mount(NotFoundPage, {
+			slots: {
+				illustration: '<img src="/custom.svg" alt="" aria-hidden="true" />',
+			},
+		})
+		await flushPromises()
+		await wrapper.vm.$nextTick()
+
+		const img = wrapper.find('img')
+		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,13 +107,14 @@ 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
           </h1>
           <p>
             <span>
-              Cette page n’existe pas ou a été déplacée.
+              Cette page n'existe pas ou a été déplacée.
             </span>
           </p>
           <p class="mt-4">
@@ -254,13 +255,14 @@ exports[`NotFoundPage > renders correctly 1`] = `
             font-weight-bold
             mb-2
             mb-4
+            sy-heading
             text-h5
           ">
             Page non trouvée
           </h1>
           <p>
             <span>
-              Cette page n’existe pas ou a été déplacée.
+              Cette page n'existe pas ou a été déplacée.
             </span>
           </p>
           <!-- v-if -->

package/src/components/NotificationBar/NotificationBar.mdx

@@ -5,8 +5,8 @@ import * as NotificationBarStories from './NotificationBar.stories';
 <Meta of={NotificationBarStories} />
 
 <div className="header">
-  <h1>Accessibilité du composant SyIcon</h1>
-  <p>Le composant `SyIcon` est un wrapper autour du composant `v-icon` de Vuetify qui ajoute une gestion automatique de l'accessibilité selon les normes RGAA.</p>
+  <h1>Accessibilité du composant NotificationBar </h1>
+  <p>Le composant `NotificationBar` est un wrapper autour du composant `v-icon` de Vuetify qui ajoute une gestion automatique de l'accessibilité selon les normes RGAA.</p>
 </div>
 
 ##### Les NotificationsBar servent à notifier l’utilisateur soit d’un retour d’action.

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

@@ -1,15 +1,75 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/blocks';
 import * as NotificationBarStories from '../NotificationBar.stories.ts';
-import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={NotificationBarStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
 
-
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/NotificationBar.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+<AccessibilityGuideLayout
+	componentName="NotificationBar"
+	iconSrc={AccessibilityIcon}
+>
+	<div class="mt-8">
+		<p>Rapport d’audit manuel : <a href="/audits/NotificationBar.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/4029" target="_blank" style={{color:'#0C41BD'}}>issue #4029</a>)</p>
 	</div>
+	<CriteriaSection>
+		<CriteriaCard icon="🔔" title="Annonce et rôles adaptés">
+			<ul>
+				<li><strong>Rôle dynamique</strong> : <code>role="status"</code> pour les notifications neutres et <code>role="alert"</code> pour les erreurs afin d’informer immédiatement les lecteurs d’écran.</li>
+				<li><strong>Icônes décoratives</strong> : les pictogrammes sont marqués comme décoratifs pour ne pas être annoncés inutilement.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="⌨️" title="Navigation clavier complète">
+			<ul>
+				<li><strong>Fermeture clavier</strong> : le bouton « Fermer » est focalisable, activable au clavier et accessible avec <kbd>Échap</kbd>.</li>
+				<li><strong>Focus visible</strong> : styles d’outline renforcés sur le bouton de fermeture pour chaque état de contraste.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🕒" title="Temps de lecture maîtrisé">
+			<ul>
+				<li><strong>Pas d’expiration forcée</strong> : par défaut <code>timeout=-1</code> pour laisser le temps de lecture ; la temporisation reste configurable.</li>
+				<li><strong>File ou liste</strong> : <code>show-all</code> permet d’afficher toutes les notifications simultanément pour éviter la perte d’information.</li>
+			</ul>
+		</CriteriaCard>
+
+		<CriteriaCard icon="🖼️" title="Lisibilité et contraste">
+			<ul>
+				<li><strong>Contrastes définis</strong> : couleurs d’arrière‑plan et de texte prévues pour chaque type (info, success, warning, error).</li>
+				<li><strong>Adaptation mobile</strong> : réorganisation verticale automatique lorsque le message est long sur petits écrans.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="NotificationBar">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Privilégiez l’option <code>timeout=-1</code> pour laisser le temps de lecture, surtout pour les messages critiques.</li>
+			<li>Utilisez <code>type="error"</code> uniquement pour les situations bloquantes afin d’éviter la surcharge d’alertes.</li>
+			<li>Ajoutez un libellé explicite au bouton d’action (slot <code>action</code>) et assurez-vous qu’il soit atteignable au clavier.</li>
+			<li>Évitez d’empiler trop de notifications : activez <code>show-all</code> en cas de rafale pour limiter la perte contextuelle.</li>
+			<li>Ne déplacez pas le focus automatiquement sur la notification : laissez l’utilisateur garder son contexte d’interaction.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/alert/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Alert</a></li>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/status/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Status</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/#timing-adjustable" target="_blank" rel="noopener noreferrer">WCAG 2.1 – Timing Adjustable</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/PageContainer/PageContainer.stories.ts

@@ -207,3 +207,50 @@ export const Card: Story = {
 		}
 	},
 }
+
+export const WithAriaRole: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<PageContainer
+		role="region"
+		unique-id="main-content"
+		aria-labelledby="main-content-title"
+	>
+		<h2 id="main-content-title">Contenu principal</h2>
+		Contenu de la page
+	</PageContainer>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { PageContainer } from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
+	args: {
+		role: 'region',
+		uniqueId: 'main-content',
+		ariaLabelledby: 'main-content-title',
+	},
+	render: (args) => {
+		return {
+			components: { PageContainer },
+			setup() {
+				return { args }
+			},
+			template: `
+				<PageContainer :role="args.role" :unique-id="args.uniqueId" :aria-labelledby="args.ariaLabelledby">
+					<h2 id="main-content-title" class="pa-4">Contenu principal</h2>
+					<p class="pa-4">Contenu de la page</p>
+				</PageContainer>
+			`,
+		}
+	},
+}

package/src/components/PageContainer/PageContainer.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 	import { computed } from 'vue'
 	import { useDisplay } from 'vuetify'
-
-	type AriaRole = 'main' | 'region' | 'navigation' | 'contentinfo' | 'banner'
+	import type { AriaRole } from '../types'
 
 	const props = withDefaults(defineProps<{
 		size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs'
@@ -10,12 +9,14 @@
 		color?: string
 		uniqueId?: string
 		role?: AriaRole
+		ariaLabelledby?: string
 	}>(), {
 		size: undefined,
 		spacing: undefined,
 		color: 'transparent',
 		uniqueId: undefined,
 		role: undefined,
+		ariaLabelledby: undefined,
 	})
 
 	const display = useDisplay()
@@ -63,6 +64,7 @@
 		:id="uniqueId ? `${uniqueId}-container` : undefined"
 		:class="[spacingClass, 'vd-page-container d-flex justify-center']"
 		:role="role"
+		:aria-labelledby="ariaLabelledby"
 	>
 		<VSheet
 			:id="uniqueId ? `${uniqueId}-content` : undefined"