@cnamts/synapse 1.0.20 → 1.0.22

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

@@ -118,11 +118,17 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                 >
                   <!---->
                   <div
-                    class="v-progress-linear__background"
+                    class="
+                      bg-primary
+                      v-progress-linear__background
+                    "
                     style="opacity: NaN;"
                   ></div>
                   <div
-                    class="v-progress-linear__buffer"
+                    class="
+                      bg-primary
+                      v-progress-linear__buffer
+                    "
                     style="
                       opacity: NaN;
                       width: 0%;
@@ -136,10 +142,12 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                   >
                     <div class="v-progress-linear__indeterminate">
                       <div class="
+                        bg-primary
                         long
                         v-progress-linear__indeterminate
                       "></div>
                       <div class="
+                        bg-primary
                         short
                         v-progress-linear__indeterminate
                       "></div>
@@ -149,7 +157,6 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                 </div>
               </div>
               <div class="v-field__prepend-inner">
-                <!---->
                 <!-- v-if -->
                 <!-- v-if -->
               </div>
@@ -159,22 +166,26 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
               >
                 <!---->
                 <label
+                  aria-hidden="false"
                   class="
                     v-field-label
                     v-label
                   "
-                  for="input-v-1"
+                  for="input-v-2"
+                  id="input-v-2-label"
                 >
                   <!---->
                   Caractères de l’audio
                 </label>
                 <!---->
                 <input
-                  aria-describedby="input-v-1-messages"
+                  aria-describedby="input-v-2-messages"
                   aria-label="Caractères de l’audio"
+                  aria-labelledby="input-v-2-label"
                   autocomplete="off"
                   class="v-field__input"
-                  id="input-v-1"
+                  direction="horizontal"
+                  id="input-v-2"
                   title="Caractères de l’audio"
                   type="text"
                 />
@@ -186,7 +197,6 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                 <!-- v-if -->
                 <!-- v-if -->
                 <!-- v-if -->
-                <!---->
               </div>
               <div class="v-field__outline">
                 <div class="v-field__outline__start"></div>
@@ -198,7 +208,6 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
                       v-field-label--floating
                       v-label
                     "
-                    for="input-v-1"
                   >
                     <!---->
                     Caractères de l’audio
@@ -215,7 +224,7 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
               appear="false"
               class="v-messages"
               css="true"
-              id="input-v-1-messages"
+              id="input-v-2-messages"
               name="slide-y-transition"
               persisted="false"
               tag="div"
@@ -505,11 +514,17 @@ exports[`Captcha > renders correctly in image mode 1`] = `
                 >
                   <!---->
                   <div
-                    class="v-progress-linear__background"
+                    class="
+                      bg-primary
+                      v-progress-linear__background
+                    "
                     style="opacity: NaN;"
                   ></div>
                   <div
-                    class="v-progress-linear__buffer"
+                    class="
+                      bg-primary
+                      v-progress-linear__buffer
+                    "
                     style="
                       opacity: NaN;
                       width: 0%;
@@ -523,10 +538,12 @@ exports[`Captcha > renders correctly in image mode 1`] = `
                   >
                     <div class="v-progress-linear__indeterminate">
                       <div class="
+                        bg-primary
                         long
                         v-progress-linear__indeterminate
                       "></div>
                       <div class="
+                        bg-primary
                         short
                         v-progress-linear__indeterminate
                       "></div>
@@ -536,7 +553,6 @@ exports[`Captcha > renders correctly in image mode 1`] = `
                 </div>
               </div>
               <div class="v-field__prepend-inner">
-                <!---->
                 <!-- v-if -->
                 <!-- v-if -->
               </div>
@@ -546,22 +562,26 @@ exports[`Captcha > renders correctly in image mode 1`] = `
               >
                 <!---->
                 <label
+                  aria-hidden="false"
                   class="
                     v-field-label
                     v-label
                   "
-                  for="input-v-0"
+                  for="input-v-1"
+                  id="input-v-1-label"
                 >
                   <!---->
                   Caractères de l’image
                 </label>
                 <!---->
                 <input
-                  aria-describedby="input-v-0-messages"
+                  aria-describedby="input-v-1-messages"
                   aria-label="Caractères de l’image"
+                  aria-labelledby="input-v-1-label"
                   autocomplete="off"
                   class="v-field__input"
