@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/StatusPage/StatusPage.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+	import type { RouteRecordRaw } from 'vue-router'
+	import PageContainer from '../PageContainer/PageContainer.vue'
+	import { useId } from 'vue'
+	import type { PageAriaRole } from '../types'
+	import SyHeading from '../SyHeading/SyHeading.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
+	}
+
+	withDefaults(defineProps<{
+		pageTitle?: string
+		message?: string
+		code?: string
+		codeErrorText?: string
+		btnText?: string
+		btnHref?: string
+		btnLink?: RouteRecordRaw | string
+		hideBtn?: boolean
+		uniqueId?: string
+		role?: PageAriaRole
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+	}>(), {
+		pageTitle: undefined,
+		message: undefined,
+		code: undefined,
+		codeErrorText: 'Code d\'erreur\xa0: ',
+		btnText: undefined,
+		btnLink: '/',
+		btnHref: undefined,
+		hideBtn: false,
+		uniqueId: useId(),
+		role: undefined,
+		headingLevel: 1,
+	})
+
+	const emit = defineEmits(['btn-click'])
+	const emitClickEvent = (): void => {
+		emit('btn-click')
+	}
+</script>
+
+<template>
+	<PageContainer
+		size="md"
+		:unique-id="uniqueId"
+		:role="role"
+		:aria-labelledby="role ? `${uniqueId}-title` : undefined"
+	>
+		<VCard
+			:elevation="0"
+			class="pa-6 pa-sm-16"
+		>
+			<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>
+
+					<SyHeading
+						v-if="pageTitle"
+						:id="role ? `${uniqueId}-title` : undefined"
+						:class="headingLevel === 1 ? 'mb-2 font-weight-bold text-h5 mb-4' : 'mb-2 font-weight-bold mb-4'"
+						:level="headingLevel"
+					>
+						{{ pageTitle }}
+					</SyHeading>
+
+					<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"
+							@click="emitClickEvent"
+						>
+							{{ btnText }}
+						</VBtn>
+					</slot>
+				</VCol>
+
+				<VCol
+					v-if="$slots.illustration"
+					cols="12"
+					sm="6"
+					class="d-flex align-center justify-center"
+				>
+					<slot name="illustration" />
+				</VCol>
+			</VRow>
+		</VCard>
+	</PageContainer>
+</template>
+
+<style lang="scss" scoped>
+.sy-code {
+	font-size: 6rem;
+	line-height: 6rem;
+	font-weight: 400;
+}
+</style>

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

@@ -0,0 +1,100 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as StatusPageStories from '../StatusPage.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
+
+<Meta of={StatusPageStories} />
+
+<AccessibilityGuideLayout
+    componentName="StatusPage"
+    iconSrc={AccessibilityIcon}
+>
+
+    <CriteriaSection>
+    		<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
+  <ul>
+    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h1, défini dans l’implémentation du composant.</li>
+      <code>&lt;StatusPage
+          :heading-level="1" /&gt; </code>
+    
+    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
+  </ul>
+</CriteriaCard>
+        <CriteriaCard icon="🔍" title="Structure sémantique">
+            <ul>
+                <li><strong>Titre de page</strong> : le titre est rendu dans une balise <code>h1</code>, unique et descriptif — lié au conteneur via <code>aria-labelledby</code> lorsque <code>role</code> est défini</li>
+                <li><strong>Code d'erreur</strong> : le code (ex. <code>500</code>, <code>404</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>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🔗" title="Liens et boutons">
+            <ul>
+                <li><strong>Numéros de téléphone</strong> : les numéros de 4 ou 10 chiffres (ex. <code>3646</code>) sont automatiquement transformés en liens <code>tel:</code> cliquables et vocalisables</li>
+                <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>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🖼️" title="Illustration">
+            <ul>
+                <li><strong>Image décorative</strong> : l'illustration doit avoir <code>alt=""</code> et <code>aria-hidden="true"</code> car elle est purement décorative</li>
+                <li><strong>Slot illustration</strong> : si une illustration personnalisée est fournie via le slot <code>#illustration</code>, les mêmes règles s'appliquent</li>
+                <li><strong>Mise en page adaptive</strong> : la colonne illustration n'est affichée que si le slot est fourni, évitant des zones vides</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📝" title="Contenu additionnel">
+            <ul>
+                <li><strong>Slot <code>additional-content</code></strong> : destiné à du contenu textuel complémentaire (ex. identifiant de support), doit rester lisible par les lecteurs d'écran</li>
+                <li><strong>Slot <code>action</code></strong> : permet d'ajouter des actions supplémentaires accessibles au clavier</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🏷️" title="Rôle et identifiant ARIA">
+            <ul>
+                <li><strong>Prop <code>role</code></strong> : deux valeurs acceptées: <code>main</code> ou <code>region</code> — propagé au <code>PageContainer</code></li>
+                <li><strong>Prop <code>uniqueId</code></strong> : identifiant unique du conteneur, généré automatiquement via <code>useId()</code> si non fourni — utilisé pour lier le <code>h1</code> au conteneur via <code>aria-labelledby</code> lorsque <code>role</code> est défini</li>
+                <li><strong>Liaison automatique</strong> : quand <code>role</code> est défini, <code>aria-labelledby</code> est automatiquement appliqué sur le <code>PageContainer</code> et l'<code>id</code> correspondant sur le <code>h1</code></li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection title="Avec illustration personnalisée" componentName="StatusPage">
+        <Story of={StatusPageStories.CustomIllustration} />
+    </DemoSection>
+
+    <DemoSection title="Avec rôle défini" componentName="StatusPage">
+        <Story of={StatusPageStories.WithRole} />
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Toujours renseigner <code>page-title</code> avec un titre clair et unique décrivant l'erreur</li>
+            <li>Personnaliser <code>code-error-text</code> si nécessaire pour un contexte métier spécifique</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>Le contenu dans <code>additional-content</code> doit être lisible par les lecteurs d'écran : éviter le contenu purement visuel</li>
+            <li>Utiliser la prop <code>role</code> pour définir le rôle ARIA approprié au contexte</li>
+            <li>Fournir un <code>uniqueId</code> explicite si nécessaire pour garantir une liaison correcte entre le conteneur et le titre</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>

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

