@cnamts/synapse 1.0.21 → 1.0.23

package/src/components/BackToTopBtn/BackToTopBtn.stories.ts

@@ -92,7 +92,7 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -104,6 +104,7 @@ export const Default: Story = {
 		max-height="200px"
 		class="overflow-y-auto"
 		style="scroll-behavior: smooth"
+		tabindex="0"
 	>
 		<VSheet
 			height="600px"
@@ -166,6 +167,7 @@ export const Default: Story = {
 				max-height="200px"
 				class="overflow-y-auto"
 				style="scroll-behavior: smooth"
+				tabindex="0"
 			>
 					<VSheet
 						height="600px"
@@ -192,7 +194,7 @@ export const Default: Story = {
 export const Customization: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -204,6 +206,7 @@ export const Customization: Story = {
 		max-height="200px"
 		class="overflow-y-auto"
 		style="scroll-behavior: smooth"
+		tabindex="0"
 	>
 		<VSheet
 			height="600px"
@@ -276,6 +279,7 @@ export const Customization: Story = {
 					max-height="200px"
 					class="overflow-y-auto"
 					style="scroll-behavior: smooth"
+					tabindex="0"
 				>
 					<VSheet
 						height="600px"
@@ -302,7 +306,7 @@ export const Customization: Story = {
 export const CustomPosition: Story = {
 	parameters: {
 		a11y: {
-			disable: true,
+			disable: false,
 		},
 		sourceCode: [
 			{
@@ -314,6 +318,7 @@ export const CustomPosition: Story = {
 		max-height="200px"
 		class="overflow-y-auto"
 		style="scroll-behavior: smooth"
+		tabindex="0"
 	>
 		<VSheet
 			height="600px"
@@ -386,6 +391,7 @@ export const CustomPosition: Story = {
 					max-height="200px"
 					class="overflow-y-auto"
 					style="scroll-behavior: smooth"
+					tabindex="0"
 				>
 					<VSheet
 						height="600px"

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

@@ -1,15 +1,95 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as Stories from '../BackToTopBtn.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
 import '@/stories/styles/shared.css';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={Stories} />
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
+<AccessibilityGuideLayout
+    componentName="BackToTopBtn"
+    iconSrc={AccessibilityIcon}
+    apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/button/"
+    apgLabel="WAI-ARIA Authoring Practices pour les boutons"
+>
 
 <div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/BackToTopBtn.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/4022" target="_blank" style={{color:'#0C41BD'}}>issue #4022</a>)</p>
+    <p>Rapport d'audit manuel : <a href="/audits/BackToTopBtn.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/4022" target="_blank" style={{color:'#0C41BD'}}>issue #4022</a>)</p>
 </div>
+
+    <CriteriaSection>
+        <CriteriaCard icon="⌨️" title="Navigation au clavier">
+            <ul>
+                <li><strong>Accessibilité native</strong> : Le bouton est un élément focusable via la touche Tab</li>
+                <li><strong>Activation clavier</strong> : Peut être activé avec les touches Entrée et Espace</li>
+                <li><strong>Focus visible</strong> : Indicateur de focus clair pour les utilisateurs du clavier</li>
+                <li><strong>Positionnement cohérent</strong> : Le bouton reste toujours accessible et n'interfère pas avec la navigation</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🔊" title="Lecteurs d'écran">
+            <ul>
+                <li><strong>Texte descriptif</strong> : Le bouton contient un texte clair indiquant sa fonction ("Retour en haut")</li>
+                <li><strong>Icône décorative</strong> : L'icône flèche est marquée comme décorative pour éviter la redondance</li>
+                <li><strong>Annonce sémantique</strong> : La fonction du bouton est clairement annoncée par les technologies d'assistance</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="📱" title="Adaptation responsive">
+            <ul>
+                <li><strong>Mode mobile</strong> : Le texte est masqué visuellement sur mobile (screen reader only)</li>
+                <li><strong>Taille minimale</strong> : Le bouton maintient une taille de 36px minimum sur mobile pour le toucher</li>
+                <li><strong>Positionnement optimisé</strong> : Le positionnement s'adapte aux différentes tailles d'écran</li>
+                <li><strong>Comportement cohérent</strong> : La fonctionnalité reste identique quel que soit l'appareil utilisé</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🎯" title="Critères RGAA respectés">
+            <ul>
+                <li><strong>Critère 7.1</strong> : Chaque script est compatible avec les technologies d'assistance</li>
+                <li><strong>Critère 7.3</strong> : Chaque script est contrôlable par le clavier et par tout dispositif de pointage</li>
+                <li><strong>Critère 11.2</strong> : Chaque conteneur d'informations possède une balise permettant de le rendre accessible</li>
+                <li><strong>Critère 12.4</strong> : Chaque texte est lisible lorsque la taille des caractères est modifiée</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection>
+        <p>
+            Explorez ci-dessous un exemple de BackToTopBtn entièrement accessible.
+            Essayez de modifier les propriétés pour voir comment le composant s'adapte.
+        </p>
+        <Story of={Stories.Default} />
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li><strong>Rendre les conteneurs accessibles</strong> : Ajouter <code>tabindex="0"</code> sur les conteneurs scrollables pour permettre l'accès au clavier</li>
+            <li><strong>Choisir le bon seuil</strong> : Utiliser un threshold raisonnable (100-200px) pour éviter que le bouton n'apparaisse trop tôt</li>
+            <li><strong>Positionnement cohérent</strong> : Maintenir une position cohérente du bouton pour ne pas dérouter les utilisateurs</li>
+            <li><strong>Texte clair et concis</strong> : Utiliser un texte descriptif mais court pour le bouton (ex: "Retour en haut", "Haut de page")</li>
+            <li><strong>Contraste suffisant</strong> : S'assurer que le bouton a un contraste suffisant avec l'arrière-plan dans tous les thèmes</li>
+            <li><strong>Ne pas surcharger</strong> : Éviter d'utiliser plusieurs boutons de retour en haut sur la même page</li>
+            <li><strong>Test mobile</strong> : Vérifier que le bouton reste facilement accessible sur les écrans tactiles</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html" target="_blank" rel="noopener noreferrer">WCAG 2.1 - Keyboard Accessibility</a> - Guide complet sur l'accessibilité au clavier</li>
+            <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/button/" target="_blank" rel="noopener noreferrer">ARIA Authoring Practices - Button Pattern</a> - Bonnes pratiques pour les boutons accessibles</li>
+            <li><a href="https://rgaa_numerique.gitbook.io/rgaa-accessibilite/criteres-techniques/" target="_blank" rel="noopener noreferrer">Référentiel Général d'Amélioration de l'Accessibilité (RGAA)</a> - Critères techniques français</li>
+            <li><a href="https://web.dev/focus-visible/" target="_blank" rel="noopener noreferrer">Focus Visible Best Practices</a> - Guide sur les indicateurs de focus visibles</li>
+            <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html" target="_blank" rel="noopener noreferrer">WCAG Understanding Focus Visible</a> - Comprendre l'exigence de focus visible</li>
+        </ul>
+    </ResourcesSection>
+
+</AccessibilityGuideLayout>

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

@@ -1,8 +1,6 @@
 import { describe, it, expect, vi, afterEach } from 'vitest'
 import { mount } from '@vue/test-utils'
-
 import Captcha from '../Captcha.vue'
-import { vuetify } from '@tests/unit/setup'
 
 describe('Captcha', () => {
 	afterEach(() => {
@@ -18,9 +16,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -60,9 +55,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -101,9 +93,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -124,9 +113,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -163,9 +149,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -193,9 +176,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -221,9 +201,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -251,9 +228,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',
@@ -278,9 +252,6 @@ describe('Captcha', () => {
 		vi.stubGlobal('fetch', vi.fn().mockResolvedValue(response))
 
 		const wrapper = mount(Captcha, {
-			global: {
-				plugins: [vuetify],
-			},
 			props: {
 				urlCreate: '/captcha/captcha.json',
 				urlGetImage: '/captcha/captcha.png',

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

@@ -100,56 +100,9 @@ exports[`Captcha > renders correctly in audio mode 1`] = `
             ">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
-                <div
-                  aria-hidden="true"
-                  aria-valuemax="100"
-                  aria-valuemin="0"
-                  class="
-                    v-locale--is-ltr
-                    v-progress-linear
-                    v-theme--light
-                  "
-                  role="progressbar"
-                  style="
-                    top: 0px;
-                    height: 0px;
-                    --v-progress-linear-height: 2px;
-                  "
-                >
-                  <!---->
-                  <div
-                    class="v-progress-linear__background"
-                    style="opacity: NaN;"
-                  ></div>
-                  <div
-                    class="v-progress-linear__buffer"
-                    style="
-                      opacity: NaN;
-                      width: 0%;
-                    "
-                  ></div>
-                  <transition-stub
-                    appear="false"
-                    css="true"
-                    name="fade-transition"
-                    persisted="false"
-                  >
-                    <div class="v-progress-linear__indeterminate">
-                      <div class="
-                        long
-                        v-progress-linear__indeterminate
-                      "></div>
-                      <div class="
-                        short
-                        v-progress-linear__indeterminate
-                      "></div>
-                    </div>
-                  </transition-stub>
-                  <!---->
-                </div>
+                <!-- v-if -->
               </div>
               <div class="v-field__prepend-inner">
-                <!---->
                 <!-- v-if -->
                 <!-- v-if -->
               </div>
@@ -159,22 +112,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 +143,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 +154,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 +170,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"
@@ -487,56 +442,9 @@ exports[`Captcha > renders correctly in image mode 1`] = `
             ">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
-                <div
-                  aria-hidden="true"
-                  aria-valuemax="100"
-                  aria-valuemin="0"
-                  class="
-                    v-locale--is-ltr
-                    v-progress-linear
-                    v-theme--light
-                  "
-                  role="progressbar"
-                  style="
-                    top: 0px;
-                    height: 0px;
-                    --v-progress-linear-height: 2px;
-                  "
-                >
-                  <!---->
-                  <div
-                    class="v-progress-linear__background"
-                    style="opacity: NaN;"
-                  ></div>
-                  <div
-                    class="v-progress-linear__buffer"
-                    style="
-                      opacity: NaN;
-                      width: 0%;
-                    "
-                  ></div>
-                  <transition-stub
-                    appear="false"
-                    css="true"
-                    name="fade-transition"
-                    persisted="false"
-                  >
-                    <div class="v-progress-linear__indeterminate">
-                      <div class="
-                        long
-                        v-progress-linear__indeterminate
-                      "></div>
-                      <div class="
-                        short
-                        v-progress-linear__indeterminate
-                      "></div>
-                    </div>
-                  </transition-stub>
-                  <!---->
-                </div>
+                <!-- v-if -->
               </div>
               <div class="v-field__prepend-inner">
-                <!---->
                 <!-- v-if -->
                 <!-- v-if -->
               </div>
@@ -546,22 +454,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 +485,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 +496,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 +512,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: [
 					{