@cnamts/synapse 1.0.20 → 1.0.21

package/src/components/DeclarationAccessibilityPage/DeclarationAccessibilityPage.vue

@@ -0,0 +1,428 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+
+	interface VerifiedPage {
+		name: string
+		url?: string
+	}
+
+	type EvaluationMethod = 'auto-evaluation' | 'audit-interne' | 'audit-externe'
+
+	interface DeclarationAccessibilityPageProps {
+		entityName: string
+		schemaUrl?: string
+		schemaUrlLabel?: string
+		actionsRealisedUrl?: string
+		actionsRealisedUrlLabel?: string
+		planActionsUrl?: string
+		planActionsUrlLabel?: string
+		siteName: string
+		siteUrl: string
+		rgaaVersion?: string
+		auditEntity?: string
+		auditDate?: string
+		evaluationMethod?: EvaluationMethod
+		overallComplianceRate?: number | null
+		averageComplianceRate?: number | null
+		auditGridUrl?: string
+		contactEmail: string
+		contactPhone?: string
+		nonConformities?: string[]
+		exemptions?: string[]
+		nonObligatoryContents?: string[]
+		declarationDate?: string
+		updateDate?: string
+		technologies?: string[]
+		testEnvironments?: string[]
+		accessibilityTools?: string[]
+		verifiedPages?: VerifiedPage[]
+	}
+
+	const props = withDefaults(defineProps<DeclarationAccessibilityPageProps>(), {
+		schemaUrl: undefined,
+		schemaUrlLabel: undefined,
+		actionsRealisedUrl: undefined,
+		actionsRealisedUrlLabel: undefined,
+		planActionsUrl: undefined,
+		planActionsUrlLabel: undefined,
+		rgaaVersion: '4',
+		auditEntity: undefined,
+		auditDate: undefined,
+		evaluationMethod: 'auto-evaluation',
+		overallComplianceRate: null,
+		averageComplianceRate: null,
+		auditGridUrl: undefined,
+		contactPhone: undefined,
+		nonConformities: () => [],
+		exemptions: () => [],
+		nonObligatoryContents: () => [],
+		technologies: () => [],
+		testEnvironments: () => [],
+		accessibilityTools: () => [],
+		verifiedPages: () => [],
+		declarationDate: undefined,
+		updateDate: undefined,
+	})
+
+	const hasAccessibilityPlan = computed(
+		() => !!props.schemaUrl || !!props.actionsRealisedUrl || !!props.planActionsUrl,
+	)
+
+	const hasItems = <T>(items?: T[] | null): items is T[] =>
+		Array.isArray(items) && items.length > 0
+
+	const formatDate = (date?: string) => {
+		if (!date) {
+			return ''
+		}
+
+		const parsedDate = new Date(date)
+		if (Number.isNaN(parsedDate.getTime())) {
+			return date
+		}
+
+		return new Intl.DateTimeFormat('fr-FR').format(parsedDate)
+	}
+
+	const conformityLabel = computed(() => {
+		if (props.averageComplianceRate === 100) {
+			return 'totalement conforme'
+		}
+
+		if (props.averageComplianceRate && props.averageComplianceRate >= 50) {
+			return 'partiellement conforme'
+		}
+
+		return 'non conforme'
+	})
+
+	const evaluationMethodLabel = computed(() => {
+		if (props.evaluationMethod === 'audit-interne') {
+			return 'un audit interne'
+		}
+
+		if (props.evaluationMethod === 'audit-externe') {
+			return 'un audit externe'
+		}
+
+		return 'une auto-évaluation'
+	})
+
+	const phoneHref = computed(() => {
+		if (!props.contactPhone) {
+			return undefined
+		}
+
+		const normalized = props.contactPhone.replace(/\s+/g, '')
+		if (!normalized) {
+			return undefined
+		}
+
+		return `tel:${normalized}`
+	})
+
+	const hasTestResults = computed(
+		() =>
+			!!props.auditEntity
+			|| props.overallComplianceRate !== null
+			|| props.averageComplianceRate !== null
+			|| !!props.auditGridUrl,
+	)
+</script>
+
+<template>
+	<div class="accessibility-statement">
+		<section class="engagement">
+			<h2>Engagement d'accessibilité</h2>
+			<p>
+				<strong>{{ entityName }}</strong> s'engage à rendre ses sites internet, intranet, extranet et ses progiciels accessibles (et ses applications mobiles et mobilier urbain numérique) conformément à l'article 47 de la loi n°2005-102 du 11 février 2005.
+			</p>
+
+			<template v-if="hasAccessibilityPlan">
+				<p>À cette fin, <strong>{{ entityName }}</strong> met en œuvre la stratégie et les actions suivantes :</p>
+
+				<ul>
+					<li v-if="schemaUrl">
+						<a :href="schemaUrl">{{ schemaUrlLabel ?? 'Schéma pluriannuel de mise en accessibilité' }}</a> ;
+					</li>
+					<li v-if="actionsRealisedUrl">
+						<a :href="actionsRealisedUrl">{{ actionsRealisedUrlLabel ?? 'Actions réalisées' }}</a> ;
+					</li>
+					<li v-if="planActionsUrl">
+						<a :href="planActionsUrl">{{ planActionsUrlLabel ?? 'Plan d\'actions' }}</a>.
+					</li>
+				</ul>
+			</template>
+
+			<p>
+				Cette déclaration d'accessibilité s'applique à <a
+					:href="siteUrl"
+					:title="siteUrl"
+				>{{ siteName }}</a>.
+			</p>
+		</section>
+
+		<section class="conformity">
+			<h2>État de conformité</h2>
+			<p>
+				<a :href="siteUrl">{{ siteName }}</a> est <strong>{{ conformityLabel }}</strong> au référentiel général d'amélioration de l'accessibilité (RGAA), version {{ rgaaVersion }},
+				<span v-if="overallComplianceRate === null">
+					en raison d'une absence de réalisation d'audit.
+				</span>
+				<span v-else>
+					en raison des non-conformités et des dérogations énumérées ci-dessous.
+				</span>
+			</p>
+		</section>
+
+		<section
+			v-if="hasTestResults"
+			class="test-results"
+		>
+			<h2>Résultats des tests</h2>
+			<p v-if="auditEntity">
+				L'audit de conformité réalisé par {{ auditEntity }}
+				<span v-if="auditDate"> le {{ formatDate(auditDate) }}</span>
+				révèle que :
+			</p>
+			<p v-else>
+				Les tests de conformité réalisés conformément au RGAA version {{ rgaaVersion }} révèlent que :
+			</p>
+			<ul>
+				<li v-if="overallComplianceRate !== null">
+					{{ overallComplianceRate }}% des critères du RGAA version {{ rgaaVersion }} sont respectés ;
+				</li>
+				<li v-if="averageComplianceRate !== null">
+					Le taux moyen de conformité du site s'élève à {{ averageComplianceRate }}% ;
+				</li>
+				<li v-if="auditGridUrl">
+					<a :href="auditGridUrl">Accéder à la grille d'audit RGAA</a> pour télécharger la grille d'audit.
+				</li>
+			</ul>
+		</section>
+
+		<section class="non-accessible-content">
+			<h2 v-if="hasItems(nonConformities)">
+				Contenus non accessibles
+			</h2>
+
+			<div
+				v-if="hasItems(nonConformities)"
+				class="non-conformities"
+			>
+				<h3>Non-conformités</h3>
+				<ul>
+					<li
+						v-for="(item, index) in nonConformities"
+						:key="`non-conformity-${index}`"
+					>
+						{{ item }}
+					</li>
+				</ul>
+			</div>
+
+			<div
+				v-if="hasItems(exemptions)"
+				class="exemptions"
+			>
+				<h3>Dérogations pour charge disproportionnée</h3>
+				<ul>
+					<li
+						v-for="(item, index) in exemptions"
+						:key="`exemption-${index}`"
+					>
+						{{ item }}
+					</li>
+				</ul>
+			</div>
+
+			<div
+				v-if="hasItems(nonObligatoryContents)"
+				class="non-obligatory-contents"
+			>
+				<h3>Contenus non soumis à l'obligation d'accessibilité</h3>
+				<ul>
+					<li
+						v-for="(item, index) in nonObligatoryContents"
+						:key="`non-obligatory-${index}`"
+					>
+						{{ item }}
+					</li>
+				</ul>
+			</div>
+		</section>
+
+		<section
+			v-if="declarationDate || hasItems(technologies) || hasItems(testEnvironments) || hasItems(accessibilityTools) || hasItems(verifiedPages)"
+			class="declaration-establishment"
+		>
+			<h2>Établissement de cette déclaration d'accessibilité</h2>
+
+			<p v-if="declarationDate || updateDate">
+				<span v-if="declarationDate">
+					Cette déclaration a été établie le {{ formatDate(declarationDate) }} à partir de {{ evaluationMethodLabel }} réalisée conformément au référentiel RGAA version {{ rgaaVersion }}.
+				</span>
+				<span v-else>
+					Cette déclaration a été établie à partir de {{ evaluationMethodLabel }} réalisée conformément au référentiel RGAA version {{ rgaaVersion }}.
+				</span>
+				<span v-if="updateDate"> Elle a été mise à jour le {{ formatDate(updateDate) }}.</span>
+			</p>
+
+			<div
+				v-if="hasItems(technologies)"
+				class="technologies"
+			>
+				<h3>Technologies utilisées pour la réalisation du site</h3>
+				<ul>
+					<li
+						v-for="(item, index) in technologies"
+						:key="`technology-${index}`"
+					>
+						{{ item }}
+					</li>
+				</ul>
+			</div>
+
+			<div
+				v-if="hasItems(testEnvironments)"
+				class="test-environments"
+			>
+				<h3>Environnement de test</h3>
+				<p>Les vérifications de restitution de contenus ont été réalisées sur la base de la combinaison fournie par la base de référence du RGAA, avec les versions suivantes :</p>
+				<ul>
+					<li
+						v-for="(item, index) in testEnvironments"
+						:key="`environment-${index}`"
+					>
+						{{ item }}
+					</li>
+				</ul>
+			</div>
+
+			<div
+				v-if="hasItems(accessibilityTools)"
+				class="accessibility-tools"
+			>
+				<h3>Outils pour évaluer l'accessibilité</h3>
+				<ul>
+					<li
+						v-for="(item, index) in accessibilityTools"
+						:key="`tool-${index}`"
+					>
+						{{ item }}
+					</li>
+				</ul>
+			</div>
+
+			<div
+				v-if="hasItems(verifiedPages)"
+				class="verified-pages"
+			>
+				<h3>Pages du site ayant fait l'objet de la vérification de conformité</h3>
+				<ul>
+					<li
+						v-for="(item, index) in verifiedPages"
+						:key="`page-${index}`"
+					>
+						<span v-if="item.url"><a :href="item.url">{{ item.name }}</a></span>
+						<span v-else>{{ item.name }}</span>
+					</li>
+				</ul>
+			</div>
+		</section>
+
+		<section class="contact-information">
+			<h2>Retour d'information et contact</h2>
+			<p>
+				Si vous n'arrivez pas à accéder à un contenu ou à un service, vous pouvez contacter le ou la responsable de
+				<strong>{{ entityName }}</strong> pour être orienté vers une alternative accessible ou obtenir le contenu sous une autre forme.
+			</p>
+
+			<ul>
+				<li>
+					Envoyer un message à <a :href="`mailto:${contactEmail}`">{{ contactEmail }}</a>
+				</li>
+				<li v-if="contactPhone">
+					Contacter par téléphone : <a :href="phoneHref">{{ contactPhone }}</a>
+				</li>
+			</ul>
+		</section>
+
+		<section class="recourse">
+			<h2>Voies de recours</h2>
+			<p>
+				Si vous constatez un défaut d'accessibilité vous empêchant d'accéder à un contenu ou une
+				fonctionnalité du site, que vous nous le signalez et que vous ne parvenez pas à obtenir une réponse de notre part,
+				vous êtes en droit de faire parvenir vos doléances ou une demande de saisine au Défenseur des droits.
+			</p>
+
+			<p>Plusieurs moyens sont à votre disposition :</p>
+
+			<ul>
+				<li><a href="https://formulaire.defenseurdesdroits.fr/formulaire_saisine/">Écrire un message au Défenseur des droits</a></li>
+				<li><a href="https://www.defenseurdesdroits.fr/carte-des-delegues">Contacter le délégué du Défenseur des droits dans votre région</a></li>
+				<li>
+					Envoyer un courrier par la poste (gratuit, ne pas mettre de timbre) :
+					<address>
+						Défenseur des droits<br>
+						Libre réponse 71120<br>
+						75342 Paris CEDEX 07
+					</address>
+				</li>
+			</ul>
+		</section>
+	</div>
+</template>
+
+<style scoped>
+.accessibility-statement {
+	font-family: var(--v-font-family);
+	color: var(--v-text-color);
+	line-height: 1.5;
+	padding: 1rem;
+}
+
+.accessibility-statement section {
+	margin-bottom: 2rem;
+}
+
+.accessibility-statement h2 {
+	margin-top: 1.5rem;
+	margin-bottom: 1rem;
+	font-weight: 600;
+}
+
+.accessibility-statement ul {
+	list-style-type: disc;
+	margin-left: 1.5rem;
+	margin-bottom: 1rem;
+}
+
+.accessibility-statement ul ul {
+	margin-top: 0.5rem;
+}
+
+.accessibility-statement address {
+	margin-top: 1rem;
+	font-style: normal;
+}
+
+.accessibility-statement a {
+	color: rgb(var(--v-theme-primary));
+	text-decoration: underline;
+}
+
+.accessibility-statement a:hover {
+	text-decoration: none;
+}
+
+.accessibility-statement p {
+	margin-bottom: 0.75rem;
+}
+
+.accessibility-statement h3 {
+	margin-top: 1.25rem;
+	margin-bottom: 0.75rem;
+	font-weight: 500;
+}
+</style>

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

