@cnamts/synapse 1.0.19 → 1.0.21

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

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

package/src/components/CollapsibleList/{Accessibilite.mdx → accessibilite/Accessibility.mdx}

@@ -1,6 +1,5 @@
 import { Meta, Story } from '@storybook/blocks';
-import * as AccessStories from './Accessibilite.stories.ts';
-import * as CollapsibleListStories from './CollapsibleList.stories';
+import * as CollapsibleListStories from '../CollapsibleList.stories';
 import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import {
 	AccessibilityGuideLayout,
@@ -10,9 +9,9 @@ import {
 	BestPracticesSection,
 	ResourcesSection,
 	AuditSection,
-} from '../../stories/accessibility/AccessibilityGuideLayout.mdx';
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={AccessStories} />
+<Meta of={CollapsibleListStories} />
 
 <AccessibilityGuideLayout
 	componentName="CollapsibleList"
@@ -68,7 +67,10 @@ import {
 	</ResourcesSection>
 
 <AuditSection>
-		<p>Rapport d'audit manuel : <a href="/audits/CollapsibleList.xlsx" style={{color: '#0C41BD'}}>Voir le rapport</a></p>
-		<p style={{color: 'grey', fontSize: '14px'}}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/pull/792" target="_blank" style={{color: '#0C41BD'}}>issue #792</a>)</p>
+<div class="mt-2">
+<p>Rapport d’audit manuel : <a href="/audits/CollapsibleList.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/792" target="_blank" style={{color:'#0C41BD'}}>issue #792</a>)</p>
+</div>
+
 	</AuditSection>
 </AccessibilityGuideLayout>

package/src/components/Common/IconSlot/IconSlot.vue

@@ -25,7 +25,7 @@
 	const slots = useSlots()
 
 	const hasDefaultSlotContent = computed(() => {
-		const vnodes = slots.default?.() ?? []
+		const vnodes = slots.default?.({}) ?? []
 		return vnodes.some((vnode) => {
 			if (vnode.type === Comment) return false
 			if (vnode.type === Text) {

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

@@ -0,0 +1,71 @@
+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={ContextualMenuStories} />
+
+<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>
+
+		<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

@@ -0,0 +1,71 @@
+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={CookieBannerStories}/>
+
+<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>
+
+		<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/CookiesSelection/CookiesInformation/CookiesInformation.vue

@@ -6,6 +6,7 @@
 	import CookiesTable from '../CookiesTable/CookiesTable.vue'
 	import type { CookieTypes, Cookie } from '../types'
 	import { locales } from './locales'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	defineProps<{
 		type: CookieTypes
@@ -104,12 +105,12 @@
 			<summary class="mb-1">
 				{{ open ? locales.hideInformation : locales.showInformation }}
 
-				<VIcon
+				<SyIcon
+					:icon="open ? mdiChevronUp : mdiChevronDown"
 					class="mr-2"
 					data-test="chevron"
-				>
-					{{ open ? mdiChevronUp : mdiChevronDown }}
-				</VIcon>
+					decorative
+				/>
 			</summary>
 
 			<CookiesTable

package/src/components/CopyBtn/CopyBtn.vue

@@ -7,6 +7,7 @@
 
 	import { locales } from './locales'
 	import { config } from './config'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 
 	const props = withDefaults(defineProps<CustomizableOptions & {
 		ariaLabel?: string
@@ -106,9 +107,11 @@
 					@click="copy"
 				>
 					<slot name="icon">
-						<VIcon v-bind="options.icon">
-							{{ copyIcon }}
-						</VIcon>
+						<SyIcon
+							v-bind="options.icon"
+							:icon="copyIcon"
+							decorative
+						/>
 					</slot>
 				</VBtn>
 			</template>

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

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

package/src/components/Customs/Selects/SelectBtnField/accessibilite/Accessibility.mdx

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