@cnamts/synapse 1.0.3 → 1.0.4

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

@@ -56,7 +56,10 @@ exports[`StructureMenu > render correctly 1`] = `
         "
         id="my-structure-menu-id-structure-menu-close-btn"
         plain=""
-        style="height: auto; width: auto;"
+        style="
+          height: auto;
+          width: auto;
+        "
         type="button"
       >
         <span class="v-btn__overlay"></span>
@@ -87,7 +90,11 @@ exports[`StructureMenu > render correctly 1`] = `
               "
               focusable="false"
               role="img"
-              style="color: #00749C; height: 40px; width: 40px;"
+              style="
+                color: #00749C;
+                height: 40px;
+                width: 40px;
+              "
             >
               <span>
                 <svg
@@ -193,7 +200,11 @@ exports[`StructureMenu > render correctly 1`] = `
             "
             dense=""
             id="my-structure-menu-id-structure-message"
-            style="color: #4D547D; caret-color: #4D547D; width: 100%;"
+            style="
+              color: #4D547D;
+              caret-color: #4D547D;
+              width: 100%;
+            "
           >
             <!---->
             <span class="v-alert__underlay"></span>
@@ -216,7 +227,11 @@ exports[`StructureMenu > render correctly 1`] = `
                   "
                   focusable="false"
                   role="img"
-                  style="color: #FFFFFF; border-radius: 50%; border: 1px solid #FFFFFF;"
+                  style="
+                    color: #FFFFFF;
+                    border-radius: 50%;
+                    border: 1px solid #FFFFFF;
+                  "
                 >
                   <span>
                     <svg
@@ -400,7 +415,6 @@ exports[`StructureMenu > render correctly 1`] = `
                     Je choisis une structure :
                   </label>
                   <div
-                    aria-describedby="structures-0-radio-group-messages"
                     aria-labelledby="structures-0-radio-group"
                     class="v-selection-control-group"
                     column=""
@@ -455,7 +469,11 @@ exports[`StructureMenu > render correctly 1`] = `
                               "
                               focusable="false"
                               role="img"
-                              style="color: #01B9F5; border-radius: 50%; border: 1px solid #01B9F5;"
+                              style="
+                                color: #01B9F5;
+                                border-radius: 50%;
+                                border: 1px solid #01B9F5;
+                              "
                             >
                               <span>
                                 <svg
@@ -553,7 +571,11 @@ exports[`StructureMenu > render correctly 1`] = `
                               "
                               focusable="false"
                               role="img"
-                              style="color: #01B9F5; border-radius: 50%; border: 1px solid #01B9F5;"
+                              style="
+                                color: #01B9F5;
+                                border-radius: 50%;
+                                border: 1px solid #01B9F5;
+                              "
                             >
                               <span>
                                 <svg
@@ -651,7 +673,11 @@ exports[`StructureMenu > render correctly 1`] = `
                               "
                               focusable="false"
                               role="img"
-                              style="color: #01B9F5; border-radius: 50%; border: 1px solid #01B9F5;"
+                              style="
+                                color: #01B9F5;
+                                border-radius: 50%;
+                                border: 1px solid #01B9F5;
+                              "
                             >
                               <span>
                                 <svg
@@ -748,7 +774,6 @@ exports[`StructureMenu > render correctly 1`] = `
                     Je choisis une structure :
                   </label>
                   <div
-                    aria-describedby="structures-1-radio-group-messages"
                     aria-labelledby="structures-1-radio-group"
                     class="v-selection-control-group"
                     column=""
@@ -803,7 +828,11 @@ exports[`StructureMenu > render correctly 1`] = `
                               "
                               focusable="false"
                               role="img"
-                              style="color: #01B9F5; border-radius: 50%; border: 1px solid #01B9F5;"
+                              style="
+                                color: #01B9F5;
+                                border-radius: 50%;
+                                border: 1px solid #01B9F5;
+                              "
                             >
                               <span>
                                 <svg
@@ -901,7 +930,11 @@ exports[`StructureMenu > render correctly 1`] = `
                               "
                               focusable="false"
                               role="img"
-                              style="color: #01B9F5; border-radius: 50%; border: 1px solid #01B9F5;"
+                              style="
+                                color: #01B9F5;
+                                border-radius: 50%;
+                                border: 1px solid #01B9F5;
+                              "
                             >
                               <span>
                                 <svg
@@ -999,7 +1032,11 @@ exports[`StructureMenu > render correctly 1`] = `
                               "
                               focusable="false"
                               role="img"
-                              style="color: #01B9F5; border-radius: 50%; border: 1px solid #01B9F5;"
+                              style="
+                                color: #01B9F5;
+                                border-radius: 50%;
+                                border: 1px solid #01B9F5;
+                              "
                             >
                               <span>
                                 <svg
@@ -1139,7 +1176,10 @@ exports[`StructureMenu > render correctly 1`] = `
               "
               id="my-structure-menu-id-default-structure-switch-description-btn"
               plain=""
-              style="height: auto; width: auto;"
+              style="
+                height: auto;
+                width: auto;
+              "
               type="button"
             >
               <span class="v-btn__overlay"></span>
@@ -1177,7 +1217,13 @@ exports[`StructureMenu > render correctly 1`] = `
                       <svg
                         aria-hidden="true"
                         height="34"
