@cnamts/synapse 1.0.21 → 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/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' },
@@ -193,6 +201,8 @@ const meta = {
 	},
 	args: {
 		modelValue: false,
+		headingLevel: 2,
+		headingLevelInformation: 2,
 	},
 } satisfies Meta<typeof CookieBanner>
 

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)
 
@@ -191,11 +199,12 @@
 				: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" />
 
@@ -230,6 +239,7 @@
 						<div v-if="showCookiesSelection && items">
 							<CookiesSelection
 								:items="items"
+								:heading-level="headingLevelInformation"
 								@submit="personalizeCookies"
 							>
 								<template

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

@@ -22,6 +22,15 @@ import {
 			<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="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 h2, défini dans l’implémentation du composant.</li>
+      <code>&lt;CookieBanner
+          :heading-level="2" /&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 et nom accessible">
 			<ul>
 				<li><strong>Rôle</strong> : <code>role="dialog"</code> sur le conteneur principal de la bannière.</li>

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

@@ -27,8 +27,10 @@ describe('CookieBanner', () => {
 	it('emit a reject event with payload built from provided items', async () => {
 		const wrapper = mount(CookieBanner, {
 			props: {
+				headingLevel: 2,
+				headingLevelInformation: 2,
 				items: {
-					enessentials: [],
+					essentials: [],
 					functional: [],
 				},
 			},
@@ -42,7 +44,7 @@ describe('CookieBanner', () => {
 		await wrapper.find('[data-test-id="reject"]').trigger('click')
 
 		expect(wrapper.emitted('reject')?.[0]?.[0]).toEqual({
-			enessentials: false,
+			essentials: false,
 			functional: false,
 		})
 	})
@@ -50,6 +52,8 @@ describe('CookieBanner', () => {
 	it('emit an accept event with payload built from provided items', async () => {
 		const wrapper = mount(CookieBanner, {
 			props: {
+				headingLevel: 2,
+				headingLevelInformation: 2,
 				items: {
 					functional: [],
 					analytics: [],
@@ -90,6 +94,8 @@ describe('CookieBanner', () => {
 	it('does not close the dialog when the customize button is clicked and show the cookie form', async () => {
 		const wrapper = mount(CookieBanner, {
 			props: {
+				headingLevel: 2,
+				headingLevelInformation: 2,
 				items: {
 					essentials: [
 						{
@@ -138,6 +144,8 @@ describe('CookieBanner', () => {
 	it('emits submit payload coming from CookiesSelection without altering categories', async () => {
 		const wrapper = mount(CookieBanner, {
 			props: {
+				headingLevel: 2,
+				headingLevelInformation: 2,
 				items: {
 					functional: [],
 					analytics: [],

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

@@ -136,6 +136,7 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
       <h2 class="
         font-weight-bold
         mb-2
+        sy-heading
         text-subtitle-1
       ">
         Cookies requis
@@ -224,14 +225,15 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
           <!---->
         </div>
       </details>
-      <div
-        aria-level="3"
-        class="vd-cookies-information__heading"
+      <h3
+        class="
+          sy-heading
+          vd-cookies-information__heading
+        "
         id="radio-group-essentials"
-        role="heading"
       >
         Accepter les cookies de type Cookies requis, ce champ est requis.
-      </div>
+      </h3>
       <!-- v-if -->
     </div>
     <div class="
@@ -241,6 +243,7 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
       <h2 class="
         font-weight-bold
         mb-2
+        sy-heading
         text-subtitle-1
       ">
         Cookies fonctionnels
@@ -318,14 +321,15 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
           <!---->
         </div>
       </details>
-      <div
-        aria-level="3"
-        class="vd-cookies-information__heading"
+      <h3
+        class="
+          sy-heading
+          vd-cookies-information__heading
+        "
         id="radio-group-functional"
-        role="heading"
       >
         Accepter les cookies de type Cookies fonctionnels, ce champ est requis.
-      </div>
+      </h3>
       <div class="
         v-input
         v-input--center-affix
@@ -442,6 +446,7 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
       <h2 class="
         font-weight-bold
         mb-2
+        sy-heading
         text-subtitle-1
       ">
         Cookies d’analyse
@@ -519,14 +524,15 @@ exports[`CookieBanner > does not close the dialog when the customize button is c
           <!---->
         </div>
       </details>
-      <div
-        aria-level="3"
-        class="vd-cookies-information__heading"
+      <h3
+        class="
+          sy-heading
+          vd-cookies-information__heading
+        "
         id="radio-group-analytics"
-        role="heading"
       >
         Accepter les cookies de type Cookies d’analyse, ce champ est requis.
-      </div>
+      </h3>
       <div class="
         v-input
         v-input--center-affix

package/src/components/CookiesSelection/CookiesInformation/CookiesInformation.vue

@@ -7,11 +7,18 @@
 	import type { CookieTypes, Cookie } from '../types'
 	import { locales } from './locales'
 	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
-	defineProps<{
+	withDefaults(defineProps<{
 		type: CookieTypes
 		tableItems: Cookie[]
-	}>()
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+		headingLevelRadioGroup?: 1 | 2 | 3 | 4 | 5 | 6
+
+	}>(), {
+		headingLevel: 2,
+		headingLevelRadioGroup: 3,
+	})
 
 	const status = defineModel<boolean | undefined>()
 
@@ -93,9 +100,12 @@
 
 <template>
 	<div class="vd-cookies-information">
-		<h2 class="text-subtitle-1 font-weight-bold mb-2">
+		<SyHeading
+			:class="headingLevel === 2 ? 'text-subtitle-1 font-weight-bold mb-2' : 'font-weight-bold mb-2'"
+			:level="headingLevel"
+		>
 			{{ locales[type].title }}
-		</h2>
+		</SyHeading>
 
 		<p class="mb-4">
 			{{ locales[type].description }}
@@ -129,14 +139,13 @@
 			</CookiesTable>
 		</details>
 
-		<div
+		<SyHeading
 			:id="`radio-group-${type}`"
-			role="heading"
-			aria-level="3"
+			:level="headingLevelRadioGroup"
 			class="vd-cookies-information__heading"
 		>
 			{{ locales.fieldLabel(locales[type].title) }}
-		</div>
+		</SyHeading>
 
 		<VRadioGroup
 			v-if="type !== 'essentials'"

package/src/components/CookiesSelection/CookiesInformation/tests/CookiesInformation.a11y.spec.ts

@@ -27,6 +27,7 @@ describe('CookiesInformation – accessibility (axe)', () => {
 	it('has no obvious axe violations for functional cookies section', async () => {
 		const wrapper = mount(CookiesInformation, {
 			props: {
+				headingLevel: 2,
 				tableItems: cookies,
 				type: 'functional',
 			},

package/src/components/CookiesSelection/CookiesInformation/tests/CookiesInformation.spec.ts

@@ -20,6 +20,7 @@ describe('CookiesInformation', () => {
 	it('renders correctly', () => {
 		const wrapper = mount(CookiesInformation, {
 			props: {
+				headingLevel: 2,
 				tableItems: cookies,
 				type: 'functional',
 			},
@@ -38,6 +39,7 @@ describe('CookiesInformation', () => {
 	it('renders correctly without items', () => {
 		const wrapper = mount(CookiesInformation, {
 			props: {
+				headingLevel: 2,
 				type: 'functional',
 				tableItems: [],
 			},
@@ -49,6 +51,7 @@ describe('CookiesInformation', () => {
 	it('renders correctly when details is toggled', async () => {
 		const wrapper = mount(CookiesInformation, {
 			propsData: {
+				headingLevel: 2,
 				tableItems: cookies,
 				type: 'functional',
 			},
@@ -97,6 +100,7 @@ describe('CookiesInformation', () => {
 	it('update the radio when the modelValue change', async () => {
 		const wrapper = mount(CookiesInformation, {
 			props: {
+				headingLevel: 2,
 				tableItems: cookies,
 				type: 'functional',
 				modelValue: true,
@@ -117,6 +121,7 @@ describe('CookiesInformation', () => {
 	it('do not set the radio when the modelValue is undefined', async () => {
 		const wrapper = mount(CookiesInformation, {
 			props: {
+				headingLevel: 2,
 				tableItems: cookies,
 				type: 'functional',
 				modelValue: undefined,