@cnamts/synapse 1.0.20 → 1.0.22

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

@@ -1,55 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import ErrorPage from './ErrorPage.vue'
 
-const meta = {
+const meta: Meta = {
 	title: 'Templates/ErrorPage',
 	component: ErrorPage,
 	parameters: {
 		layout: 'fullscreen',
 	},
-	argTypes: {
-		'code': {
-			description: 'Code d\'erreur affiché en premier plan',
-		},
-		'codeErrorText': {
-			description: 'Text affiché avant le code d\'erreur pour les outils d\'accessibilité',
-			table: {
-				defaultValue: {
-					summary: 'Code d\'erreur\xa0: ',
-				},
-			},
-		},
-		'additional-content': {
-			control: {
-				type: 'text',
-			},
-			table: {
-				type: {
-					summary: '{}',
-				},
-			},
-		},
-		'action': {
-			control: {
-				type: 'text',
-			},
-			table: {
-				type: {
-					summary: '{}',
-				},
-			},
-		},
-		'illustration': {
-			control: {
-				type: 'text',
-			},
-			table: {
-				type: {
-					summary: '{}',
-				},
-			},
-		},
-	},
 } satisfies Meta<typeof ErrorPage>
 
 export default meta
@@ -57,40 +14,30 @@ export default meta
 type Story = StoryObj<typeof ErrorPage>
 
 export const Default: Story = {
-	args: {
-		pageTitle: 'une erreur est survenue',
-		code: '500',
-		message: 'Une erreur est survenue de notre côté, veuillez réessayer plus tard. Si le problème persiste veuillez nous contacter par téléphone au 3646',
-	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
 	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. Si le problème persiste veuillez nous contacter par téléphone au 3646"
-						>
-					</div>
-				</template>
-				`,
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage />
+                    </div>
+                </template>
+                `,
 			}, {
 				name: 'Script',
 				code: `
-				<script setup lang="ts">
-					import { ErrorPage } from '@cnamts/synapse'
-				</script>
-				
-				`,
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
 			},
 		],
 	},
-	decorators: [
-		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
-	],
 }
 
 export const WithLink: Story = {
@@ -99,95 +46,112 @@ export const WithLink: Story = {
 		btnHref: '/',
 		btnText: 'Retour à l\'accueil',
 	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
 	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. Si le problème persiste veuillez nous contacter par téléphone au 3646"
-							btn-href=""
-							btn-text="Retour à l'accueil"
-						>
-					</div>
-				</template>
-				`,
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage 
+                            btn-href="/"
+                            btn-text="Retour à l'accueil"
+                        />
+                    </div>
+                </template>
+                `,
 			}, {
 				name: 'Script',
 				code: `
-				<script setup lang="ts">
-					import { ErrorPage } from '@cnamts/synapse'
-				</script>
-				
-				`,
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
 			},
 		],
 	},
-	decorators: [
-		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
-	],
 }
 
