@cnamts/synapse 1.0.2 → 1.0.4

package/src/components/Amelipro/UserMenu/UserMenuDetails/types.d.ts

@@ -0,0 +1,20 @@
+export interface UserMenuDetailsInfos {
+	userName?: string
+	profil?: string
+	denomination?: string
+	rpps?: string
+	adeli?: string
+	am?: string
+	finess?: string
+	email?: string
+	adresse?: IAdresse
+}
+
+export interface IAdresse {
+	numero?: string
+	complement?: string
+	type?: string
+	nom?: string
+	codePostal?: string
+	commune?: string
+}

package/src/components/Amelipro/UserMenu/tests/UserMenu.spec.ts

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import UserMenu from '../UserMenu.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('UserMenu', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(UserMenu, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				lastConnexion: '24/04/2025',
+				uniqueId: 'user-information-summary-id',
+				UserMenuInfos: {
+					userName: 'nom utilisateur',
+					profil: 'profil',
+					denomination: 'dénomination',
+					rpps: 'Numéro RPPS',
+					adeli: 'Numéro Adeli',
+					am: 'Numéro AM',
+					finess: 'Numéro Finess',
+					email: 'email',
+					adresse: {
+						numero: 'numéro',
+						complement: 'complément',
+						type: 'type',
+						nom: 'nom',
+						codePostal: 'code postal',
+						commune: 'commune',
+					},
+				},
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/UserMenu/tests/__snapshots__/UserMenu.spec.ts.snap

