@cnamts/synapse 1.0.26 → 1.1.0

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

@@ -1,12 +1,90 @@
 import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../FilePreview.stories.ts';
-import '@/stories/styles/shared.css';
+import * as FilePreviewStories from '../FilePreview.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} />
+<Meta of={FilePreviewStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-  <p>Cette page sera bientôt disponible</p>
-</div>
+<AccessibilityGuideLayout
+  componentName="FilePreview"
+  iconSrc={AccessibilityIcon}
+  apgHref="https://www.w3.org/WAI/tutorials/images/"
+>
+  <AuditSection>
+    <div class="mt-2">
+      <p>Rapport d'audit manuel : <a href="/audits/FilePreview.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/922" target="_blank" style={{color:'#0C41BD'}}>issue #922</a>)</p>
+    </div>
+  </AuditSection>
 
-<br />
+  <CriteriaSection>
+
+    <CriteriaCard icon="🖼️" title="Prévisualisation des images">
+      <ul>
+        <li><strong>Image native</strong> : Utilisation de l'élément HTML <code>&lt;img&gt;</code></li>
+        <li><strong>Texte alternatif</strong> : Support de l'attribut <code>alt</code> via <code>options.image.alt</code></li>
+        <li><strong>Compatibilité</strong> : Restitution native par les technologies d'assistance</li>
+        <li><strong>Conformité</strong> : Respect du critère RGAA 1.1 relatif aux images porteuses d'information</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="📄" title="Prévisualisation des PDF">
+      <ul>
+        <li><strong>Intégration native</strong> : Utilisation de l'élément <code>&lt;object&gt;</code></li>
+        <li><strong>Type explicite</strong> : Déclaration du MIME type <code>application/pdf</code></li>
+        <li><strong>Fallback accessible</strong> : Message affiché lorsque la prévisualisation n'est pas disponible</li>
+        <li><strong>Compatibilité variable</strong> : Le rendu dépend du navigateur et du lecteur PDF disponible</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="⚠️" title="Gestion des formats non supportés">
+      <ul>
+        <li><strong>Message alternatif</strong> : Affichage d'un contenu de remplacement lorsque le type de fichier n'est pas prévisualisable</li>
+        <li><strong>Slot personnalisé</strong> : Possibilité de fournir un message métier adapté</li>
+        <li><strong>Compréhension utilisateur</strong> : Évite les zones vides ou silencieuses</li>
+      </ul>
+    </CriteriaCard>
+
+    <CriteriaCard icon="♿" title="Informations accessibles">
+      <ul>
+        <li><strong>Texte alternatif pertinent</strong> : Fournir un <code>alt</code> descriptif lorsque l'image apporte une information</li>
+        <li><strong>Image décorative</strong> : Utiliser un <code>alt=""</code> lorsque l'image n'apporte aucune information utile</li>
+        <li><strong>Message de secours</strong> : Les utilisateurs sont informés lorsqu'un aperçu ne peut être affiché</li>
+        <li><strong>Navigation clavier</strong> : Aucun comportement spécifique requis car le composant n'est pas interactif</li>
+      </ul>
+    </CriteriaCard>
+
+  </CriteriaSection>
+
+  <DemoSection componentName="FilePreview">
+    <Story of={FilePreviewStories.Default} />
+  </DemoSection>
+
+  <BestPracticesSection>
+    <ul>
+      <li>Renseigner systématiquement <code>options.image.alt</code> pour les images informatives.</li>
+      <li>Prévoir un message explicite pour les formats non pris en charge.</li>
+      <li>Ne pas utiliser la prévisualisation comme unique moyen d'accéder au document.</li>
+      <li>Fournir un lien de téléchargement complémentaire lorsque cela est pertinent.</li>
+      <li>Tester les PDF sur plusieurs navigateurs car leur rendu dépend des capacités natives.</li>
+      <li>Vérifier que le contraste des contenus affichés respecte les exigences d'accessibilité.</li>
+    </ul>
+  </BestPracticesSection>
+
+  <ResourcesSection>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/tutorials/images/" target="_blank" rel="noopener noreferrer">WAI - ImagesTutorial</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://accessibilite.numerique.gouv.fr/" target="_blank" rel="noopener noreferrer">Référentiel Général d'Amélioration de l'Accessibilité (RGAA)</a></li>
+    </ul>
+  </ResourcesSection>
+
+</AccessibilityGuideLayout>

package/src/components/FileUpload/FileUpload.vue

@@ -174,14 +174,14 @@
 .sy-file-upload {
 	cursor: pointer;
 	position: relative;
-	border: 1px dashed rgb(var(--v-theme-borderAccentPrimary));
+	border: 1px dashed rgb(var(--v-theme-primary));
 	border-radius: var(--v-radius-roundedLg);
 	transition: background 0.25s;
 
 	&:hover,
 	&:focus-within,
 	&.dragover {
-		background: rgb(var(--v-theme-backgroundSurfaceAlt));
+		background: rgb(var(--v-theme-surfaceDim));
 	}
 
 	&.dark-mode {

package/src/components/FileUpload/FileUploadContent.vue

@@ -96,7 +96,7 @@
 
 .sy-file-upload-caption {
 	font-size: 0.875rem;
-	color: rgb(var(--v-theme-textSubdued));
+	color: rgb(var(--v-theme-onSurfaceVariant));
 }
 
 .sy-file-upload-btn {

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

@@ -0,0 +1,36 @@
+import FileUpload from '../FileUpload.vue'
+
+describe('FileUpload - Visual regression tests', () => {
+	it('displays the file upload zone by default', () => {
+		cy.mountWithVuetify(FileUpload, {
+			props: { modelValue: [] },
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('file-upload-default', cy.get('.v-application'))
+	})
+
+	it('displays the file upload zone in disabled state', () => {
+		cy.mountWithVuetify(FileUpload, {
+			props: {
+				modelValue: [],
+				disabled: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('file-upload-disabled', cy.get('.v-application'))
+	})
+
+	it('displays the file upload zone with multiple files allowed', () => {
+		cy.mountWithVuetify(FileUpload, {
+			props: {
+				modelValue: [],
+				multiple: true,
+			},
+		})
+
+		cy.get('.v-application').should('be.visible')
+		cy.matchImageSnapshot('file-upload-multiple', cy.get('.v-application'))
+	})
+})

package/src/components/FilterInline/FilterInline.mdx

@@ -6,7 +6,7 @@ import * as FilterSideBarStories from '@/components/FilterSideBar/FilterSideBar.
 
 <div className="header">
   <h1>FilterInline</h1>
-  
+
 </div><Canvas of={FilterInlineStories.Default} />
 
 # API
@@ -135,7 +135,7 @@ const professionList = [
 		value: 'pharmacien',
 	},
 ]
-	
+
 </script>
 
 <template>

package/src/components/FilterInline/FilterInline.stories.ts

@@ -537,6 +537,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 					/>
@@ -583,6 +584,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 						color="primary"

package/src/components/FilterInline/FilterInline.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 	import useFilterable, { type FilterProp } from '@/composables/useFilterable/useFilterable'
 	import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
-	import { toRef } from 'vue'
+	import { toRef, watch } from 'vue'
 	import ChipList from '../ChipList/ChipList.vue'
 	import { locales as defaultLocales } from './locales'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
@@ -15,19 +15,25 @@
 	})
 
 	const emits = defineEmits<{
-		'update:modelValue': (value: FilterProp) => void
+		(e: 'update:modelValue', value: FilterProp): void
 	}>()
 
 	const {
 		filters,
-		updateValue,
 		removeChip,
 		resetFilter,
 		getChips,
 		getFilterCount,
 		formatFilterName,
-	} = useFilterable(toRef(props, 'modelValue'), emits)
+	} = useFilterable(toRef(props, 'modelValue'))
 
+	watch(filters, (newFilters) => {
+		if (JSON.stringify(newFilters) === JSON.stringify(props.modelValue)) {
+			// a new array or object do not mean a new value
+			return
+		}
+		emits('update:modelValue', filters.value)
+	}, { deep: true })
 </script>
 
 <template>
@@ -88,7 +94,6 @@
 						'onUpdate:modelValue': (value: unknown) => {
 							if (value !== filter.value) {
 								filter.value = value
-								updateValue()
 							}
 						},
 					}"

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

@@ -0,0 +1,25 @@
+import FilterInline from '../FilterInline.vue'
+
+const defaultFilters = [
+	{
+		name: 'statut',
+		title: 'Statut',
+		value: ['actif'],
+	},
+	{
+		name: 'type',
+		title: 'Type',
+		value: null,
+	},
+]
+
+describe('FilterInline - Visual regression tests', () => {
+	it('displays the inline filters', () => {
+		cy.mountWithVuetify(FilterInline, {
+			props: { modelValue: defaultFilters },
+		})
+
+		cy.get('.sy-filters-inline').should('be.visible')
+		cy.matchImageSnapshot('filter-inline-default', cy.get('.sy-filters-inline'))
+	})
+})

package/src/components/FilterSideBar/FilterSideBar.stories.ts

@@ -10,7 +10,7 @@ import RangeField from '../RangeField/RangeField.vue'
 import SyTextField from '../Customs/SyTextField/SyTextField.vue'
 
 const meta = {
-	title: 'Composants/Filtres/FiltersSideBar',
+	title: 'Composants/Filtres/FilterSideBar',
 	component: FilterSideBar,
 
 	argTypes: {
@@ -254,6 +254,7 @@ export const Default: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						label="Profession"
 						:items="professionList"
@@ -486,7 +487,7 @@ export const FilterCombination: Story = {
 	decorators: [
 		() => ({
 			template: `
-			<VApp style="height: 500px; overflow-y: hidden;">
+			<VApp style="height: 500px; overflow-y: hidden; background: none">
 				<div class="pa-4">
 					<story />
 				</div>
@@ -602,6 +603,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 					/>
@@ -703,6 +705,7 @@ export const FilterCombination: Story = {
 
 				<template #profession="{ props }">
 					<SearchListField
+						label="Profession"
 						v-bind="props"
 						:items="professionList"
 					/>

package/src/components/FilterSideBar/FilterSideBar.vue

@@ -23,19 +23,18 @@
 	})
 
 	const emits = defineEmits<{
-		'update:modelValue': (value: FilterProp) => void
+		(e: 'update:modelValue', value: FilterProp): void
 	}>()
 
 	const {
 		filters,
-		updateValue,
 		removeChip,
 		resetFilter,
 		getChips,
 		getFilterCount,
 		formatFilterName,
 		resetAllFilters,
-	} = useFilterable(toRef(props, 'modelValue'), emits)
+	} = useFilterable(toRef(props, 'modelValue'))
 
 	const drawer = ref(false)
 
@@ -57,7 +56,7 @@
 	}
 
 	function applyFilters(): void {
-		updateValue()
+		emits('update:modelValue', filters.value)
 		drawer.value = false
 	}
 
@@ -76,6 +75,12 @@
 			svg.removeAttribute('role')
 		})
 	})
+
+	function resetAll(): void {
+		resetAllFilters()
+		emits('update:modelValue', filters.value)
+	}
+
 </script>
 
 <template>
@@ -175,7 +180,7 @@
 								<slot
 									:name="`${formatFilterName(filter.name)}`"
 									:props="{
-										modelValue: filter.value as any,
+										modelValue: filter.value,
 										'onUpdate:modelValue': (value: unknown) =>{
 											(filter.value = value)},
 									}"
@@ -207,7 +212,7 @@
 							class="sy-filters-side-bar__reset-btn mb-4"
 							type="reset"
 							:aria-label="locales.resetAriaLabel"
-							@click.stop="resetAllFilters"
+							@click.stop="resetAll"
 						>
 							{{ locales.reset }}
 						</VBtn>
@@ -218,9 +223,9 @@
 							size="large"
 							class="sy-filters-side-bar__apply-btn"
 							variant="elevated"
-							type="submit"
+							type="button"
 							:aria-label="locales.applyAriaLabel"
-							@click.stop="applyFilters"
+							@click.prevent="applyFilters"
 						>
 							{{ locales.apply }}
 						</VBtn>

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

@@ -0,0 +1,37 @@
+import FilterSideBar from '../FilterSideBar.vue'
+
+const defaultFilters = [
+	{
+		name: 'statut',
+		title: 'Statut',
+		value: ['actif'],
+	},
+	{
+		name: 'type',
+		title: 'Type',
+		value: null,
+	},
+]
+
+describe('FilterSideBar - Visual regression tests', () => {
+	it('displays the sidebar filter button', () => {
+		cy.mountWithVuetify(FilterSideBar, {
+			props: { modelValue: defaultFilters },
+		})
+
+		cy.get('.sy-filters-side-bar').should('be.visible')
+		cy.matchImageSnapshot('filter-sidebar-default', cy.get('.sy-filters-side-bar'))
+	})
+
+	it('displays the sidebar filter in modale mode', () => {
+		cy.mountWithVuetify(FilterSideBar, {
+			props: {
+				modelValue: defaultFilters,
+				modale: true,
+			},
+		})
+
+		cy.get('.sy-filters-side-bar').should('be.visible')
+		cy.matchImageSnapshot('filter-sidebar-modale', cy.get('.sy-filters-side-bar'))
+	})
+})

package/src/components/FooterBar/FooterBar.vue

@@ -363,32 +363,32 @@ a {
 .vd-footer-bar.v-theme--dark :deep() {
 	.vd-footer-bar-links li,
 	.vd-footer-bar-links a {
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 
 		&.version {
-			color: rgb(var(--v-theme-textSubduedOnDark));
+			color: rgb(var(--v-theme-surface));
 		}
 	}
 
 	p,
 	.text--primary {
-		color: rgba(var(--v-theme-textOnDark), 0.87);
+		color: rgba(var(--v-theme-onPrimary));
 	}
 
 	.text--secondary {
-		color: rgba(var(--v-theme-textOnDark), 0.6);
+		color: rgba(var(--v-theme-onPrimary));
 	}
 
 	a.text--primary {
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 	}
 
 	.v-divider {
-		border-color: rgba(var(--v-theme-borderSubdued), 1);
+		border-color: rgba(var(--v-theme-disabled), 1);
 	}
 
 	svg {
-		fill: rgb(var(--v-theme-textOnDark));
+		fill: rgb(var(--v-theme-onPrimary));
 	}
 }
 

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

@@ -0,0 +1,37 @@
+import FooterBar from '../FooterBar.vue'
+
+describe('FooterBar - Visual regression tests', () => {
+	it('displays the footer bar by default', () => {
+		cy.mountWithVuetify(FooterBar)
+
+		cy.get('.v-footer').should('be.visible')
+		cy.matchImageSnapshot('footer-bar-default', cy.get('.v-footer'))
+	})
+
+	it('displays the footer bar without logo', () => {
+		cy.mountWithVuetify(FooterBar, {
+			props: { hideLogo: true },
+		})
+
+		cy.get('.v-footer').should('be.visible')
+		cy.matchImageSnapshot('footer-bar-no-logo', cy.get('.v-footer'))
+	})
+
+	it('displays the footer bar without social media links', () => {
+		cy.mountWithVuetify(FooterBar, {
+			props: { hideSocialMediaLinks: true },
+		})
+
+		cy.get('.v-footer').should('be.visible')
+		cy.matchImageSnapshot('footer-bar-no-social', cy.get('.v-footer'))
+	})
+
+	it('displays the footer bar with a version', () => {
+		cy.mountWithVuetify(FooterBar, {
+			props: { version: '1.2.3' },
+		})
+
+		cy.get('.v-footer').should('be.visible')
+		cy.matchImageSnapshot('footer-bar-version', cy.get('.v-footer'))
+	})
+})

package/src/components/FranceConnectBtn/FranceConnectBtn.vue

@@ -123,7 +123,7 @@
 
 .sy-france-connect-btn--dark {
 	.sy-france-connect-link {
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 		background-color: #8585f6;
 
 		&:hover {

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

@@ -0,0 +1,38 @@
+import FranceConnectBtn from '../FranceConnectBtn.vue'
+
+describe('FranceConnectBtn - Visual regression tests', () => {
+	it('displays the FranceConnect button by default', () => {
+		cy.mountWithVuetify(FranceConnectBtn, {
+			props: { href: 'https://franceconnect.gouv.fr' },
+		})
+
+		cy.get('.sy-france-connect-btn').should('be.visible')
+		cy.matchImageSnapshot('france-connect-btn-default', cy.get('.sy-france-connect-btn'))
+	})
+
+	it('displays the FranceConnect+ button', () => {
+		cy.mountWithVuetify(FranceConnectBtn, {
+			props: {
+				href: 'https://franceconnect.gouv.fr',
+				isConnectPlus: true,
+			},
+		})
+
+		cy.get('.sy-france-connect-btn').should('be.visible')
+		cy.matchImageSnapshot('france-connect-btn-plus', cy.get('.sy-france-connect-btn'))
+	})
+
+	it('displays the FranceConnect button in dark mode', () => {
+		cy.mountWithVuetify(FranceConnectBtn, {
+			props: {
+				href: 'https://franceconnect.gouv.fr',
+				dark: true,
+			},
+		})
+		cy.get('.v-application').invoke('css', 'background-color', '#121212')
+
+		cy.get('.sy-france-connect-btn').should('be.visible')
+		cy.matchImageSnapshot('france-connect-btn-dark', cy.get('.sy-france-connect-btn'))
+		cy.get('.v-application').invoke('css', 'background-color', '')
+	})
+})

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue

@@ -55,10 +55,10 @@
 
 	.header-menu-item:hover {
 		background-color: rgb(var(--v-theme-primary));
-		color: rgb(var(--v-theme-textOnDark));
+		color: rgb(var(--v-theme-onPrimary));
 
 		> :deep(a > *) {
-			color: rgb(var(--v-theme-textOnDark)) !important;
+			color: rgb(var(--v-theme-onPrimary)) !important;
 		}
 	}
 </style>

package/src/components/HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.vue

@@ -111,11 +111,11 @@
 
 		&:hover {
 			background-color: rgb(var(--v-theme-primary));
-			color: rgb(var(--v-theme-textOnDark));
+			color: rgb(var(--v-theme-onPrimary));
 			text-decoration: underline;
 
 			> :deep(*) {
-				color: rgb(var(--v-theme-textOnDark)) !important;
+				color: rgb(var(--v-theme-onPrimary)) !important;
 			}
 		}
 
@@ -152,14 +152,14 @@
 		.sub-menu--open > .sub-menu-btn {
 			padding: 0 16px 8px 40px;
 			border-bottom: 1px solid $menu-border-color;
-			color: rgb(var(--v-theme-textBase));
+			color: rgb(var(--v-theme-onSurface));
 			background-color: transparent;
 
 			&:hover {
-				color: rgb(var(--v-theme-textBase));
+				color: rgb(var(--v-theme-onSurface));
 
 				> :deep(*) {
-					color: rgb(var(--v-theme-textBase)) !important;
+					color: rgb(var(--v-theme-onSurface)) !important;
 				}
 			}
 		}
@@ -177,11 +177,11 @@
 
 		.sub-menu--open > .sub-menu-btn {
 			background-color: rgb(var(--v-theme-primary));
-			color: rgb(var(--v-theme-textOnDark));
+			color: rgb(var(--v-theme-onPrimary));
 			transition: color 0.15s linear, background-color 0.15s linear;
 
 			> :deep(*) {
-				color: rgb(var(--v-theme-textOnDark)) !important;
+				color: rgb(var(--v-theme-onPrimary)) !important;
 			}
 		}
 

package/src/components/HeaderBar/HeaderBurgerMenu/tests/HeaderBurgerMenu.spec.ts

@@ -4,6 +4,10 @@ import { registerHeaderMenuKey } from '../../consts'
 import HeaderBurgerMenu from '../HeaderBurgerMenu.vue'
 import { defineComponent, toRef } from 'vue'
 
+vi.mock('@/utils/functions/throttleDisplayFn/throttleDisplayFn.ts', () => ({
+	default: (fn: (...args: unknown[]) => void) => fn,
+}))
+
 describe('HeaderBurgerMenu', () => {
 	const BtnTestComponent = defineComponent({
 		props: {
@@ -18,10 +22,6 @@ describe('HeaderBurgerMenu', () => {
 		template: `<button @click="$emit('update:modelValue', !open)">Test</button>`,
 	})
 
-	vi.mock('@/utils/functions/throttleDisplayFn/throttleDisplayFn.ts', () => ({
-		default: (fn: (...args: unknown[]) => void) => fn,
-	}))
-
 	afterAll(() => {
 		vi.restoreAllMocks()
 		document.body.innerHTML = ''