-export const CustomIllustration: Story = {
+export const WithRole: Story = {
 	args: {
 		...Default.args,
-		btnHref: '/',
-		btnText: 'Retour à l\'accueil',
+		role: 'region',
+		uniqueId: 'error-page-region',
 	},
+	decorators: [
+		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
+	],
 	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>
-				`,
-			},
-			{
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage
+                            role="region"
+                            unique-id="error-page-region"
+                        />
+                    </div>
+                </template>
+                `,
+			}, {
 				name: 'Script',
 				code: `
-				<script setup lang="ts">
-					import { ErrorPage } from '@cnamts/synapse'
-				</script>
-				`,
+                <script setup lang="ts">
+                    import { ErrorPage } from '@cnamts/synapse'
+                </script>
+                `,
 			},
 		],
 	},
+}
+
+export const CustomIllustration: Story = {
 	decorators: [
 		() => ({ template: '<div style="padding: 20px; background: rgb(231, 236, 245)"><story /></div>' }),
 	],
-	render: args => ({
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+                <template>
+                    <div style="padding: 20px; background: rgb(231, 236, 245)">
+                        <ErrorPage>
+                            <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>
+                `,
+			},
+		],
+	},
+	render: () => ({
 		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>
-		`,
+            <ErrorPage>
+                <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

@@ -1,50 +1,12 @@
 <script setup lang="ts">
-	import type { RouteRecordRaw } from 'vue-router'
 	import { locales } from './locales'
-	import PageContainer from '../PageContainer/PageContainer.vue'
-
-	type MessagePart =
-		| { type: 'text', value: string }
-		| { type: 'phone', value: string }
-
-	// Fonction pour formater le message et ajouter des liens tel: aux numéros de téléphone
-	const splitMessage = (message?: string): MessagePart[] => {
-		// Regex pour détecter les numéros de téléphone
-		if (!message)
-			return []
-
-		const regex = /\b(\d{4}|\d{10})\b/g
-		const parts: MessagePart[] = []
-		let lastIndex = 0
-		let match: RegExpExecArray | null
-
-		while ((match = regex.exec(message)) !== null) {
-			if (match.index > lastIndex) {
-				parts.push({
-					type: 'text',
-					value: message.slice(lastIndex, match.index),
-				})
-			}
-
-			parts.push({
-				type: 'phone',
-				value: match[1]!,
-			})
-
-			lastIndex = regex.lastIndex
-		}
-
-		if (lastIndex < message.length) {
-			parts.push({
-				type: 'text',
-				value: message.slice(lastIndex),
-			})
-		}
-
-		return parts
-	}
+	import StatusPage from '../StatusPage/StatusPage.vue'
+	import { computed } from 'vue'
+	import type { RouteRecordRaw } from 'vue-router'
+	import { useThemeLocales } from '@/utils/theme'
+	import type { PageAriaRole } from '../types'
 
-	withDefaults(defineProps<{
+	const props = defineProps<{
 		pageTitle?: string
 		message?: string
 		code?: string
@@ -53,94 +15,51 @@
 		btnHref?: string
 		btnLink?: RouteRecordRaw | string
 		hideBtn?: boolean
-	}>(), {
-		pageTitle: undefined,
-		message: undefined,
-		code: undefined,
-		codeErrorText: locales.errorCodeText,
-		btnText: undefined,
-		btnLink: '/',
-		btnHref: undefined,
-		hideBtn: false,
-	})
+		headingLevel: 1 | 2 | 3 | 4 | 5 | 6
+		uniqueId?: string
+		role?: PageAriaRole
+	}>()
+
+	const { themeLocales } = useThemeLocales(locales)
+
+	// Utiliser les props de l'utilisateur en priorité, sinon les locales
+	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(() => themeLocales.value.src)
 </script>
 
 <template>
-	<PageContainer size="md">
-		<VCard
-			:elevation="0"
-			class="pa-6 pa-sm-16"
+	<StatusPage
+		:page-title="pageTitle"
+		:message="message"
+		:code="code"
+		:code-error-text="props.codeErrorText"
+		:btn-text="props.btnText"
+		:btn-href="props.btnHref"
+		:btn-link="props.btnLink"
+		:hide-btn="props.hideBtn"
+		:unique-id="props.uniqueId"
+		:role="props.role"
+	>
+		<template
+			v-if="src || $slots.illustration"
+			#illustration
 		>
-			<VRow class="max-width-none">
-				<VCol
-					:sm="$slots.illustration ? 6 : 12"
-					cols="12"
-					class="order-last order-sm-first text-center text-sm-left d-flex flex-column justify-center align-sm-start"
-				>
-					<div
-						v-if="code"
-						class="sy-code text-primary mb-4"
-					>
-						<span class="d-sr-only">{{ codeErrorText }}</span>
-						{{ code }}
-					</div>
-
-					<h1
-						v-if="pageTitle"
-						class="mb-2 font-weight-bold text-h5 mb-4"
-					>
-						{{ pageTitle }}
-					</h1>
-
-					<p v-if="message">
-						<template
-							v-for="(part, index) in splitMessage(message)"
-							:key="index"
-						>
-							<span v-if="part.type === 'text'">
-								{{ part.value }}
-							</span>
-							<a
-								v-else
-								:href="`tel:${part.value}`"
-							>
-								{{ part.value }}
-							</a>
-						</template>
-					</p>
-
-					<slot name="additional-content" />
-
-					<slot name="action">
-						<VBtn
-							v-if="!hideBtn && btnText && (btnLink || btnHref)"
-							:to="btnHref ? undefined : btnLink"
-							:href="btnHref"
-							color="primary"
-							class="mt-6"
-						>
-							{{ btnText }}
-						</VBtn>
-					</slot>
-				</VCol>
-
-				<VCol
-					v-if="$slots.illustration"
-					cols="12"
-					sm="6"
-					class="d-flex align-center justify-center"
+			<slot name="illustration">
+				<img
+					v-if="src"
+					:src="src"
+					alt=""
+					aria-hidden="true"
 				>
-					<slot name="illustration" />
-				</VCol>
-			</VRow>
-		</VCard>
-	</PageContainer>
+			</slot>
+		</template>
+	</StatusPage>
 </template>
 
 <style lang="scss" scoped>
-.sy-code {
-	font-size: 6rem;
-	line-height: 6rem;
-	font-weight: 400;
+img {
+	max-height: 290px;
 }
 </style>

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

@@ -1,15 +1,92 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as Stories from '../ErrorPage.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="ErrorPage"
+    iconSrc={AccessibilityIcon}
+>
+
+<div class="mt-2">
+    <p>Rapport d'audit manuel : <a href="/audits/ErrorPage.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/652" target="_blank" style={{color:'#0C41BD'}}>issue #652</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>, unique et descriptif — surchargeable via la prop <code>page-title</code></li>
+                <li><strong>Code d'erreur</strong> : la prop <code>codeErrorText</code> (par défaut <em>"Code d'erreur : "</em>) est masquée visuellement via <code>d-sr-only</code> pour contextualiser le code aux 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> et peuvent être surchargés via les props</li>
+            </ul>
+        </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/ErrorPage.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/652" target="_blank" style={{color:'#0C41BD'}}>issue #652</a>)</p>
-	</div>
+        <CriteriaCard icon="🏷️" title="Rôle et identifiant ARIA">
+            <ul>
+                <li><strong>Prop <code>role</code></strong> : permet de définir le rôle ARIA de la page d'erreur — deux valeurs acceptées : <code>main</code> ou <code>region</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>Usage recommandé</strong> : utiliser <code>role="main"</code> si la page d'erreur constitue le contenu principal, ou <code>role="region"</code> si elle est intégrée dans une section d'une mise en page plus complexe</li>
+            </ul>
+        </CriteriaCard>
+
+        <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>)</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>
+                <li><strong>Numéros de téléphone</strong> : si le message contient un numéro de téléphone, il est automatiquement transformé en lien <code>tel:</code> par <code>StatusPage</code></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>
+    </CriteriaSection>
+
+    <DemoSection title="État par défaut" componentName="ErrorPage">
+        <Story of={Stories.Default} />
+    </DemoSection>
+
+    <DemoSection title="Avec rôle et identifiant ARIA" componentName="ErrorPage">
+        <Story of={Stories.WithRole} />
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Les valeurs par défaut de <code>page-title</code>, <code>message</code> et <code>code</code> proviennent du thème — les surcharger uniquement si le contexte métier le nécessite</li>
+            <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>Personnaliser <code>code-error-text</code> si le contexte métier nécessite une formulation différente de <em>"Code d'erreur : "</em></li>
+            <li>Utiliser <code>role</code> pour préciser le rôle sémantique du composant dans son contexte d'intégration — préférer <code>role="main"</code> pour le contenu principal ou <code>role="region"</code> pour une section d'une mise en page plus complexe</li>
+            <li>Utiliser <code>unique-id</code> pour permettre à d'autres éléments de référencer la page d'erreur via <code>aria-labelledby</code> ou <code>aria-describedby</code></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>
+            <li><a href="https://www.w3.org/TR/wai-aria-1.2/#landmark_roles" target="_blank" style={{ color: '#0C41BD' }}>WAI-ARIA 1.2 – Landmark Roles</a></li>
+        </ul>
+    </ResourcesSection>
+
+</AccessibilityGuideLayout>