@@ -0,0 +1,98 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UserMenu > render correctly 1`] = `
+<div
+  class="user-menu"
+  id="user-information-summary-id"
+  usermenuinfos="[object Object]"
+>
+  <button
+    class="
+      btn--icon
+      elevation-0
+      rounded-0
+      v-btn
+      v-btn--density-default
+      v-btn--elevated
+      v-btn--icon
+      v-btn--size-default
+      v-btn--variant-elevated
+      v-theme--light
+    "
+    id="user-information-summary-id-open-btn"
+    plain=""
+    style="
+      height: auto;
+      width: auto;
+    "
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <span
+        class="d-sr-only"
+        id="user-information-summary-id-open-btn-btn-label"
+      >
+        infos utilisateur
+      </span>
+      <span
+        class="
+          amelipro-icon
+          icon-custom
+        "
+        id="user-information-summary-id-open-btn-icon"
+      >
+        <span
+          aria-hidden="true"
+          class="
+            amelipro-custom-icon
+            custom-color
+          "
+          focusable="false"
+          role="img"
+          style="
+            color: #FFFFFF;
+            height: 2rem;
+            width: 2rem;
+          "
+        >
+          <span>
+            <svg
+              aria-hidden="true"
+              clip-rule="evenodd"
+              fill-rule="evenodd"
+              height="34"
+              image-rendering="optimizeQuality"
+              shape-rendering="geometricPrecision"
+              text-rendering="geometricPrecision"
+              viewBox="0 0 1823 1823"
+              width="34"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                class="circle-color"
+                cx="912"
+                cy="912"
+                r="912"
+              />
+              <path
+                class="shape-color"
+                d="M962 454c117 0 125 154 125 154v145s1 111-73 152c-2 10-3 20-1 30 4-2-21 146 106 165 92 15 178 57 247 120 23 23 40 186 40 186H418s-2-132 40-186c73-62 162-104 257-120 128-19 85-160 89-158 2-10 1-21-1-31 0 0-69-89-68-169 1-81 0-134 0-134s-4-190 126-190l101 36z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+    </span>
+    <!---->
+    <!---->
+  </button>
+  <!---->
+  <!---->
+</div>
+`;

package/src/components/Amelipro/UserMenu/types.d.ts

@@ -0,0 +1,9 @@
+import type { UserMenuDetailsInfos } from './UserMenuDetails/types'
+
+export interface UserMenuInfos {
+	lastConnexion?: string
+	logout?: CallableFunction
+	account?: CallableFunction
+	updateSelectionStructure?: CallableFunction
+	userMenuDetailsInfos?: UserMenuDetailsInfos
+}

package/src/components/Amelipro/types.ts

@@ -0,0 +1,5 @@
+export interface IndexedObject<T = string> {
+	[key: string]: T
+}
+
+export type ValidateOnType = 'lazy' | ('input' | 'blur' | 'submit') | 'input lazy' | 'blur lazy' | 'submit lazy' | 'lazy input' | 'lazy blur' | 'lazy submit' | undefined

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

@@ -35,6 +35,9 @@ describe('BackToTopBtn', () => {
 	})
 
 	it('shows the button when the user scrolls down', async () => {
+		// Initialize scroll position to 0
+		vi.spyOn(window, 'scrollY', 'get').mockReturnValue(0)
+
 		const wrapper = mount(BackToTopBtn, {
 			global: {
 				plugins: [vuetify],
@@ -42,41 +45,66 @@ describe('BackToTopBtn', () => {
 			attachTo: document.body,
 		})
 
+		// Wait for component to initialize
+		await wrapper.vm.$nextTick()
+
 		const buttonElement = wrapper.find('.vd-back-to-top-btn')
-		expect(buttonElement.isVisible()).toBeFalsy()
+		// Button should be hidden initially (v-show="false")
+		expect(buttonElement.exists()).toBe(true)
+		expect((buttonElement.element as HTMLElement).style.display).toBe('none')
 
+		// Simulate scroll down
 		vi.spyOn(window, 'scrollY', 'get').mockReturnValue(500)
 		window.dispatchEvent(new CustomEvent('scroll'))
 		await wrapper.vm.$nextTick()
 
-		expect(buttonElement.isVisible()).toBeTruthy()
+		// Button should now be visible
+		expect((buttonElement.element as HTMLElement).style.display).not.toBe('none')
 	})
 
 	it('shows the button when the user scrolls down and the target is a custom element', async () => {
-		document.body.innerHTML = '<div id="test"></div>'
-		const divContent = document.getElementById('test') as HTMLDivElement
+		const divContent = document.createElement('div')
+		divContent.id = 'test-target'
+		divContent.style.height = '1000px'
+		divContent.style.overflow = 'auto'
+		document.body.appendChild(divContent)
+
+		// Initialize scroll position to 0
+		vi.spyOn(divContent, 'scrollTop', 'get').mockReturnValue(0)
 
 		const wrapper = mount(BackToTopBtn, {
+			props: {
+				target: 'test-target',
+			},
 			global: {
 				plugins: [vuetify],
 			},
-			attachTo: divContent,
-			props: {
-				target: 'test',
-			},
+			attachTo: document.body,
 		})
 
+		// Wait for component to initialize
+		await wrapper.vm.$nextTick()
+
 		const buttonElement = wrapper.find('.vd-back-to-top-btn')
-		expect(buttonElement.isVisible()).toBeFalsy()
+		// Button should be hidden initially (v-show="false")
+		expect(buttonElement.exists()).toBe(true)
+		expect((buttonElement.element as HTMLElement).style.display).toBe('none')
 
+		// Simulate scroll down
 		vi.spyOn(divContent, 'scrollTop', 'get').mockReturnValue(500)
 		divContent.dispatchEvent(new CustomEvent('scroll'))
-
 		await wrapper.vm.$nextTick()
-		expect(buttonElement.isVisible()).toBeTruthy()
+
+		// Button should now be visible
+		expect((buttonElement.element as HTMLElement).style.display).not.toBe('none')
+
+		document.body.removeChild(divContent)
 	})
 
 	it('do not show the button when the user scrolls up', async () => {
+		// Initialize scroll position to 0
+		vi.spyOn(window, 'scrollY', 'get').mockReturnValue(0)
+
 		const wrapper = mount(BackToTopBtn, {
 			global: {
 				plugins: [vuetify],
@@ -84,19 +112,29 @@ describe('BackToTopBtn', () => {
 			attachTo: document.body,
 		})
 
+		// Wait for component to initialize
+		await wrapper.vm.$nextTick()
+
 		const buttonElement = wrapper.find('.vd-back-to-top-btn')
-		expect(buttonElement.isVisible()).toBeFalsy()
+		// Button should be hidden initially (v-show="false")
+		expect(buttonElement.exists()).toBe(true)
+		expect((buttonElement.element as HTMLElement).style.display).toBe('none')
 
+		// Simulate scroll down
 		vi.spyOn(window, 'scrollY', 'get').mockReturnValue(500)
 		window.dispatchEvent(new CustomEvent('scroll'))
 		await wrapper.vm.$nextTick()
-		expect(buttonElement.isVisible()).toBeTruthy()
 
-		vi.spyOn(window, 'scrollY', 'get').mockReturnValue(100)
+		// Button should now be visible
+		expect((buttonElement.element as HTMLElement).style.display).not.toBe('none')
+
+		// Scroll back up
+		vi.spyOn(window, 'scrollY', 'get').mockReturnValue(50)
 		window.dispatchEvent(new CustomEvent('scroll'))
 		await wrapper.vm.$nextTick()
 
-		expect(buttonElement.isVisible()).toBeFalsy()
+		// Button should be hidden again
+		expect((buttonElement.element as HTMLElement).style.display).toBe('none')
 	})
 
 	it('scrolls to the top when the button is clicked', async () => {

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

@@ -20,7 +20,11 @@ exports[`BackToTopBtn > renders correctly 1`] = `
       v-theme--light
       vd-back-to-top-btn
     "