-                        style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd"
+                        style="
+                          shape-rendering:geometricPrecision;
+                          text-rendering:geometricPrecision;
+                          image-rendering:optimizeQuality;
+                          fill-rule:evenodd;
+                          clip-rule:evenodd;
+                        "
                         viewBox="0 0 6828 6828"
                         width="34"
                         xml:space="preserve"
@@ -1246,7 +1292,11 @@ exports[`StructureMenu > render correctly 1`] = `
             v-theme--light
           "
           id="my-structure-menu-id-default-structure-confirm-btn"
-          style="height: auto; min-height: 2.5rem; color: #FFFFFF !important;"
+          style="
+            height: auto;
+            min-height: 2.5rem;
+            color: #FFFFFF !important;
+          "
           type="button"
         >
           <span class="v-btn__overlay"></span>
@@ -1290,7 +1340,13 @@ exports[`StructureMenu > render correctly 1`] = `
             v-theme--light
           "
           id="my-structure-menu-id-default-structure-cancel-btn"
-          style="height: auto; min-height: 2.5rem; color: #00749C !important; border: 2px solid #00749C !important; background-color: white;"
+          style="
+            height: auto;
+            min-height: 2.5rem;
+            color: #00749C !important;
+            border: 2px solid #00749C !important;
+            background-color: white;
+          "
           type="button"
         >
           <span class="v-btn__overlay"></span>

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

@@ -21,7 +21,10 @@ exports[`UserMenu > render correctly 1`] = `
     "
     id="user-information-summary-id-open-btn"
     plain=""
-    style="height: auto; width: auto;"
+    style="
+      height: auto;
+      width: auto;
+    "
     type="button"
   >
     <span class="v-btn__overlay"></span>
@@ -52,7 +55,11 @@ exports[`UserMenu > render correctly 1`] = `
           "
           focusable="false"
           role="img"
-          style="color: #FFFFFF; height: 2rem; width: 2rem;"
+          style="
+            color: #FFFFFF;
+            height: 2rem;
+            width: 2rem;
+          "
         >
           <span>
             <svg

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/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
@@ -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>
 

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