-                  id="input-v-0"
+                  direction="horizontal"
+                  id="input-v-1"
                   title="Caractères de l’image"
                   type="text"
                 />
@@ -573,7 +593,6 @@ exports[`Captcha > renders correctly in image mode 1`] = `
                 <!-- v-if -->
                 <!-- v-if -->
                 <!-- v-if -->
-                <!---->
               </div>
               <div class="v-field__outline">
                 <div class="v-field__outline__start"></div>
@@ -585,7 +604,6 @@ exports[`Captcha > renders correctly in image mode 1`] = `
                       v-field-label--floating
                       v-label
                     "
-                    for="input-v-0"
                   >
                     <!---->
                     Caractères de l’image
@@ -602,7 +620,7 @@ exports[`Captcha > renders correctly in image mode 1`] = `
               appear="false"
               class="v-messages"
               css="true"
-              id="input-v-0-messages"
+              id="input-v-1-messages"
               name="slide-y-transition"
               persisted="false"
               tag="div"

package/src/components/ChipList/ChipList.vue

@@ -312,14 +312,16 @@
 	padding: 0;
 }
 
-// Styles pour le bouton de suppression
-.remove-chip {
+.sy-chip-list .remove-chip {
 	padding: 0 !important;
 	min-width: auto !important;
 	width: auto !important;
 	height: auto !important;
 	flex-shrink: 0 !important;
+}
 
+// Styles pour le bouton de suppression
+.remove-chip {
 	// Assurer que l'icône reste visible en zoom texte 200%
 	:deep(.v-icon) {
 		font-size: 1rem !important;

package/src/components/CollapsibleList/CollapsibleList.stories.ts

@@ -15,6 +15,10 @@ const meta = {
 		items: {
 			control: 'object',
 		},
+		headingLevel: {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
 	},
 } as Meta<typeof CollapsibleList>
 
@@ -32,7 +36,7 @@ export const Default: Story = {
 		<CollapsibleList 
 			:list-title="listTitle"
 			:items="items" 
-		/>
+  :heading-level="headingLevel"		/>
 	</div>
 </template>
 				`,