-    style="bottom: 16px; margin-right: 16px; display: none;"
+    style="
+      bottom: 16px;
+      margin-right: 16px;
+      display: none;
+    "
     type="button"
   >
     <span class="v-btn__overlay"></span>
@@ -74,7 +78,11 @@ exports[`BackToTopBtn > renders correctly when nudgeBottom and nudgeRight are se
       v-theme--light
       vd-back-to-top-btn
     "
-    style="bottom: 0px; margin-right: 0px; display: none;"
+    style="
+      bottom: 0px;
+      margin-right: 0px;
+      display: none;
+    "
     type="button"
   >
     <span class="v-btn__overlay"></span>

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

@@ -163,6 +163,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/CollapsibleList.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system/issues/792" target="_blank" style="color:#0C41BD;">issue #792</a>)</p>
+			  </div>
             `,
 		}
 	},

package/src/components/CollapsibleList/CollapsibleList.vue

@@ -2,6 +2,7 @@
 	import { computed } from 'vue'
 	import { useDisplay } from 'vuetify'
 	import type { ListItem } from './types'
+	import { vLetterSpacing } from '@/directives/letterSpacing'
 
 	const props = defineProps<{
 		listTitle: string | null
@@ -41,7 +42,7 @@
 						<a
 							:href="item.href"
 							:aria-label="item.text"
-							class="text-body-2 text-decoration-none"
+							class="text-body-2 text-decoration-none text--primary"
 						>
 							{{ item.text }}
 						</a>
@@ -55,7 +56,10 @@
 		v-else
 		class="vd-collapse-list"
 	>
-		<h4 class="text-subtitle-1 font-weight-bold mb-3">
+		<h4
+			v-letter-spacing
+			class="text-subtitle-1 font-weight-bold mb-3"
+		>
 			{{ listTitle }}
 		</h4>
 
@@ -111,7 +115,7 @@ a {
 }
 
 .vd-collapse-list a {
-	color: black;
+	color: rgb(var(--v-theme-text-base));
 }
 
 .vd-collapse-list :deep() {
@@ -122,7 +126,7 @@ a {
 	}
 }
 
-.vd-collapse-list.theme--dark :deep() {
+.v-theme--dark .vd-collapse-list :deep() {
 	h4,
 	ul,
 	a,
@@ -132,6 +136,16 @@ a {
 }
 
 .vd-collapse-list-mobile :deep() {
+	.v-expansion-panel-title {
+		font-weight: 700 !important;
+
+		&:focus-visible {
+			outline: 2px solid rgb(var(--v-theme-primary));
+			outline-offset: 2px;
+			border-radius: 4px;
+		}
+	}
+
 	.text-subtitle-2 {
 		font-size: 1rem !important;
 		letter-spacing: 0.001em !important;
@@ -139,16 +153,21 @@ a {
 		font-weight: 600;
 	}
 
-	button {
-		color: red !important;
-	}
-
 	.v-icon {
 		color: rgb(0 0 0 / 54%) !important;
 	}
+
+	// Ensure focus is visible on the disclosure button
+	.v-expansion-panel-title__overlay {
+		background-color: transparent;
+
+		&:focus-visible {
+			background-color: rgba(var(--v-theme-primary), 0.08);
+		}
+	}
 }
 
-.vd-collapse-list-mobile.theme--dark :deep() {
+.v-theme--dark .vd-collapse-list-mobile :deep() {
 	button {
 		color: white !important;
 	}

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

@@ -184,6 +184,10 @@ export const Legende: StoryObj = {
 				  </div>
 				</div>
 			  </div>
+			  <div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/ContextualMenu.xlsx" style="color:#0C41BD;">Voir le rapport</a></p>
+				  <p style="color: grey; font-size: 14px">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>
             `,
 		}
 	},

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

@@ -44,6 +44,9 @@ const meta = {
 				category: 'events',
 			},
 		},
+		'ariaLabel': {
+			description: 'Label pour l’accessibilité du menu',
+		},
 	},
 } satisfies Meta<typeof ContextualMenu>
 
@@ -53,6 +56,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	args: {
+		'ariaLabel': 'Menu contextuel',
 		'items': [
 			{
 				text: 'Titre 1',
@@ -94,7 +98,8 @@ export const Default: Story = {
 				name: 'Template',
 				code: `<template>
 		<ContextualMenu 
-			:items="items" 
+			:items="items"
+			aria-label="Menu contextuel"
 		/>
 	</template>
 	`,
@@ -127,6 +132,7 @@ export const Default: Story = {
 
 export const WithAnchors: Story = {
 	args: {
+		'ariaLabel': 'Menu contextuel',
 		'items': [{
 			text: 'section 1',
 			hash: '#section-1',
@@ -162,39 +168,50 @@ export const WithAnchors: Story = {
 			<ContextualMenu
 				v-bind="args"
 				v-model="hash"
+				aria-label="Menu contextuel"
 			/>
 		</div>
 		<div style="border: 1px solid black; max-height: 500px; overflow-y: auto; scroll-behavior: smooth;">
-			<section id="section-1" style="padding: 20px">
-				<h2>section 1</h2>
+			<section id="section-1" style="padding: 20px" aria-labelledby="section-1-title" tabindex="-1">
+				<h2
+					id="section-1-title"
+				>section 1</h2>
 				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-2" style="padding: 20px">
-				<h2>section 2</h2>
+			<section id="section-2" style="padding: 20px" aria-labelledby="section-2-title" tabindex="-1">
+				<h2
+					id="section-2-title"
+				>section 2</h2>
 				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-3" style="padding: 20px">
-				<h2>section 3</h2>
+			<section id="section-3" style="padding: 20px" aria-labelledby="section-3-title" tabindex="-1">
+				<h2
+					id="section-3-title"
+				>section 3</h2>
 				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-4" style="padding: 20px">
-				<h2>section 4</h2>
+			<section id="section-4" style="padding: 20px" aria-labelledby="section-4-title" tabindex="-1">
+				<h2
+					id="section-4-title"
+				>section 4</h2>
 				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-5" style="padding: 20px">
-				<h2>section 5</h2>
+			<section id="section-5" style="padding: 20px" aria-labelledby="section-5-title" tabindex="-1">
+				<h2
+					id="section-5-title"
+				>section 5</h2>
 				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
@@ -215,40 +232,51 @@ export const WithAnchors: Story = {
 			<ContextualMenu
 				v-model="hash"
 				:items
+				aria-label="Menu contextuel"
 			/>
 		</div>
-		<div class="content">
-			<section id="section-1">
-				<h2>section 1</h2>
-				<p>
+		<div style="border: 1px solid black; max-height: 500px; overflow-y: auto; scroll-behavior: smooth;">
+			<section id="section-1" style="padding: 20px" aria-labelledby="section-1-title" tabindex="-1">
+				<h2
+					id="section-1-title"
+				>section 1</h2>
+				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-2">
-				<h2>section 2</h2>
-				<p>
+			<section id="section-2" style="padding: 20px" aria-labelledby="section-2-title" tabindex="-1">
+				<h2
+					id="section-2-title"
+				>section 2</h2>
+				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-3">
-				<h2>section 3</h2>
-				<p>
+			<section id="section-3" style="padding: 20px" aria-labelledby="section-3-title" tabindex="-1">
+				<h2
+					id="section-3-title"
+				>section 3</h2>
+				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-4">
-				<h2>section 4</h2>
-				<p>
+			<section id="section-4" style="padding: 20px" aria-labelledby="section-4-title" tabindex="-1">
+				<h2
+					id="section-4-title"
+				>section 4</h2>
+				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
 			</section>
-			<section id="section-5">
-				<h2>section 5</h2>
-				<p>
+			<section id="section-5" style="padding: 20px" aria-labelledby="section-5-title" tabindex="-1">
+				<h2
+					id="section-5-title"
+				>section 5</h2>
+				<p style="max-width: 300px">
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, quae eligendi modi, rem consectetur cum labore voluptate nostrum molestiae asperiores dolorum, saepe perspiciatis quisquam provident placeat aut distinctio minima dolor.
 					Temporibus consequatur consectetur sequi. Sequi tempora velit soluta? Nam error, nesciunt molestiae provident possimus voluptas tempore porro at officia sint exercitationem dolore debitis eaque temporibus accusantium soluta? In, maxime excepturi.
 				</p>
@@ -323,6 +351,7 @@ section p {
 
 export const levels: Story = {
 	args: {
+		'ariaLabel': 'Menu contextuel',
 		'items': [
 			{
 				text: 'Level 1',
@@ -381,7 +410,8 @@ export const levels: Story = {
 				name: 'Template',
 				code: `<template>
 		<ContextualMenu 
-			:items="items" 
+			:items="items"
+			aria-label="Menu contextuel"
 		/>
 	</template>
 	`,