@cnamts/synapse 1.0.20 → 1.0.21

package/dist/utils/theme/index.d.ts

@@ -0,0 +1,6 @@
+import { ComputedRef } from 'vue';
+export declare function useThemeLocales<T extends Record<string, unknown> & {
+    default: unknown;
+}>(locales: T): {
+    themeLocales: ComputedRef<T[keyof T]>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -30,6 +30,7 @@
     "lint:fix": "eslint \"src/**/*.{ts,vue}\" --fix && stylelint \"src/**/*.{css,scss,vue}\" --fix",
     "test:unit": "vitest run --exclude='**/*.a11y.spec.ts'",
     "test:a11y": "pnpm vitest run a11y.spec.ts",
+    "a11y:report": "node ./scripts/a11y-report.mjs",
     "prepare": "husky",
     "generate:changelog": "auto-changelog -o CHANGELOG-TEMP.md -p --starting-date 2024-10-10"
   },
@@ -99,7 +100,7 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.3.5",
-    "vite-plugin-dts": "^4.0.1",
+    "vite-plugin-dts": "^4.5.4",
     "vite-plugin-vuetify": "^2.1.1",
     "vitest": "^3.2.4",
     "vitest-axe": "^0.1.0",
@@ -129,7 +130,8 @@
     "esbuild": "^0.25.0",
     "parse5": "7.1.2",
     "npm": "^11.8.1",
-    "undici": "^6.21.0"
+    "undici": "^6.21.0",
+    "rollup": "^4.59.0"
   },
   "pnpm": {
     "overrides": {
@@ -138,7 +140,8 @@
       "glob": ">=10.5.0",
       "js-yaml": ">=4.1.1",
       "parse5": "7.1.2",
-      "npm": "^11.8.1"
+      "npm": "^11.8.1",
+      "minimatch": ">=10.2.3"
     }
   }
 }

package/src/components/ContextualMenu/ContextualMenu.stories.ts

@@ -223,9 +223,6 @@ export const WithAnchors: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',

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

@@ -1,15 +1,71 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../ContextualMenu.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as ContextualMenuStories from '../ContextualMenu.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={ContextualMenuStories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="ContextualMenu"
+	iconSrc={AccessibilityIcon}
+>
+	<AuditSection>
+		<p>Rapport d’audit manuel : <a href="/audits/ContextualMenu.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/658" target="_blank" style={{color:'#0C41BD'}}>issue #658</a>)</p>
+	</AuditSection>
+  
+	<CriteriaSection>
+		<CriteriaCard icon="🏷️" title="Structure sémantique claire">
+			<ul>
+				<li>Landmark <code>&lt;nav&gt;</code> avec <code>aria-label</code> obligatoire pour annoncer la zone.</li>
+				<li>Hiérarchie native <code>ul &gt; li &gt; a</code> pour les niveaux imbriqués, sans rôles ARIA détournés.</li>
+				<li>Utilisation de <code>aria-current</code> sur le lien actif pour signaler la section courante.</li>
+			</ul>
+		</CriteriaCard>
 