@@ -212,6 +212,10 @@ export const Legende: StoryObj = {
 						</div>
 					</div>
 				</div>
+				<div class="mt-4">
+				  <p>Rapport d’audit manuel : <a href="/audits/Cookies.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/806" target="_blank" style="color:#0C41BD;">issue #658</a>)</p>
+			  </div>
 			`,
 		}
 	},

package/src/components/CookieBanner/CookieBanner.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 	import type { CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import useCustomizableOptions from '@/composables/useCustomizableOptions'
+	import SyIcon from '@/components/Customs/SyIcon/SyIcon.vue'
 	import { mdiClose, mdiArrowULeftBottom } from '@mdi/js'
-	import { computed, ref } from 'vue'
+	import { computed, ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
 	import { useDisplay } from 'vuetify'
 	import type { CookiesItems } from '../CookiesSelection/types'
 	import { config } from './config'
 	import { locales } from './locales'
 	import CookiesSelection from '../CookiesSelection/CookiesSelection.vue'
+	import { vLetterSpacing } from '@/directives/letterSpacing'
 
 	const props = defineProps<CustomizableOptions & {
 		items?: CookiesItems
@@ -23,6 +25,10 @@
 	})
 
 	const showCookiesSelection = ref(false)
+	const closeBtnRef = ref<HTMLElement | null>(null)
+	const vsheetRef = ref<HTMLElement | null>(null)
+	const bannerRef = ref<HTMLElement | null>(null)
+	const focusableElements = ref<HTMLElement[]>([])
 
 	const display = useDisplay()
 	const btnWidth = computed(() => {
@@ -51,6 +57,107 @@
 		showCookiesSelection.value = false
 		active.value = false
 	}
+
+	// Fonction pour mettre à jour la liste des éléments focusables dans le banner
+	function updateFocusableElements(): void {
+		if (!bannerRef.value) return
+
+		// Sélecteur pour tous les éléments focusables
+		const selector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+
+		// Récupérer tous les éléments focusables dans le banner
+		const elements = bannerRef.value.querySelectorAll(selector)
+
+		// Convertir NodeList en Array et filtrer les éléments visibles et non désactivés
+		focusableElements.value = Array.from(elements)
+			.filter((el) => {
+				const element = el as HTMLElement
+				return !element.hasAttribute('disabled')
+					&& element.style.display !== 'none'
+					&& element.style.visibility !== 'hidden'
+			}) as HTMLElement[]
+	}
+
+	// Mettre le focus sur le bouton de fermeture lorsque le composant est monté
+	onMounted(() => {
+		if (active.value && !showCookiesSelection.value) {
+			nextTick(() => {
+				// Accéder à l'élément DOM réel via $el
+				if (closeBtnRef.value && '$el' in closeBtnRef.value) {
+					(closeBtnRef.value.$el as HTMLElement).focus()
+				}
+
+				// Initialiser la liste des éléments focusables
+				updateFocusableElements()
+			})
+		}
+
+		document.addEventListener('keydown', handleKeydown)
+	})
+
+	// Observer les changements de l'état actif pour mettre le focus sur le bouton de fermeture
+	watch(active, (newValue) => {
+		if (newValue && !showCookiesSelection.value) {
+			nextTick(() => {
+				// Accéder à l'élément DOM réel via $el
+				if (closeBtnRef.value && '$el' in closeBtnRef.value) {
+					(closeBtnRef.value.$el as HTMLElement).focus()
+				}
+
+				// Mettre à jour la liste des éléments focusables
+				updateFocusableElements()
+			})
+		}
+	})
+
+	// Fonction pour gérer les touches clavier (Escape et Tab)
+	function handleKeydown(event: KeyboardEvent): void {
+		// Gestion de la touche Escape
+		if (event.key === 'Escape') {
+			if (showCookiesSelection.value) {
+				showCookiesSelection.value = false
+			}
+			else {
+				reject()
+			}
+		}
+
+		// Gestion de la touche Tab pour créer une boucle de focus
+		if (event.key === 'Tab') {
+			// Mettre à jour la liste des éléments focusables
+			updateFocusableElements()
+
+			// S'il n'y a pas d'éléments focusables, on ne fait rien
+			if (focusableElements.value.length === 0) return
+
+			// Récupérer le premier et le dernier élément focusable
+			const firstFocusableElement = focusableElements.value[0]
+			const lastFocusableElement = focusableElements.value[focusableElements.value.length - 1]
+
+			// Si Shift+Tab est pressé et que le focus est sur le premier élément, rediriger vers le dernier
+			if (event.shiftKey && document.activeElement === firstFocusableElement) {
+				lastFocusableElement.focus()
+				event.preventDefault()
+			}
+			// Si Tab est pressé et que le focus est sur le dernier élément, rediriger vers le premier
+			else if (!event.shiftKey && document.activeElement === lastFocusableElement) {
+				firstFocusableElement.focus()
+				event.preventDefault()
+			}
+		}
+	}
+
+	// Observer les changements dans le contenu du banner pour mettre à jour les éléments focusables
+	watch(showCookiesSelection, () => {
+		nextTick(() => {
+			updateFocusableElements()
+		})
+	})
+
+	// Nettoyer l'écouteur d'événement lorsque le composant est détruit
+	onUnmounted(() => {
+		document.removeEventListener('keydown', handleKeydown)
+	})
 </script>
 
 <template>
@@ -59,13 +166,22 @@
 		to="body"
 	>
 		<VSheet
+			ref="vsheetRef"
+			v-letter-spacing
 			v-bind="options.banner"
 			:aria-label="locales.label"
 			class="vd-cookie-banner"
 		>
-			<div class="vd-cookie-banner__inner">
+			<div
+				ref="bannerRef"
+				class="vd-cookie-banner__inner"
+				role="dialog"
+			>
 				<div class="d-flex align-start flex-nowrap pa-0 mb-6">
-					<h2 class="text-h5 font-weight-bold">
+					<h2
+						v-letter-spacing
+						class="text-h5 font-weight-bold"
+					>
 						{{ locales.title }}
 					</h2>
 
@@ -77,19 +193,24 @@
 						:aria-label="locales.backBtn"
 						@click="showCookiesSelection = false"
 					>
-						<VIcon v-bind="options.icon">
-							{{ mdiArrowULeftBottom }}
-						</VIcon>
+						<SyIcon
+							v-bind="options.icon"
+							:icon="mdiArrowULeftBottom"
+							label="Bouton de retour en arrière."
+						/>
 					</VBtn>
 					<VBtn
 						v-else
 						v-bind="options.closeBtn"
+						ref="closeBtnRef"
 						:aria-label="locales.closeBtn"
 						@click="reject"
 					>
-						<VIcon v-bind="options.icon">
-							{{ mdiClose }}
-						</VIcon>
+						<SyIcon
+							v-bind="options.icon"
+							:icon="mdiClose"
+							label="Bouton de fermeture."
+						/>
 					</VBtn>
 				</div>
 				<div class="vd-cookie-banner-content">
@@ -158,6 +279,13 @@
 </template>
 
 <style lang="scss" scoped>
+:deep(.text-h5) {
+	font-size: 1.5rem;
+	font-weight: 400;
+	line-height: 1.333;
+	line-height: normal;
+}
+
 .vd-cookie-banner {
 	position: fixed;
 	left: 50%;
@@ -224,5 +352,4 @@
 .height-leave-from {
 	height: auto;
 }
-
 </style>

package/src/components/CookieBanner/config.ts

@@ -1,3 +1,5 @@
+import { cnamColorsTokens } from '@/designTokens/tokens/cnam/cnamColors'
+
 const commonBtnConfig = {
 	color: 'primary',
 	height: 'auto',
@@ -10,6 +12,7 @@ export const config = {
 		rounded: true,
 		elevation: 2,
 		class: 'pa-8',
+		color: cnamColorsTokens.blue.lighten80,
 	},
 	closeBtn: {
 		icon: true,