@@ -0,0 +1,30 @@
+// @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 StatusPage from '../StatusPage.vue'
+
+// Scénario d’accessibilité : page d’erreur avec titre, message, code
+// et bouton de retour vers la page d’accueil.
+
+describe('StatusPage – accessibility (axe)', () => {
+	it('has no obvious axe violations with title, message and action button', async () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				pageTitle: 'Une erreur est survenue',
+				message: 'Un problème technique est survenu. Merci de réessayer plus tard.',
+				code: '500',
+				btnText: 'Retour à l\'accueil',
+				btnHref: 'https://www.ameli.fr',
+			},
+		})
+
+		const results = await axe(wrapper.element as HTMLElement)
+		assertNoA11yViolations(results, 'StatusPage – default page', {
+			ignoreRules: ['region'],
+		})
+	})
+})

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

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import StatusPage from '../StatusPage.vue'
+
+describe('StatusPage', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				pageTitle: 'Something went wrong',
+				message: 'Error message',
+			},
+		})
+
+		expect(wrapper.text()).toContain('Something went wrong')
+		expect(wrapper.text()).toContain('Error message')
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('renders correctly with undefined route', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				code: '501',
+				pageTitle: 'Error',
+				message: 'Error message',
+				btnText: 'Go to...',
+				btnHref: 'https://google.com',
+			},
+		})
+
+		expect(wrapper.find('a').exists()).toBe(true)
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('uses href without router navigation when only btnHref is provided', () => {
+		const wrapper = mount(StatusPage, {
+			props: {
+				headingLevel: 1,
+				code: '401',
+				pageTitle: 'Auth error',
+				message: 'You are not authorized',
+				btnText: 'Logout',
+				btnHref: 'https://google.com',
+			},
+		})
+
+		const link = wrapper.find('a')
+		expect(link.exists()).toBe(true)
+		expect(link.attributes('href')).toBe('https://google.com')
+		expect(link.attributes('to')).toBeUndefined()
+	})
+})

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