+		<CriteriaCard icon="⌨️" title="Navigation clavier native">
+			<ul>
+				<li>Parcours par <kbd>Tab</kbd>/<kbd>Maj+Tab</kbd> sur des liens standards, activation par <kbd>Entrée</kbd>.</li>
+				<li>Styles de focus visibles fournis par la feuille de style partagée et conservés sur tous les niveaux.</li>
+				<li>Activation via clic clavier ou souris met à jour le hash et synchronise l'état actif.</li>
+			</ul>
+		</CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/ContextualMenu.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/658" target="_blank" style={{color:'#0C41BD'}}>issue #658</a>)</p>
-</div>
+		<CriteriaCard icon="🧭" title="Repères et correspondance contenu">
+			<ul>
+				<li>Chaque élément pointe vers une ancre <code>hash</code>; les sections ciblées doivent avoir des <code>id</code> uniques et, idéalement, <code>tabindex="-1"</code> pour recevoir le focus programmatique.</li>
+				<li>Gestion du hash : changement d'URL et état contrôlé via <code>v-model</code> pour refléter l'élément actif.</li>
+				<li>Support multi-niveaux via la propriété optionnelle <code>level</code> (1 à 6) générant des listes imbriquées.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="ContextualMenu">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Fournissez systématiquement un <code>ariaLabel</code> descriptif (ex. « Plan de page »).</li>
+			<li>Assurez-vous que chaque <code>hash</code> correspond à un <code>id</code> existant dans la page, avec un titre associé via <code>aria-labelledby</code>.</li>
+			<li>Respectez l'ordre logique du contenu et les niveaux <code>level</code> pour refléter la structure réelle du document.</li>
+			<li>Évitez de placer des éléments interactifs non liens à l'intérieur des entrées du menu.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/TR/WCAG22/#navigation-mechanisms" target="_blank" rel="noopener noreferrer">WCAG – Mécanismes de navigation</a></li>
+			<li><a href="https://www.w3.org/TR/WCAG22/#link-purpose-in-context" target="_blank" rel="noopener noreferrer">WCAG – Objet du lien</a></li>
+			<li><a href="https://www.w3.org/WAI/tutorials/page-structure/sections/" target="_blank" rel="noopener noreferrer">WAI – Structuration des pages et sections</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

package/src/components/CookieBanner/CookieBanner.stories.ts

