@cnamts/synapse 1.0.26 → 1.1.0

package/src/components/NotFoundPage/tests/NotFoundPage.visual.cy.ts

@@ -0,0 +1,28 @@
+import NotFoundPage from '../NotFoundPage.vue'
+
+describe('NotFoundPage - Visual regression tests', () => {
+	it('displays the not found page by default', () => {
+		cy.mountWithVuetify(NotFoundPage)
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('not-found-page-default', cy.get('.v-application'))
+	})
+
+	it('displays the not found page without button', () => {
+		cy.mountWithVuetify(NotFoundPage, {
+			props: { hideBtn: true },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('not-found-page-no-btn', cy.get('.v-application'))
+	})
+
+	it('displays the not found page with custom button text', () => {
+		cy.mountWithVuetify(NotFoundPage, {
+			props: { btnText: 'Retour à l\'accueil' },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('not-found-page-custom-btn', cy.get('.v-application'))
+	})
+})

package/src/components/NotificationBar/Notification/Notification.vue

@@ -137,38 +137,38 @@
 
 	/* stylelint-disable custom-property-pattern */
 	.notification--info {
-		background-color: rgb(var(--v-theme-backgroundInfoContrasted, '12, 65, 154'));
-		color: rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+		background-color: rgb(var(--v-theme-info));
+		color: rgb(var(--v-theme-onPrimary));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+			outline: 2px solid rgb(var(--v-theme-onPrimary));
 		}
 	}
 
 	.notification--success {
-		background-color: rgb(var(--v-theme-backgroundSuccessContrasted, '86, 194, 113'));
-		color: rgb(var(--v-theme-feedbackOnSuccess));
+		background-color: rgb(var(--v-theme-success, '86, 194, 113'));
+		color: rgb(var(--v-theme-onSuccess));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-feedbackOnSuccess));
+			outline: 2px solid rgb(var(--v-theme-onSuccess));
 		}
 	}
 
 	.notification--warning {
-		background-color: rgb(var(--v-theme-backgroundWarningContrasted, '240, 179, 35'));
-		color: rgb(var(--v-theme-textBase, '0, 0, 0'));
+		background-color: rgb(var(--v-theme-warning));
+		color: rgb(var(--v-theme-onWarning));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-textBase, '0, 0, 0'));
+			outline: 2px solid rgb(var(--v-theme-onSurface));
 		}
 	}
 
 	.notification--error {
-		background-color: rgb(var(--v-theme-backgroundErrorContrasted, '179, 63, 46'));
-		color: rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+		background-color: rgb(var(--v-theme-error));
+		color: rgb(var(--v-theme-onPrimary));
 
 		.notification__close:focus-visible {
-			outline: 2px solid rgb(var(--v-theme-textOnDark, '255, 255, 255'));
+			outline: 2px solid rgb(var(--v-theme-onPrimary));
 		}
 	}
 

package/src/components/NotificationBar/NotificationBar.stories.ts

