@cnamts/synapse 1.0.20 → 1.0.22

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

@@ -26,6 +26,7 @@ describe('HeaderNavigationBar', () => {
 				},
 			},
 			props: {
+				headingLevelTitle: 1,
 				items: [
 					{
 						label: 'Home',
@@ -68,6 +69,7 @@ describe('HeaderNavigationBar', () => {
 				},
 			},
 			props: {
+				headingLevelTitle: 1,
 				items: [
 					{
 						label: 'Home',
@@ -102,6 +104,7 @@ describe('HeaderNavigationBar', () => {
 				},
 			},
 			props: {
+				headingLevelTitle: 1,
 				items: [
 					{
 						label: 'Home',

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.mdx

@@ -7,7 +7,7 @@ import * as MaintenancePageStories from "./MaintenancePage.stories";
 <div className="header">
   <h1>MaintenancePage</h1>
   <p>Le composant `MaintenancePage` permet d'afficher une page de maintenance.
-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={MaintenancePageStories.Default} />

package/src/components/MaintenancePage/MaintenancePage.vue

@@ -1,24 +1,59 @@
 <script setup lang="ts">
+	import { computed } from 'vue'
+	import StatusPage from '../StatusPage/StatusPage.vue'
 	import { locales } from './locales'
-	import ErrorPage from '../ErrorPage/ErrorPage.vue'
+	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>
-	<ErrorPage
-		:page-title="locales.pageTitle"
-		:message="locales.message"
+	<StatusPage
+		:heading-level="headingLevel"
+		:unique-id="props.uniqueId"
+		:page-title="pageTitle"
+		:message="message"
+		:code="code"
 		:hide-btn="true"
 	>
-		<template #illustration>
+		<template
+			v-if="src || $slots.illustration"
+			#illustration
+		>
 			<slot name="illustration">
 				<img
-					src="./assets/maintenance.svg"
+					v-if="src"
+					:src="src"
 					alt=""
 					aria-hidden="true"
 				>
 			</slot>
 		</template>
-	</ErrorPage>
+	</StatusPage>
 </template>
 
 <style lang="scss" scoped>

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

@@ -1,15 +1,72 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as Stories from '../MaintenancePage.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="MaintenancePage"
+    iconSrc={AccessibilityIcon}
+>
+
+<div class="mt-2">
+    <p>Rapport d'audit manuel : <a href="/audits/MaintenancePage.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/653" target="_blank" style={{color:'#0C41BD'}}>issue #653</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 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> <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>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/MaintenancePage.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/653" target="_blank" style={{color:'#0C41BD'}}>issue #653</a>)</p>
-	</div>
+        <CriteriaCard icon="🔗" title="Navigation">
+            <ul>
+                <li><strong>Bouton masqué par défaut</strong> : la prop <code>hide-btn</code> est fixée à <code>true</code> — la page de maintenance ne propose pas de navigation vers une autre page</li>
+                <li><strong>Pas de lien de retour</strong> : intentionnel car l'application est indisponible, évitant ainsi de rediriger vers une page inaccessible</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>
+
+    <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>Ne pas afficher de bouton de retour (<code>hide-btn="true"</code> par défaut) — l'application étant indisponible, un lien de retour serait inutile voire trompeur</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>
+        </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>