@@ -0,0 +1,272 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`StatusPage > renders correctly 1`] = `
+<div class="
+  d-flex
+  justify-center
+  px-14
+  py-10
+  vd-page-container
+">
+  <div
+    class="
+      bg-transparent
+      v-sheet
+      v-theme--light
+    "
+    style="width: 800px;"
+  >
+    <div class="
+      elevation-0
+      pa-6
+      pa-sm-16
+      v-card
+      v-card--density-default
+      v-card--variant-elevated
+      v-theme--light
+    ">
+      <!---->
+      <div class="v-card__loader">
+        <div
+          aria-hidden="true"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          class="
+            v-locale--is-ltr
+            v-progress-linear
+            v-theme--light
+          "
+          role="progressbar"
+          style="
+            top: 0px;
+            height: 0px;
+            --v-progress-linear-height: 2px;
+          "
+        >
+          <!---->
+          <div
+            class="v-progress-linear__background"
+            style="opacity: NaN;"
+          ></div>
+          <div
+            class="v-progress-linear__buffer"
+            style="
+              opacity: NaN;
+              width: 0%;
+            "
+          ></div>
+          <transition-stub
+            appear="false"
+            css="true"
+            name="fade-transition"
+            persisted="false"
+          >
+            <div class="v-progress-linear__indeterminate">
+              <div class="
+                long
+                v-progress-linear__indeterminate
+              "></div>
+              <div class="
+                short
+                v-progress-linear__indeterminate
+              "></div>
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <!---->
+      <!---->
+      <div class="
+        max-width-none
+        v-row
+      ">
+        <div class="
+          align-sm-start
+          d-flex
+          flex-column
+          justify-center
+          order-last
+          order-sm-first
+          text-center
+          text-sm-left
+          v-col-12
+          v-col-sm-12
+        ">
+          <!-- v-if -->
+          <h1 class="
+            font-weight-bold
+            mb-2
+            mb-4
+            sy-heading
+            text-h5
+          ">
+            Something went wrong
+          </h1>
+          <p>
+            <span>
+              Error message
+            </span>
+          </p>
+          <!-- v-if -->
+        </div>
+        <!-- v-if -->
+      </div>
+      <!---->
+      <!---->
+      <span class="v-card__underlay"></span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`StatusPage > renders correctly with undefined route 1`] = `
+<div class="
+  d-flex
+  justify-center
+  px-14
+  py-10
+  vd-page-container
+">
+  <div
+    class="
+      bg-transparent
+      v-sheet
+      v-theme--light
+    "
+    style="width: 800px;"
+  >
+    <div class="
+      elevation-0
+      pa-6
+      pa-sm-16
+      v-card
+      v-card--density-default
+      v-card--variant-elevated
+      v-theme--light
+    ">
+      <!---->
+      <div class="v-card__loader">
+        <div
+          aria-hidden="true"
+          aria-valuemax="100"
+          aria-valuemin="0"
+          class="
+            v-locale--is-ltr
+            v-progress-linear
+            v-theme--light
+          "
+          role="progressbar"
+          style="
+            top: 0px;
+            height: 0px;
+            --v-progress-linear-height: 2px;
+          "
+        >
+          <!---->
+          <div
+            class="v-progress-linear__background"
+            style="opacity: NaN;"
+          ></div>
+          <div
+            class="v-progress-linear__buffer"
+            style="
+              opacity: NaN;
+              width: 0%;
+            "
+          ></div>
+          <transition-stub
+            appear="false"
+            css="true"
+            name="fade-transition"
+            persisted="false"
+          >
+            <div class="v-progress-linear__indeterminate">
+              <div class="
+                long
+                v-progress-linear__indeterminate
+              "></div>
+              <div class="
+                short
+                v-progress-linear__indeterminate
+              "></div>
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <!---->
+      <!---->
+      <div class="
+        max-width-none
+        v-row
+      ">
+        <div class="
+          align-sm-start
+          d-flex
+          flex-column
+          justify-center
+          order-last
+          order-sm-first
+          text-center
+          text-sm-left
+          v-col-12
+          v-col-sm-12
+        ">
+          <div class="
+            mb-4
+            sy-code
+            text-primary
+          ">
+            <span class="d-sr-only">
+              Code d'erreur&nbsp;:
+            </span>
+            501
+          </div>
+          <h1 class="
+            font-weight-bold
+            mb-2
+            mb-4
+            sy-heading
+            text-h5
+          ">
+            Error
+          </h1>
+          <p>
+            <span>
+              Error message
+            </span>
+          </p>
+          <a
+            class="
+              bg-primary
+              mt-6
+              v-btn
+              v-btn--density-default
+              v-btn--elevated
+              v-btn--size-default
+              v-btn--variant-elevated
+              v-theme--light
+            "
+            href="https://google.com"
+          ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            
+          <!----><span
+            class="v-btn__content"
+            data-no-activator=""
+          >Go to...</span>
+            
+          <!---->
+            
+          <!---->
+          </a>
+        </div>
+        <!-- v-if -->
+      </div>
+      <!---->
+      <!---->
+      <span class="v-card__underlay"></span>
+    </div>
+  </div>
+</div>
+`;