@@ -49,7 +49,7 @@ const meta = {
 			description: 'Événement émis lors de l\'acceptation des cookies',
 			table: {
 				category: 'Events',
-				type: { summary: '' },
+				type: { summary: 'Partial<{ functional: boolean; analytics: boolean }>' },
 			},
 		},
 		'onReject': {
@@ -57,7 +57,7 @@ const meta = {
 			description: 'Événement émis lors du refus des cookies',
 			table: {
 				category: 'Events',
-				type: { summary: '' },
+				type: { summary: 'Partial<{ functional: boolean; analytics: boolean }>' },
 			},
 		},
 		'onCustomize': {
@@ -68,6 +68,14 @@ const meta = {
 				type: { summary: '' },
 			},
 		},
+		'onSubmit': {
+			action: 'submit',
+			description: 'Événement émis lors de la sauvegarde des préférences personnalisées',
+			table: {
+				category: 'Events',
+				type: { summary: 'Partial<Preferences>' },
+			},
+		},
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore-  Object literal may only specify known properties
 		'onUpdate:modelValue': {
@@ -226,12 +234,10 @@ export const Default: Story = {
 		onAccept: { action: 'accept' },
 		onReject: { action: 'reject' },
 		onCustomize: { action: 'customize' },
+		onSubmit: { action: 'submit' },
 	},
 	args: {
 		items,
-		onAccept: fn(),
-		onReject: fn(),
-		onCustomize: fn(),
 	},
 
 	render: (args) => {
@@ -258,9 +264,6 @@ export const Default: Story = {
 	},
 
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -356,9 +359,6 @@ export const WithoutCookiesItems: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -411,9 +411,6 @@ export const BannerDescriptionSlot: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -520,9 +517,6 @@ export const CookiesDescriptionSlots: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -619,9 +613,6 @@ export const Customization: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/CookieBanner/CookieBanner.vue

@@ -34,14 +34,29 @@
 		return display.smAndDown.value ? '100%' : 'auto'
 	})
 
+	const itemKeys = computed(() => Object.keys(props.items ?? {}) as (keyof CookiesItems)[])
+
+	type ConsentPayload = Partial<Record<keyof CookiesItems, boolean>>
+
+	function buildConsentPayload(value: boolean): ConsentPayload {
+		if (!props.items) {
+			return {}
+		}
+
+		return itemKeys.value.reduce<ConsentPayload>((payload, key) => {
+			payload[key] = value
+			return payload
+		}, {})
+	}
+
 	function reject(): void {
 		active.value = false
-		emits('reject')
+		emits('reject', buildConsentPayload(false))
 	}
 
 	function accept(): void {
 		active.value = false
-		emits('accept')
+		emits('accept', buildConsentPayload(true))
 	}
 
 	function customize(): void {
@@ -51,7 +66,7 @@
 		emits('customize')
 	}
 
-	function personalizeCookies(e: Record<string, unknown>) {
+	function personalizeCookies(e: ConsentPayload) {
 		emits('submit', e)
 		showCookiesSelection.value = false
 		active.value = false
@@ -167,13 +182,13 @@
 		<VSheet
 			ref="vsheetRef"
 			v-bind="options.banner"
-			:aria-label="locales.label"
 			class="vd-cookie-banner"
 		>
 			<div
 				ref="bannerRef"
 				class="vd-cookie-banner__inner"
 				role="dialog"
+				:aria-label="locales.label"
 			>
 				<div class="d-flex align-start flex-nowrap pa-0 mb-6">
 					<h2
@@ -214,7 +229,7 @@
 					<Transition name="height">
 						<div v-if="showCookiesSelection && items">
 							<CookiesSelection
-								:items
+								:items="items"
 								@submit="personalizeCookies"
 							>
 								<template

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

@@ -1,15 +1,71 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as CookiesStories from '../CookieBanner.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as CookieBannerStories from '../CookieBanner.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={CookiesStories} />
+<Meta of={CookieBannerStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="CookieBanner"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/"
+>
+		<div class="mt-6">
+			<p>Rapport d’audit manuel : <a href="/audits/Cookies.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/806" target="_blank" style={{color:'#0C41BD'}}>issue #806</a>)</p>
+		</div>
+	<CriteriaSection>
+		<CriteriaCard icon="🧭" title="Structure et nom accessible">
+			<ul>
+				<li><strong>Rôle</strong> : <code>role="dialog"</code> sur le conteneur principal de la bannière.</li>
+				<li><strong>Nom accessible</strong> : <code>aria-label="Gestion des cookies"</code> (ou <code>aria-labelledby</code> pointant vers le titre).</li>
+				<li><strong>Hiérarchie</strong> : le titre est exposé (<code>h2</code>) et peut être référencé par <code>aria-labelledby</code> si besoin.</li>
+			</ul>
+		</CriteriaCard>
 
+		<CriteriaCard icon="⌨️" title="Navigation clavier">
+			<ul>
+				<li>Gestion de la touche <kbd>Tab</kbd> pour boucler le focus dans la bannière.</li>
+				<li>Échappe (<kbd>Esc</kbd>) ferme la bannière ou revient depuis la personnalisation.</li>
+				<li>Focus initial sur le bouton de fermeture à l’ouverture.</li>
+			</ul>
+		</CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/Cookies.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/806" target="_blank" style={{color:'#0C41BD'}}>issue #806</a>)</p>
-</div>
+		<CriteriaCard icon="🦻" title="Événements et consentement">
+			<ul>
+				<li><strong>accept/reject</strong> : émettent les catégories configurables (via les items) et toujours <code>essentials: true</code> si fournis.</li>
+				<li><strong>submit</strong> : renvoie les préférences personnalisées + <code>essentials: true</code> le cas échéant.</li>
+				<li>Pas de chargement de cookies non essentiels avant l’<code>accept</code> ou <code>submit</code>.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="CookieBanner">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Ne surchargez pas la description : un paragraphe clair et concis.</li>
+			<li>Assurez un contraste suffisant des boutons et du fond de bannière.</li>
+			<li>Proposez un lien « En savoir plus » vers votre politique cookies.</li>
+			<li>Chargez les cookies non essentiels uniquement après <code>accept</code> ou <code>submit</code>.</li>
+			<li>Conservez la possibilité de rouvrir la bannière ou de modifier le choix ailleurs dans l’interface.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/" target="_blank" rel="noopener noreferrer">APG : Alert dialog</a></li>
+			<li><a href="https://www.cnil.fr/fr/cookies-traceurs-que-dit-la-loi" target="_blank" rel="noopener noreferrer">CNIL : Cookies et traceurs</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>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -24,8 +24,14 @@ describe('CookieBanner', () => {
 		expect(wrapper.find('[data-test-id="customize"]').attributes('style')).toContain('100%')
 	})
 
-	it('emit a reject event when the reject btn is clicked', async () => {
+	it('emit a reject event with payload built from provided items', async () => {
 		const wrapper = mount(CookieBanner, {
+			props: {
+				items: {
+					enessentials: [],
+					functional: [],
+				},
+			},
 			global: {
 				stubs: {
 					Teleport: true,
@@ -35,11 +41,20 @@ describe('CookieBanner', () => {
 
 		await wrapper.find('[data-test-id="reject"]').trigger('click')
 
-		expect(wrapper.emitted()).toHaveProperty('reject')
+		expect(wrapper.emitted('reject')?.[0]?.[0]).toEqual({
+			enessentials: false,
+			functional: false,
+		})
 	})
 
-	it('emit a accept event when the accept btn is clicked', async () => {
+	it('emit an accept event with payload built from provided items', async () => {
 		const wrapper = mount(CookieBanner, {
+			props: {
+				items: {
+					functional: [],
+					analytics: [],
+				},
+			},
 			global: {
 				stubs: {
 					Teleport: true,
@@ -49,7 +64,10 @@ describe('CookieBanner', () => {
 
 		await wrapper.find('[data-test-id="accept"]').trigger('click')
 
-		expect(wrapper.emitted()).toHaveProperty('accept')
+		expect(wrapper.emitted('accept')?.[0]?.[0]).toEqual({
+			functional: true,
+			analytics: true,
+		})
 	})
 
 	it('does not close the dialog when the customize button is clicked and do not show the cookie form', async () => {
@@ -116,4 +134,30 @@ describe('CookieBanner', () => {
 		expect(wrapper.find('.vd-cookies-card').html()).toMatchSnapshot()
 		expect(wrapper.emitted()).toHaveProperty('customize')
 	})
+
+	it('emits submit payload coming from CookiesSelection without altering categories', async () => {
+		const wrapper = mount(CookieBanner, {
+			props: {
+				items: {
+					functional: [],
+					analytics: [],
+				},
+			},
+			global: {
+				stubs: {
+					Teleport: true,
+				},
+			},
+		})
+
+		await wrapper.find('[data-test-id="customize"]').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		const selection = wrapper.findComponent({ name: 'CookiesSelection' })
+		selection.vm.$emit('submit', { functional: true })
+
+		expect(wrapper.emitted('submit')?.[0]?.[0]).toEqual({
+			functional: true,
+		})
+	})
 })

package/src/components/Customs/SyCheckBoxGroup/SyCheckBoxGroup.mdx

@@ -0,0 +1,32 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import '../../../stories/styles/shared.css';
+import * as SyCheckBoxGroupStories from './SyCheckBoxGroup.stories';
+
+<Meta of={SyCheckBoxGroupStories} />
+
+<div className="header">
+  <h1>SyCheckBoxGroup</h1>
+  <p>Le composant `SyCheckBoxGroup` est un groupe de cases à cocher basé sur `SyCheckbox`, conforme au style du Design System et qui respecte les règles d'accessibilité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>.</p>
+</div>
+
+Il étend les fonctionnalités de base avec :
+
+- La gestion d’un groupe d’options via la prop `options`
+- Un mode **sélection unique** (par défaut) ou **multiple** (`multiple`)
+- Un système de validation avancé (erreur, avertissement, succès)
+
+<Canvas of={SyCheckBoxGroupStories.Default} />
+
+# API
+
+<Controls of={SyCheckBoxGroupStories.Default} />
+
+## Validation
+
+Le composant supporte trois types de validation :
+
+- Règles d'erreur standard (`customRules`)
+- Règles d'avertissement (`customWarningRules`)
+- Règles de succès (`customSuccessRules`)
+
+<a href="/?path=/docs/guide-du-dev-guide-de-validation-des-formulaires--docs" className="action-link">Pour plus d'informations sur la validation, consultez le guide de validation des formulaires.</a>