@@ -649,13 +649,13 @@ export const WithClearQueue: Story = (args) => {
                 Ajouter info
               </VBtn>
               <VBtn
-                  color="success"
+                  color="onSuccessVariant"
                   @click="envoyerNotification('Notification succès', 'success')"
               >
                 Ajouter succès
               </VBtn>
               <VBtn
-                  color="warning"
+                  color="onWarningVariant"
                   @click="envoyerNotification('Notification avertissement', 'warning')"
               >
                 Ajouter avertissement
@@ -719,13 +719,13 @@ export const showAll: Story = (args) => {
 				Ajouter info
 			  </VBtn>
 			  <VBtn
-				  color="success"
+				  color="onSuccessVariant"
 				  @click="envoyerNotification('Notification succès', 'success')"
 			  >
 				Ajouter succès
 			  </VBtn>
 			  <VBtn
-				  color="warning"
+				  color="onWarningVariant"
 				  @click="envoyerNotification('Notification avertissement', 'warning')"
 			  >
 				Ajouter avertissement
@@ -769,14 +769,14 @@ showAll.parameters = {
 						Ajouter une notification info
 					</VBtn>
 					<VBtn
-						color="success"
-						@click="envoyerNotification('Notification succès', 'success')"
+						color="onSuccessVariant"
+						@click="envoyerNotification('Notification succès', 'onSuccessVariant')"
 					>
 						Ajouter une notification succès
 					</VBtn>
 					<VBtn
-						color="warning"
-						@click="envoyerNotification('Notification avertissement', 'warning')"
+						color="onWarningVariant"
+						@click="envoyerNotification('Notification avertissement', 'onWarningVariant')"
 					>
 						Ajouter une notification avertissement
 					</VBtn>

package/src/components/NotificationBar/tests/NotificationBar.visual.cy.ts

@@ -0,0 +1,54 @@
+import NotificationBar from '../NotificationBar.vue'
+import { useNotificationService } from '@/services/NotificationService'
+
+describe('NotificationBar - Visual regression tests', () => {
+	beforeEach(() => {
+		const { clearQueue } = useNotificationService()
+		clearQueue()
+	})
+
+	it('displays the notification bar at top (info)', () => {
+		const { addNotification } = useNotificationService()
+		addNotification({ id: '1', message: 'Ceci est une notification informative', type: 'info' })
+
+		cy.mountWithVuetify(NotificationBar, {
+			props: { showAll: true },
+		})
+
+		// Wait for notification to be visible
+		cy.get('.notification-bar-transition').should('be.visible')
+		cy.get('.notification').should('contain', 'Ceci est une notification informative')
+		cy.matchImageSnapshot('notification-bar-info', cy.get('.v-application'))
+	})
+
+	it('displays the notification bar at bottom', () => {
+		const { addNotification } = useNotificationService()
+		addNotification({ id: '1', message: 'Notification en bas de page', type: 'warning' })
+
+		cy.mountWithVuetify(NotificationBar, {
+			props: { showAll: true, bottom: true },
+		})
+
+		// Wait for notification to be visible
+		cy.get('.notification-bar-transition').should('be.visible')
+		cy.get('.notification').should('contain', 'Notification en bas de page')
+		cy.matchImageSnapshot('notification-bar-bottom', cy.get('.v-application'))
+	})
+
+	it('displays the notification bar with multiple types', () => {
+		const { addNotification } = useNotificationService()
+		addNotification({ id: '1', message: 'Succès de l\'opération', type: 'success' })
+		addNotification({ id: '2', message: 'Une erreur est survenue', type: 'error' })
+
+		cy.mountWithVuetify(NotificationBar, {
+			props: { showAll: true },
+		})
+
+		// Wait for all notifications to be visible
+		cy.get('.notification-bar-transition').should('be.visible')
+		cy.get('.notification').should('have.length', 2)
+		cy.get('.notification').should('contain', 'Succès de l\'opération')
+		cy.get('.notification').should('contain', 'Une erreur est survenue')
+		cy.matchImageSnapshot('notification-bar-multiple', cy.get('.v-application'))
+	})
+})

package/src/components/PageContainer/tests/PageContainer.visual.cy.ts

@@ -0,0 +1,33 @@
+import PageContainer from '../PageContainer.vue'
+import { h } from 'vue'
+
+describe('PageContainer - Visual regression tests', () => {
+	it('displays the page container by default', () => {
+		cy.mountWithVuetify(PageContainer, {
+			slots: { default: () => h('p', 'Contenu de la page') },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('page-container-default', cy.get('.v-application'))
+	})
+
+	it('displays the page container with md size', () => {
+		cy.mountWithVuetify(PageContainer, {
+			props: { size: 'md' },
+			slots: { default: () => h('p', 'Contenu de la page') },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('page-container-md', cy.get('.v-application'))
+	})
+
+	it('displays the page container with background color', () => {
+		cy.mountWithVuetify(PageContainer, {
+			props: { color: 'blue-lighten-5' },
+			slots: { default: () => h('p', 'Contenu de la page') },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('page-container-color', cy.get('.v-application'))
+	})
+})

package/src/components/PaginatedTable/Pagination.vue

@@ -78,7 +78,7 @@
 }
 
 :deep(.v-pagination) .v-pagination__list [aria-disabled='false'] svg {
-	color: rgb(var(--v-theme-iconBase));
+	color: rgb(var(--v-theme-primary));
 }
 
 :deep(.v-pagination) .v-btn--variant-plain[aria-disabled='false'] {
@@ -86,6 +86,6 @@
 }
 
 :deep(.v-pagination) .v-btn--variant-plain:hover[aria-disabled='false'] svg {
-	color: rgb(var(--v-theme-textBase));
+	color: rgb(var(--v-theme-onSurface));
 }
 </style>

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

@@ -1,12 +1,104 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../PaginatedTable.stories.ts';
+import { Meta, Story } from '@storybook/blocks';
+import * as Stories from '../PaginatedTable.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection,
+} 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="PaginatedTable"
+    iconSrc={AccessibilityIcon}
+>
+    <AuditSection>
+        <div>Rapport d’audit manuel :{' '}
+            <a href="/audits/PaginatedTable.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></div>
+        <div style={{color: 'grey', fontSize: '14px', marginTop: '0px'}}>
+            Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/914" target="_blank" rel="noopener noreferrer" style={{color: '#0C41BD'}}>issue #914</a>)
+        </div>
+    </AuditSection>
 
-<br />
+    <CriteriaSection>
+        <CriteriaCard icon="🏷️" title="Structure et rôles">
+            <ul>
+                <li>Le composant repose sur <code>VDataTable</code> ou <code>VDataTableServer</code> et conserve la structure sémantique native d’un tableau HTML (<code>table</code>, <code>caption</code>, <code>thead</code>, <code>tbody</code>, <code>th</code>, <code>td</code>).</li>
+                <li>Une légende (<code>caption</code>) est injectée dynamiquement au montage et reste accessible via <code>d-sr-only</code> si elle est visuellement masquée.</li>
+                <li>Les en-têtes utilisent des cellules <code>th</code> avec <code>scope="col"</code> et exposent les états de tri via <code>aria-sort</code>.</li>
+                <li>Les options de pagination et de tri sont exposées via des composants natifs (<code>Pagination</code>, sélecteurs Vuetify).</li>
+                <li>Les slots permettent d’étendre le tableau sans casser la sémantique native.</li>
+                <li>L’état de tri, pagination et groupement peut être persisté sans impacter la structure accessible.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li>Les en-têtes de colonnes sont focalisables via <code>tabindex="0"</code>.</li>
+                <li>Les actions de tri sont accessibles au clavier via Entrée ou Espace.</li>
+                <li>La pagination est entièrement navigable au clavier (page, items par page).</li>
+                <li>Le sélecteur « éléments par page » est accessible et correctement libellé.</li>
+                <li>Les champs de filtre et composants injectés restent accessibles dans l’ordre de tabulation.</li>
+                <li>Les interactions dynamiques ne bloquent pas la navigation clavier.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📢" title="Annonces aux technologies d’assistance">
+            <ul>
+                <li>Le <code>caption</code> fournit un contexte global pour la lecture du tableau.</li>
+                <li>Les changements de pagination et de tri sont restitués via les attributs ARIA des en-têtes.</li>
+                <li>Les champs « éléments par page » sont annoncés avec un libellé explicite.</li>
+                <li>Les suppressions d’attributs comme <code>aria-describedby</code> évitent les annonces redondantes.</li>
+                <li>Les modifications d’état du tableau restent cohérentes pour les lecteurs d’écran.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎨" title="Contraste et lisibilité">
+            <ul>
+                <li>Les styles du design system garantissent un contraste suffisant pour texte, bordures et focus.</li>
+                <li>Les en-têtes sont visuellement différenciés via une typographie renforcée.</li>
+                <li>Les états actifs (focus, tri, sélection) restent perceptibles visuellement et programmatiquement.</li>
+                <li>Les contrôles de pagination et filtres conservent une lisibilité constante sur tous les thèmes.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="💾" title="Persistance et état">
+            <ul>
+                <li>L’état du tableau (tri, pagination, groupement) peut être sauvegardé dans le localStorage.</li>
+                <li>La restauration de l’état n’altère pas la structure du tableau ni son accessibilité.</li>
+                <li>Les préférences utilisateur sont isolées par clé (<code>suffix</code>) pour éviter les collisions.</li>
+                <li>Les champs et en-têtes restent accessibles après rechargement.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="PaginatedTable">
+        <Story of={Stories.Default}/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Fournissez toujours un <code>caption</code> explicite pour décrire le contenu du tableau.</li>
+            <li>Utilisez des intitulés de colonnes courts, uniques et compréhensibles.</li>
+            <li>Évitez de surcharger les slots avec des contrôles non liés au tableau.</li>
+            <li>Vérifiez que les interactions de tri restent accessibles uniquement au clavier.</li>
+            <li>Testez la restitution des changements (pagination, tri) avec un lecteur d’écran.</li>
+            <li>Assurez une cohérence entre les états visuels et les attributs ARIA.</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/tutorials/tables/" target="_blank" rel="noopener noreferrer">W3C WAI – Tables Tutorial</a></li>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/table/" target="_blank" rel="noopener noreferrer">WAI-ARIA Authoring Practices – Table Pattern</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html" target="_blank" rel="noopener noreferrer">WCAG – Status Messages (4.1.3)</a></li>
+            <li><a href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/" target="_blank" rel="noopener noreferrer">RGAA – critères 5 (tableaux), 7 (ARIA), 10 (présentation)</a></li>
+        </ul>
+    </ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/PaginatedTable/tests/PaginatedTable.visual.cy.ts

@@ -0,0 +1,41 @@
+import PaginatedTable from '../PaginatedTable.vue'
+
+const defaultHeaders = [
+	{ title: 'Nom', key: 'nom' },
+	{ title: 'Prénom', key: 'prenom' },
+	{ title: 'Date', key: 'date' },
+]
+
+const defaultItems = [
+	{ nom: 'Dupont', prenom: 'Jean', date: '01/01/1990' },
+	{ nom: 'Martin', prenom: 'Marie', date: '15/06/1985' },
+]
+
+describe('PaginatedTable - Visual regression tests', () => {
+	it('displays the paginated table by default', () => {
+		cy.mountWithVuetify(PaginatedTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				caption: 'Tableau de données',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('paginated-table-default', cy.get('.v-application'))
+	})
+
+	it('displays the paginated table with server items', () => {
+		cy.mountWithVuetify(PaginatedTable, {
+			props: {
+				headers: defaultHeaders,
+				items: defaultItems,
+				serverItemsLength: 50,
+				caption: 'Tableau serveur',
+			},
+		})
+
+		cy.get('.v-table').should('be.visible')
+		cy.matchImageSnapshot('paginated-table-server', cy.get('.v-application'))
+	})
+})

package/src/components/PasswordField/PasswordField.mdx

@@ -1,5 +1,6 @@
 import { Meta, Canvas, Controls, Source } from '@storybook/blocks'
 import * as PasswordFieldStories from './PasswordField.stories'
+import * as PasswordFieldValidationStories from './Validation/Validation.stories'
 
 <Meta of={PasswordFieldStories} />
 
@@ -56,73 +57,25 @@ Le composant peut être requis et afficher un message d'erreur si le champ est v
 
 Exemple complet montrant les différents types de validation (erreurs, avertissements, succès).
 
-<Canvas of={PasswordFieldStories.WithValidation} />
+<Canvas of={PasswordFieldValidationStories.WithCustomRules} />
 
 ### Exemples d'états de validation
 
 <div className="sb-grid">
   <div>
     <h4>Avec erreur</h4>
-    <Canvas of={PasswordFieldStories.WithError} />
+    <Canvas of={PasswordFieldValidationStories.WithError} />
   </div>
   <div>
     <h4>Avec avertissement</h4>
-    <Canvas of={PasswordFieldStories.WithWarning} />
+    <Canvas of={PasswordFieldValidationStories.WithWarning} />
   </div>
   <div>
     <h4>Avec succès</h4>
-    <Canvas of={PasswordFieldStories.WithSuccess} />
+    <Canvas of={PasswordFieldValidationStories.WithSuccess} />
   </div>
 </div>
 
-### Validation de formulaire
-
-Le composant expose une méthode `validateOnSubmit` pour valider le champ lors de la soumission d'un formulaire.
-
-<Canvas of={PasswordFieldStories.WithFormValidation} />
-
-<Source
-    dark code={`
-<template>
-	<form @submit.prevent="handleSubmit">
-		<PasswordField
-			ref="passwordFieldRef"
-			v-model="password"
-			required
-			:custom-rules="customRules"
-		/>
-		<button type="submit">Valider</button>
-	</form>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { PasswordField } from '@cnamts/synapse'
-
-const password = ref('')
-import '../../stories/styles/shared.css';
-const passwordFieldRef = ref()
-
-const customRules = [{
-	type: 'custom',
-	options: {
-		message: 'Le mot de passe doit contenir au moins 8 caractères',
-		validate: (value: string) => value.length >= 8
-	}
-}]
-
-function handleSubmit() {
-	const isValid = passwordFieldRef.value?.validateOnSubmit()
-	if (!isValid) {
-		// Gérer l'erreur
-		return
-	}
-	// Continuer avec la soumission
-}
-</script>
-`}
-/>
-
 ### Méthodes exposées
 
 Le composant expose les méthodes et propriétés suivantes via `defineExpose` :