@@ -0,0 +1,75 @@
+import { Meta, Primary } from '@storybook/blocks'
+import * as Stories from '../DeclarationAccessibilityPage.stories.ts'
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg'
+import {
+  AccessibilityGuideLayout,
+  CriteriaSection,
+  CriteriaCard,
+  DemoSection,
+  BestPracticesSection,
+  ResourcesSection,
+  AuditSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx'
+
+<Meta of={Stories} />
+
+<AccessibilityGuideLayout
+  componentName="DeclarationAccessibilityPage"
+  iconSrc={AccessibilityIcon}
+>
+  <CriteriaSection>
+    <CriteriaCard icon="📑" title="Structure et sémantique">
+      <ul>
+        <li>Sections structurées avec titres (<code>h2</code>) pour engagement, conformité, résultats de tests, contenus non accessibles, déclaration, contacts et recours.</li>
+        <li>Liens descriptifs vers le site, le schéma, les actions, le plan et la grille d'audit.</li>
+        <li>Listes ordonnées/non ordonnées pour les non-conformités, exemptions, contenus non obligatoires, technologies, environnements et outils.</li>
+        <li>Contact présenté sous forme de liste ; téléphone généré en <code>tel:</code> via <code>contactPhone</code> (espaces retirés).</li>
+        <li>Dates affichées au format localisé (FR) à partir de valeurs ISO recommandées.</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="🧭" title="Visibilité conditionnelle">
+      <ul>
+        <li>Affichage conditionnel uniquement si des données sont fournies (plans d'actions, résultats, listes) pour éviter le contenu vide.</li>
+        <li>Étiquettes de conformité dérivées des taux fournis : totalement, partiellement ou non conforme.</li>
+        <li>Pages vérifiées listées avec liens cliquables quand l'URL est fournie.</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📣" title="Information utilisateur">
+      <ul>
+        <li>Voies de recours complètes (Défenseur des droits) avec liens et adresse postale.</li>
+        <li>Contact accessible : mailto obligatoire et téléphone optionnel.</li>
+        <li>Méthode d'évaluation explicite (auto, audit interne/externe) et taux de conformité.</li>
+      </ul>
+    </CriteriaCard>
+  </CriteriaSection>
+
+  <DemoSection componentName="DeclarationAccessibilityPage">
+    <Primary />
+  </DemoSection>
+
+  <BestPracticesSection>
+    <ul>
+      <li>Fournir au minimum <code>entityName</code>, <code>siteName</code>, <code>siteUrl</code>, <code>contactEmail</code>.</li>
+      <li>Préférer des URLs publiques et pérennes pour le schéma, les actions, le plan et la grille d'audit.</li>
+      <li>Entrer les dates en ISO (<code>YYYY-MM-DD</code>) pour un formatage fiable.</li>
+      <li>Renseigner les listes seulement lorsqu'elles sont disponibles (non-conformités, exemptions, contenus non obligatoires, technologies, environnements, outils, pages vérifiées).</li>
+      <li>Utiliser un numéro lisible (<code>contactPhone</code>) pour générer un lien téléphonique valide.</li>
+    </ul>
+  </BestPracticesSection>
+
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://accessibilite.numerique.gouv.fr/methodologie/declaration-obligatoire/" target="_blank" rel="noopener noreferrer">Modèle de déclaration d’accessibilité (RGAA)</a></li>
+      <li><a href="https://www.w3.org/WAI/policies/" target="_blank" rel="noopener noreferrer">W3C – Accessibility Statements</a></li>
+    </ul>
+  </ResourcesSection>
+
+  <AuditSection>
+    <p>Rapport d’audit manuel : <em>en cours de réalisation</em>.</p>
+    <p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>
+      Correctifs associés : à venir (sera référencé dès publication de l’audit officiel).
+    </p>
+  </AuditSection>
+</AccessibilityGuideLayout>

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

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+
+import { describe, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { axe } from 'vitest-axe'
+import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
+import DeclarationAccessibilityPage from '../DeclarationAccessibilityPage.vue'
+
+describe('DeclarationAccessibilityPage – accessibility (axe)', () => {
+	it('has no obvious axe violations with full data', async () => {
+		const wrapper = mount(DeclarationAccessibilityPage, {
+			props: {
+				entityName: 'Assurance Maladie',
+				siteName: 'ameli.fr',
+				siteUrl: 'https://www.ameli.fr',
+				contactEmail: 'accessibilite@ameli.fr',
+				contactPhone: '01 23 45 67 89',
+				schemaUrl: '#schema',
+				schemaUrlLabel: 'Schéma pluriannuel 2024-2026',
+				actionsRealisedUrl: '#actions',
+				actionsRealisedUrlLabel: 'Actions réalisées en 2024',
+				planActionsUrl: '#plan',
+				planActionsUrlLabel: 'Plan d\'actions 2025',
+				auditEntity: 'Atalan',
+				auditDate: '2024-06-15',
+				auditGridUrl: '#audit',
+				overallComplianceRate: 95,
+				averageComplianceRate: 82,
+				nonConformities: [
+					'Certaines images informatives n\'ont pas d\'alternative textuelle.',
+				],
+				exemptions: ['Les documents PDF archivés antérieurs à 2020.'],
+				nonObligatoryContents: ['Contenus tiers embarqués.'],
+				technologies: ['HTML5', 'CSS3', 'Vue.js'],
+				testEnvironments: ['Firefox 115 avec NVDA 2023.1'],
+				accessibilityTools: ['Axe DevTools', 'Wave'],
+				verifiedPages: [
+					{ name: 'Accueil', url: 'https://www.ameli.fr' },
+					{ name: 'Contact' },
+				],
+				declarationDate: '2024-06-20',
+				updateDate: '2025-01-10',
+			},
+		})
+
+		await wrapper.vm.$nextTick()
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'DeclarationAccessibilityPage – full data', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DeclarationAccessibilityPage from '../DeclarationAccessibilityPage.vue'
+
+const minimalProps = {
+	entityName: 'Assurance Maladie',
+	siteName: 'ameli.fr',
+	siteUrl: 'https://www.ameli.fr',
+	contactEmail: 'accessibilite@ameli.fr',
+}
+
+describe('DeclarationAccessibilityPage', () => {
+	it('renders required sections with minimal props', () => {
+		const wrapper = mount(DeclarationAccessibilityPage, {
+			props: minimalProps,
+		})
+
+		expect(wrapper.text()).toContain(minimalProps.entityName)
+		expect(wrapper.text()).toContain(minimalProps.siteName)
+		expect(wrapper.find('.contact-information').text()).toContain(minimalProps.contactEmail)
+
+		const siteLink = wrapper.get('.engagement a[href]')
+		expect(siteLink.attributes('href')).toBe(minimalProps.siteUrl)
+		expect(wrapper.text()).toContain('non conforme')
+	})
+
+	it('displays optional plan, tests results and non-accessible content when provided', () => {
+		const wrapper = mount(DeclarationAccessibilityPage, {
+			props: {
+				...minimalProps,
+				schemaUrl: '#schema',
+				actionsRealisedUrl: '#actions',
+				planActionsUrl: '#plan',
+				auditEntity: 'Atalan',
+				auditDate: '2024-06-15',
+				overallComplianceRate: 95,
+				auditGridUrl: '#audit',
+				nonConformities: ['Formulaire sans label', 'Images sans alternative textuelle'],
+				exemptions: ['PDF archivés non accessibles'],
+				nonObligatoryContents: ['Contenus tiers'],
+				technologies: ['HTML', 'Vue.js'],
+				testEnvironments: ['Firefox 115 avec NVDA 2023.1'],
+				accessibilityTools: ['Axe DevTools'],
+				verifiedPages: [
+					{ name: 'Accueil', url: 'https://www.ameli.fr' },
+					{ name: 'Contact' },
+				],
+			},
+		})
+
+		expect(wrapper.find('.engagement ul').exists()).toBe(true)
+		expect(wrapper.find('.test-results').exists()).toBe(true)
+		expect(wrapper.findAll('.non-conformities li')).toHaveLength(2)
+		expect(wrapper.find('.exemptions').exists()).toBe(true)
+		expect(wrapper.find('.non-obligatory-contents').exists()).toBe(true)
+		expect(wrapper.find('.declaration-establishment').exists()).toBe(true)
+		expect(wrapper.find('.verified-pages').exists()).toBe(true)
+	})
+})

package/src/components/DiacriticPicker/DiacriticPicker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { computed, nextTick, onMounted, ref } from 'vue'
+	import { computed, nextTick, onMounted, onUpdated, ref } from 'vue'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { config } from './config'
 	import { locales } from './locales'
@@ -74,6 +74,18 @@
 		return wrapperRef.value?.querySelector('input, textarea') ?? null
 	}
 
+	function ensureInputAccessibilityLabel() {
+		const input = getNativeInput()
+		if (!input) return
+
+		const hasAriaLabel = input.hasAttribute('aria-label')
+		const hasLabelledBy = input.hasAttribute('aria-labelledby')
+
+		if (!hasAriaLabel && !hasLabelledBy) {
+			input.setAttribute('aria-label', props.inputAriaLabel)
+		}
+	}
+
 	function insertChar(char: string) {
 		const el = getNativeInput()
 		if (!el) return
@@ -146,6 +158,13 @@
 	onMounted(() => {
 		nextTick(() => {
 			updateInputMessageHeight()
+			ensureInputAccessibilityLabel()
+		})
+	})
+
+	onUpdated(() => {
+		nextTick(() => {
+			ensureInputAccessibilityLabel()
 		})
 	})
 </script>

package/src/components/ErrorPage/ErrorPage.mdx

@@ -1,23 +1,13 @@
-import {Controls, Canvas, Meta, Source} from '@storybook/blocks';
-
-import * as ErrorPageStories from './ErrorPage.stories'
+import { Controls, Canvas, Meta, Source } from "@storybook/blocks";
+import '../../stories/styles/shared.css';
+import * as ErrorPageStories from "./ErrorPage.stories";
 
 <Meta of={ErrorPageStories} />
-import '../../stories/styles/shared.css';
 
 <div className="header">
   <h1>ErrorPage</h1>
-  <p>Le composant `ErrorPage` sert à afficher une page d'erreur.</p>
+  <p>Le composant `ErrorPage` permet d'afficher une page d'error.
+Il est basé sur le composant `StatusPage` du design system.</p>
 </div>
 
-<Canvas of={ErrorPageStories.Default} />
-
-# API
-
-<Controls of={ErrorPageStories.Default} />
-
-## Lien de retour
-
-Vous pouvez mettre un lien vers une autre page avec les props `btn-text` et `btn-link` ou `btn-href`.
-
-<Canvas of={ErrorPageStories.WithLink} />
+<Canvas of={ErrorPageStories.Default} />