@cnamts/synapse 1.0.19 → 1.0.21

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

@@ -0,0 +1,81 @@
+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="Structure sémantique">
+            <ul>
+                <li><strong>Titre de page</strong> : le titre est rendu dans une balise <code>h1</code>, unique et descriptif</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>
+                <li><strong>Rôles ARIA hérités</strong> via <code>PageContainer</code> :</li>
+                <ul>
+                    <li>exemple : <code>role="main"</code> représente le contenu principal de la page</li>
+                </ul>
+            </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>
+    </CriteriaSection>
+
+    <DemoSection title="Avec illustration personnalisée" componentName="StatusPage">
+        <Story of={StatusPageStories.CustomIllustration} />
+    </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>
+        </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,29 @@
+// @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: {
+				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,50 @@
+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: {
+				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: {
+				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: {
+				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,270 @@
+// 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
+            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
+            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>
+`;

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

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as SubHeaderStories from '../SubHeader.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={SubHeaderStories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/SubHeader.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/942" target="_blank" style={{color:'#0C41BD'}}>issue #942</a>)</p>
+	</div>

package/src/components/SyAlert/SyAlert.vue

@@ -9,6 +9,7 @@
 		mdiClose,
 	} from '@mdi/js'
 	import type { VIcon } from 'vuetify/components'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	defineOptions({
 		inheritAttrs: false,
@@ -75,9 +76,9 @@
 			<template #prepend>
 				<VIcon
 					ref="alertIcon"
+					v-rgaa-svg-fix
 					class="alert-icon"
 					size="1.5rem"
-					role="presentation"
 				>
 					<slot name="icon">
 						{{ prependIcon }}
@@ -102,12 +103,11 @@
 					class="alert-close-btn"
 					@click="dismissAlert"
 				>
-					<VIcon
+					<SyIcon
 						size="large"
-					>
-						{{ mdiClose }}
-					</VIcon>
-
+						:icon="mdiClose"
+						decorative
+					/>
 					<span>
 						{{ locales.close }}
 					</span>

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

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as SyAlertStorie from '../SyAlert.stories';
+import '@/stories/styles/shared.css';
+
+<Meta of={SyAlertStorie} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
+
+  <p>Rapport d’audit manuel : <a href="/audits/SyAlert.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
+  <p style={{ color: 'grey', fontSize: '14px', margin: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/4010" target="_blank" style={{color:'#0C41BD'}}>issue #4010</a>)</p>

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

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as SyTextArea from '../SyTextArea.stories';
+import '@/stories/styles/shared.css';
+
+<Meta of={SyTextArea} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>

package/src/components/TableToolbar/TableToolbar.stories.ts

@@ -878,7 +878,7 @@ export const SlotFilters: Story = {
 					},
 				]
 
-				const search = ref('')
+				const search = ref(undefined)
 
 				const filterItems = ref<{ text: string, value: string }[]>([])
 
@@ -902,16 +902,16 @@ export const SlotFilters: Story = {
 					<template #top>
 						<TableToolbar
 							v-bind="args"
-							v-model:search="args.search"
+							v-model:search="search"
 						>
 							<template #filters>
-								<div class="py-1">
+								<div class="px-4 py-4 py-sm-1">
 									<SySelect
 										v-model="search"
 										:items="filterItems"
 										label="Nom"
 										density="compact"
-										width="100"
+										width="150"
 										hide-messages
 										clearable
 									/>
@@ -942,13 +942,13 @@ export const SlotFilters: Story = {
 								:nb-total="items.length"
 							>
 								<template #filters>
-									<div class="py-4">
+									<div class="px-4 py-4 py-sm-1">
 										<SySelect 
 											v-model="search" 
 											:items="filterItems" 
 											label="Nom" 
 											density="compact" 
-											width="100"
+											width="150"
 											hide-messages
 											clearable 
 										/>

package/src/components/TableToolbar/TableToolbar.vue

@@ -5,6 +5,7 @@
 	import { useDisplay, useTheme } from 'vuetify'
 	import { config } from './config'
 	import { locales as defaultLocales } from './locales'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<{
 		nbTotal?: number
@@ -65,7 +66,7 @@
 	>
 		<p
 			v-if="nbTotal > 0"
-			class="mb-0 font-weight-bold mr-4 mr-sm-0 my-3"
+			class="mb-0 font-weight-bold mr-4 mr-sm-0"
 			data-test-id="nb-rows"
 		>
 			{{ displayNbRows }}
@@ -95,9 +96,11 @@
 				data-test-id="add-btn"
 				@click="$emit('add')"
 			>
-				<VIcon v-bind="options.addIcon">
-					{{ mdiPlus }}
-				</VIcon>
+				<SyIcon
+					v-bind="options.addIcon"
+					:icon="mdiPlus"
+					decorative
+				/>
 
 				<span
 					v-show="!display.xs.value"

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

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as Stories from '../TableToolbar.stories.ts';
+import '@/stories/styles/shared.css';
+
+<Meta of={Stories} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>
+
+<br />

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

@@ -32,7 +32,6 @@ exports[`TableToolbar > renders correctly when all the item are displayed 1`] =
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       5/5 lignes
     </p>
@@ -254,7 +253,6 @@ exports[`TableToolbar > renders correctly when loading 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1 ligne
     </p>
@@ -454,7 +452,6 @@ exports[`TableToolbar > renders correctly when the screen width <= 600px 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1 ligne
     </p>
@@ -676,7 +673,6 @@ exports[`TableToolbar > renders correctly with content slot 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1 ligne
     </p>
@@ -1113,7 +1109,6 @@ exports[`TableToolbar > should render 1`] = `
       mb-0
       mr-4
       mr-sm-0
-      my-3
     ">
       1/2 lignes
     </p>

package/src/components/Tables/SyServerTable/SyServerTable.mdx

@@ -1,5 +1,6 @@
 import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
 import * as SyServerTable from './SyServerTable.stories';
+import '@/stories/styles/shared.css';
 
 <Meta of={SyServerTable} />
 
@@ -75,7 +76,9 @@ Le composant permet de personnaliser l'affichage des en-têtes de colonnes en ut
 ### Items par page options
 Le composant permet de personnaliser le nombre possible d'éléments par page en utilisant la prop `items-per-page-options`. Vous pouvez spécifier un tableau d'options pour permettre de choisir le nombre d'éléments affichés par page.
 
-### Accessibilité
+<div className="header">
+  <h1>Accessibilité</h1>
+</div>
 
 Le composant améliore l'accessibilité en ajoutant automatiquement:
 - Une légende (caption) pour le tableau

package/src/components/Tables/SyServerTable/accessibilite/Accessibility.mdx

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as SyServerTable from '../SyServerTable.stories';
+import '@/stories/styles/shared.css';
+
+<Meta of={SyServerTable} />
+
+<div className="header">
+  <h1>Accessibilité</h1>
+  <p>Cette page sera bientôt disponible</p>
+</div>