@cnamts/synapse 1.0.20 → 1.0.21

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,195 @@
 // @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'],
+		})
+	})
 })

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

@@ -1,28 +1,116 @@
-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 { mount, flushPromises } from '@vue/test-utils'
 import NotFoundPage from '../NotFoundPage.vue'
+import StatusPage from '../../StatusPage/StatusPage.vue'
+
+vi.mock('@/utils/theme', () => ({
+	useThemeLocales: () => ({
+		themeLocales: {
+			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')
+	})
 })

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

@@ -113,7 +113,7 @@ exports[`NotFoundPage > display the support ID if provided in the url 1`] = `
           </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">
@@ -260,7 +260,7 @@ exports[`NotFoundPage > renders correctly 1`] = `
           </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/tests/PageContainer.a11y.spec.ts

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, afterEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
@@ -9,6 +9,10 @@ import PageContainer from '../PageContainer.vue'
 // Scénario d’accessibilité : conteneur de page enveloppant un contenu principal.
 
 describe('PageContainer – accessibility (axe)', () => {
+	afterEach(() => {
+		document.body.innerHTML = ''
+	})
+
 	it('has no obvious axe violations with main content slot', async () => {
 		const wrapper = mount(PageContainer, {
 			slots: {
@@ -113,7 +117,7 @@ describe('PageContainer – accessibility (axe)', () => {
 					role: 'navigation',
 				},
 				slots: {
-					default: '<nav><ul><li><a href="#home">Accueil</a></li><li><a href="#about">À propos</a></li></ul></nav>',
+					default: '<ul><li><a href="#home">Accueil</a></li><li><a href="#about">À propos</a></li></ul>',
 				},
 				attachTo: document.body,
 			})
@@ -154,7 +158,7 @@ describe('PageContainer – accessibility (axe)', () => {
 					role: 'contentinfo',
 				},
 				slots: {
-					default: '<footer><p>&copy; 2026 - Tous droits réservés</p></footer>',
+					default: '<div><p>&copy; 2026 - Tous droits réservés</p></div>',
 				},
 				attachTo: document.body,
 			})
@@ -175,7 +179,7 @@ describe('PageContainer – accessibility (axe)', () => {
 					role: 'banner',
 				},
 				slots: {
-					default: '<header><h1>Logo</h1></header>',
+					default: '<div><h1>Logo</h1></div>',
 				},
 				attachTo: document.body,
 			})
@@ -286,7 +290,7 @@ describe('PageContainer – accessibility (axe)', () => {
 					uniqueId: 'footer',
 				},
 				slots: {
-					default: '<footer><p>Informations de pied de page</p></footer>',
+					default: '<div><p>Informations de pied de page</p></div>',
 				},
 				attachTo: document.body,
 			})
@@ -310,7 +314,7 @@ describe('PageContainer – accessibility (axe)', () => {
 					uniqueId: 'header',
 				},
 				slots: {
-					default: '<header><h1>En-tête</h1></header>',
+					default: '<div><h1>En-tête</h1></div>',
 				},
 				attachTo: document.body,
 			})
@@ -461,9 +465,12 @@ describe('PageContainer – accessibility (axe)', () => {
 		it('has proper color contrast with different background colors', async () => {
 			const wrapper = mount(PageContainer, {
 				props: {
-					role: 'main',
+					role: 'region',
 					color: 'surface',
 				},
+				attrs: {
+					'aria-label': 'Bloc coloré',
+				},
 				slots: {
 					default: '<h1>Texte contrasté</h1><p>Paragraphe avec contraste de couleur.</p>',
 				},