@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/ErrorPage/locales.ts

@@ -1,5 +1,23 @@
+import imgUrlAp from './assets/error-ap.svg'
+
 export const locales = {
-	errorCodeText: 'Code d\'erreur\xa0: ',
-	supportIdMessage: 'Votre identifiant de support\xa0:',
-	btnText: 'Retour à l’accueil',
+	default: {
+		pageTitle: 'Une erreur est survenue',
+		message: 'Une erreur est survenue de notre côté, veuillez réessayer plus tard.',
+		src: undefined,
+		code: '500',
+	},
+	cnam: {
+		pageTitle: 'Une erreur est survenue',
+		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',
+		src: undefined,
+		code: '500',
+	},
+	ap: {
+		pageTitle: 'Les services amelipro sont indisponibles !',
+		message:
+      'Nous mettons en œuvre les mesures nécessaires pour rétablir rapidement votre accès. Veuillez nous excuser pour la gêne occasionnée.',
+		src: imgUrlAp,
+		code: '500',
+	},
 }

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

@@ -6,23 +6,15 @@ import { axe } from 'vitest-axe'
 import { assertNoA11yViolations } from '@tests/unit/accessibility/axeUtils'
 import ErrorPage from '../ErrorPage.vue'
 
-// Scénario d’accessibilité : page d’erreur avec titre, message, code
-// et bouton de retour vers la page d’accueil.
+// Scénario d’accessibilité : page d'erreur basée sur StatusPage,
+// sans bouton d’action, avec illustration décorative masquée.
 
 describe('ErrorPage – accessibility (axe)', () => {
-	it('has no obvious axe violations with title, message and action button', async () => {
-		const wrapper = mount(ErrorPage, {
-			props: {
-				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',
-			},
-		})
+	it('has no obvious axe violations in default state', async () => {
+		const wrapper = mount(ErrorPage)
 
 		const results = await axe(wrapper.element as HTMLElement)
-		assertNoA11yViolations(results, 'ErrorPage – default error page', {
+		assertNoA11yViolations(results, 'ErrorPage – default state', {
 			ignoreRules: ['region'],
 		})
 	})

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

@@ -1,50 +1,11 @@
 import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import ErrorPage from '../ErrorPage.vue'
 
 describe('ErrorPage', () => {
 	it('renders correctly', () => {
-		const wrapper = mount(ErrorPage, {
-			props: {
-				pageTitle: 'Something went wrong',
-				message: 'Error message',
-			},
-		})
+		const wrapper = shallowMount(ErrorPage)
 
-		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(ErrorPage, {
-			props: {
-				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(ErrorPage, {
-			props: {
-				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/ErrorPage/tests/__snapshots__/ErrorPage.spec.ts.snap

@@ -1,270 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ErrorPage > 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
-            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[`ErrorPage > 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
-            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>
+<status-page-stub
+  btnlink="/"
+  code="500"
+  codeerrortext="Code d'erreur : "
+  headinglevel="1"
+  hidebtn="false"
+  message="Une erreur est survenue de notre côté, veuillez réessayer plus tard."
+  pagetitle="Une erreur est survenue"
+  uniqueid=""
+></status-page-stub>
 `;

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

@@ -7,6 +7,7 @@ exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
     aria-expanded="true"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -94,7 +95,7 @@ exports[`ExternalLinks > opens the menu when the button is clicked 1`] = `
       css="true"
       name="fade-transition"
       persisted="true"
-      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 sy-external-links-btn" style="background-color: #0c419a; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;" aria-haspopup="menu" aria-expanded="true" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="mr-3 sy-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
+      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 sy-external-links-btn" style="background-color: #0c419a; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: absolute; flex-direction: row; top: 0px; bottom: auto; left: 0px; right: auto; z-index: 4;" aria-haspopup="menu" aria-expanded="true" aria-owns="sy-external-links-menu-v-0" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="mr-3 sy-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
     >
       <div
         class="v-overlay__content"
@@ -304,6 +305,7 @@ exports[`ExternalLinks > renders correctly 1`] = `
   <v-menu-stub
     activatorprops="[object Object]"
     attach="true"
+    capturefocus="true"
     class="
       sy-external-links
       sy-external-links--left
@@ -325,10 +327,13 @@ exports[`ExternalLinks > renders correctly 1`] = `
     openonhover="false"
     origin="auto"
     persistent="false"
+    retainfocus="false"
     scrim="false"
     scrollstrategy="reposition"
+    sticktotarget="false"
     submenu="false"
     transition="fade-transition"
+    viewportmargin="12"
     zindex="4"
   ></v-menu-stub>
 </div>
@@ -341,6 +346,7 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
     aria-expanded="true"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -428,7 +434,7 @@ exports[`ExternalLinks > renders correctly with fixed prop 1`] = `
       css="true"
       name="fade-transition"
       persisted="true"
-      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 sy-external-links-btn" style="background-color: #0c419a; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="true" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 sy-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
+      target="<button data-v-353763df="" type="button" class="v-btn v-btn--elevated v-theme--light v-btn--density-default rounded-0 v-btn--size-default v-btn--variant-elevated d-flex px-3 sy-external-links-btn" style="background-color: #0c419a; color: #fff; caret-color: #fff; min-height: 48px; min-width: 328px; transform: translateX(0); position: fixed; flex-direction: row-reverse; top: auto; bottom: 0px; left: auto; right: 0px; z-index: 5;" aria-haspopup="menu" aria-expanded="true" aria-owns="sy-external-links-menu-v-0" aria-label="Menu : Consulter les données externes" aria-controls="sy-external-links-menu-v-0"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span><!----><span class="v-btn__content" data-no-activator=""><span data-v-353763df="" class="ml-3 sy-external-links-btn-text white--text">Consulter les données externes</span><i data-v-353763df="" class="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z mdi v-icon notranslate v-theme--light v-icon--size-default text-white" aria-hidden="true"></i></span><!----><!----></button>"
     >
       <div
         class="v-overlay__content"
@@ -639,6 +645,7 @@ exports[`ExternalLinks > slides on hover or focus 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -708,6 +715,7 @@ exports[`ExternalLinks > slides on hover or focus 2`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -777,6 +785,7 @@ exports[`ExternalLinks > slides on hover or focus 3`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -846,6 +855,7 @@ exports[`ExternalLinks > slides on hover or focus 4`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3
@@ -915,6 +925,7 @@ exports[`ExternalLinks > slides on hover or focus 5`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Menu : Consulter les données externes"
+    aria-owns="sy-external-links-menu-v-0"
     class="
       d-flex
       px-3

package/src/components/FileList/FileList.stories.ts

@@ -42,8 +42,12 @@ const meta = {
 					detail: `{
 	optionalDocument: 'Document facultatif',
 	see: 'Voir',
+	import: 'Importer',
 	delete: 'Supprimer',
 	uploading: 'En cours',
+	importLabel: (title: string) => string,
+	seeLabel: (title: string) => string,
+	deleteLabel: (title: string) => string,
 	success: 'Téléchargé',
 	error: 'Erreur',
 	errorOccurred: 'Une erreur est survenue pendant le téléchargement.',

package/src/components/FileList/UploadItem/UploadItem.vue

@@ -118,10 +118,12 @@
 						{{ message ?? locales.optionalDocument }}
 					</div>
 					<div
-						v-if="state === 'error'"
 						class="file-item__error-message text-error"
+						role="status"
 					>
-						{{ locales.error }}
+						<div v-if="state === 'error'">
+							{{ locales.error }}
+						</div>
 					</div>
 				</div>
 			</div>
@@ -130,9 +132,10 @@
 					v-if="(state === 'initial' || state == 'error') && showUploadBtn"
 					class="file-item__action file-item__action-upload text-primary"
 					variant="text"
+					:aria-label="locales.importLabel(title)"
 					@click="$emit('upload', itemId)"
 				>
-					<span>Importer</span>
+					<span>{{ locales.import }}</span>
 					<template #prepend>
 						<SyIcon
 							color="primary"
@@ -145,6 +148,7 @@
 					v-if="state === 'success' && showPreviewBtn"
 					class="file-item__action file-item__action-preview text-primary"
 					variant="text"
+					:aria-label="locales.seeLabel(title)"
 					@click="$emit('preview', itemId)"
 				>
 					<span>{{ locales.see }}</span>
@@ -160,6 +164,7 @@
 					v-if="state === 'success' && showDeleteBtn"
 					class="file-item__action file-item__action-delete text-error"
 					variant="text"
+					:aria-label="locales.deleteLabel(title)"
 					@click="$emit('delete', itemId)"
 				>
 					<span>{{ locales.delete }}</span>

package/src/components/FileList/UploadItem/locales.ts

@@ -1,7 +1,17 @@
 export const locales = {
 	optionalDocument: 'Document facultatif',
+	import: 'Importer',
 	see: 'Voir',
 	delete: 'Supprimer',
+	importLabel(title: string) {
+		return `Importer le fichier ${title}`
+	},
+	seeLabel(title: string) {
+		return `Voir le fichier ${title}`
+	},
+	deleteLabel(title: string) {
+		return `Supprimer le fichier ${title}`
+	},
 	uploading: 'En cours',
 	success: 'Téléchargé',
 	error: 'Erreur',

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

@@ -1,12 +1,60 @@
-import { Meta, Story } from '@storybook/addon-docs';
+import { Meta, Primary } from '@storybook/addon-docs';
 import * as Stories from '../FileList.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={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+  componentName="FileList"
+  iconSrc={AccessibilityIcon}
+>
+  <CriteriaSection>
+    <CriteriaCard icon="🔍" title="Structure sémantique">
+      <ul>
+        <li><strong>Formattage sous forme de liste  </strong> : Utilisation de balises HTML sémantiques pour structurer les éléments de la liste de fichiers.</li>
+        <li><strong>Boutons</strong> : Utilisation de <code>&lt;button&gt;</code> pour les actions associées à chaque fichier, avec des étiquettes claires qui reprennent l'action et le nom du fichier.</li>
+      </ul>
+    </CriteriaCard>
 
-<br />
+
+    <CriteriaCard icon="⌨️" title="Navigation clavier complète">
+      <ul>
+        <li><strong>Navigation entre les éléments</strong> : Utilisation des touches Tab et Shift+Tab pour naviguer entre les fichiers et les actions associées.</li>
+        <li><strong>Activation des actions</strong> : Utilisation de la touche Entrée ou Espace pour activer les boutons d'action (télécharger, supprimer, etc.).</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📱" title="États et retours d'information">
+      <ul>
+        <li><strong>Indication de l'état de téléchargement</strong> : Utilisation d'icônes ou de messages pour indiquer si un fichier est en cours de téléchargement, téléchargé avec succès ou en échec.</li>
+        <li><strong>Indication de l'état d'erreur</strong> : Affichage d'un message d'erreur dans un élément avec le rôle <code>status</code> pour informer les utilisateurs de l'erreur.</li> 
+      </ul>
+    </CriteriaCard>
+
+    <DemoSection componentName="FileList">
+      <Primary />
+    </DemoSection>
+
+    <BestPracticesSection>
+      <ul>
+        <li><strong>Labels clairs et descriptifs</strong> : Assurez-vous que les titres des fichiers requis sont assez descriptifs pour que les utilisateurs comprennent facilement ce qui est attendu d'eux.</li>
+        <li><strong>Progression</strong> : Fournissez une indication de la progression du téléchargement pour les fichiers volumineux.</li>
+      </ul>
+    </BestPracticesSection>
+  </CriteriaSection>
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference/Elements/button">Documentation MDN sur les boutons</a></li>
+      <li><a href="https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Reference/Roles/status_role">Documentation MDN sur le rôle ARIA "status"</a></li>
+      <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role">MDN documentation on ARIA "status" role</a></li>
+    </ul>
+  </ResourcesSection>
+</AccessibilityGuideLayout>