@@ -43,7 +47,7 @@ export const Default: Story = {
 	import { CollapsibleList } from '@cnamts/synapse'
 	
 	const listTitle = 'Santé'
-	
+	 const headingLevel = 4
 	const items = [
         		{
 			text: 'Mon espace santé',
@@ -61,6 +65,7 @@ export const Default: Story = {
 	},
 	args: {
 		listTitle: 'Santé',
+		headingLevel: 4,
 		items: [
 			{
 				text: 'Mon espace santé',
@@ -80,7 +85,7 @@ export const Default: Story = {
 			},
 			template: `
 				<div class="d-flex flex-wrap align-center pa-4">
-					<CollapsibleList v-bind="args" />
+					<CollapsibleList v-bind="args"/>
 				</div>
 			`,
 		}

package/src/components/CollapsibleList/CollapsibleList.vue

@@ -2,11 +2,15 @@
 	import { computed } from 'vue'
 	import { useDisplay } from 'vuetify'
 	import type { ListItem } from './types'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
-	const props = defineProps<{
+	const props = withDefaults(defineProps<{
 		listTitle: string | null
 		items: ListItem[]
-	}>()
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+	}>(), {
+		headingLevel: 4,
+	})
 
 	const { smAndDown } = useDisplay()
 
@@ -55,13 +59,17 @@
 		v-else
 		class="vd-collapse-list"
 	>
-		<h4
-			class="text-subtitle-1 font-weight-bold mb-3"
+		<SyHeading
+			:class="headingLevel === 4 ? 'text-subtitle-1 font-weight-bold mb-3' : 'font-weight-bold mb-3'"
+			:level="headingLevel"
 		>
 			{{ listTitle }}
-		</h4>
+		</SyHeading>
 
-		<ul class="pl-0">
+		<ul
+			class="
+			pl-0"
+		>
 			<li
 				v-for="(item, index) in items"
 				:key="index"

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

@@ -18,7 +18,26 @@ import {
 	iconSrc={AccessibilityIcon}
 	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/"
 >
+<AuditSection>
+<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>
 	<CriteriaSection>
+<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
+  <ul>
+    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h4, défini dans l’implémentation du composant.</li>
+      <code>&lt;CollapsibleList 
+          :list-title="listTitle"
+          :items="items" 
+          :heading-level="4" /&gt; </code>
+    
+    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
+  </ul>
+</CriteriaCard>
+
 		<CriteriaCard icon="🔍" title="Structure sémantique">
 			<ul>
 				<li><strong>Comportement adaptatif</strong> : Section pliable sur mobile, liste statique sur desktop</li>
@@ -66,11 +85,5 @@ import {
 		</ul>
 	</ResourcesSection>
 
-<AuditSection>
-<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/CollapsibleList/tests/CollapsibleList.a11y.spec.ts

@@ -25,6 +25,7 @@ describe('CollapsibleList – accessibility (axe)', () => {
 	it('has no obvious axe violations in desktop mode', async () => {
 		const wrapper = mount(CollapsibleList, {
 			props: {
+				headingLevel: 4,
 				listTitle: 'Santé',
 				items,
 			},

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

@@ -7,6 +7,7 @@ describe('CollapsibleList', () => {
 	it('renders correctly', async () => {
 		const wrapper = mount(CollapsibleList, {
 			propsData: {
+				headingLevel: 4,
 				listTitle: 'Santé',
 				items: [
 					{
@@ -30,6 +31,7 @@ describe('CollapsibleList', () => {
 	it('renders correctly with in mobile mode', () => {
 		const wrapper = mount(CollapsibleList, {
 			propsData: {
+				headingLevel: 4,
 				listTitle: 'Santé',
 				items: [
 					{

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

@@ -8,6 +8,14 @@ const meta = {
 	title: 'Composants/Feedback/CookieBanner',
 	component: CookieBanner,
 	argTypes: {
+		'headingLevel': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
+		'headingLevelInformation': {
+			control: { type: 'select' },
+			options: [1, 2, 3, 4, 5, 6],
+		},
 		'modelValue': {
 			description: 'V-model, control la visibilité de la bannière',
 			control: { type: 'boolean' },
@@ -49,7 +57,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 +65,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 +76,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': {
@@ -185,6 +201,8 @@ const meta = {
 	},
 	args: {
 		modelValue: false,
+		headingLevel: 2,
+		headingLevelInformation: 2,
 	},
 } satisfies Meta<typeof CookieBanner>
 
@@ -226,12 +244,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 +274,6 @@ export const Default: Story = {
 	},
 
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -356,9 +369,6 @@ export const WithoutCookiesItems: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -411,9 +421,6 @@ export const BannerDescriptionSlot: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -520,9 +527,6 @@ export const CookiesDescriptionSlots: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',
@@ -619,9 +623,6 @@ export const Customization: Story = {
 		}
 	},
 	parameters: {
-		a11y: {
-			disable: true,
-		},
 		sourceCode: [
 			{
 				name: 'Template',

package/src/components/CookieBanner/CookieBanner.vue

@@ -9,10 +9,18 @@
 	import { config } from './config'
 	import { locales } from './locales'
 	import CookiesSelection from '../CookiesSelection/CookiesSelection.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
-	const props = defineProps<CustomizableOptions & {
+	const props = withDefaults(defineProps<CustomizableOptions & {
 		items?: CookiesItems
-	}>()
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+		headingLevelInformation?: 1 | 2 | 3 | 4 | 5 | 6
+
+	}>(), {
+		items: undefined,
+		headingLevel: 2,
+		headingLevelInformation: 3,
+	})
 
 	const options = useCustomizableOptions(config, props)
 
@@ -34,14 +42,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 +74,7 @@
 		emits('customize')
 	}
 
-	function personalizeCookies(e: Record<string, unknown>) {
+	function personalizeCookies(e: ConsentPayload) {
 		emits('submit', e)
 		showCookiesSelection.value = false
 		active.value = false
@@ -167,20 +190,21 @@
 		<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
-						class="text-h5 font-weight-bold"
+					<SyHeading
+						:class="headingLevel === 2 ? 'text-h5 font-weight-bold' : 'font-weight-bold'"
+						:level="headingLevel"
 					>
 						{{ locales.title }}
-					</h2>
+					</SyHeading>
 
 					<VSpacer v-bind="options.spacer" />
 
@@ -214,7 +238,8 @@
 					<Transition name="height">
 						<div v-if="showCookiesSelection && items">
 							<CookiesSelection
-								:items
+								:items="items"
+								:heading-level="headingLevelInformation"
 								@submit="personalizeCookies"
 							>
 								<template