@cnamts/synapse 1.0.20 → 1.0.22

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

@@ -1,15 +1,80 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as CookiesStories from '../CookieBanner.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as CookieBannerStories from '../CookieBanner.stories.ts';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={CookiesStories} />
+<Meta of={CookieBannerStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+	componentName="CookieBanner"
+	iconSrc={AccessibilityIcon}
+	apgHref="https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/"
+>
+		<div class="mt-6">
+			<p>Rapport d’audit manuel : <a href="/audits/Cookies.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/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>
+				<li><strong>Nom accessible</strong> : <code>aria-label="Gestion des cookies"</code> (ou <code>aria-labelledby</code> pointant vers le titre).</li>
+				<li><strong>Hiérarchie</strong> : le titre est exposé (<code>h2</code>) et peut être référencé par <code>aria-labelledby</code> si besoin.</li>
+			</ul>
+		</CriteriaCard>
 
+		<CriteriaCard icon="⌨️" title="Navigation clavier">
+			<ul>
+				<li>Gestion de la touche <kbd>Tab</kbd> pour boucler le focus dans la bannière.</li>
+				<li>Échappe (<kbd>Esc</kbd>) ferme la bannière ou revient depuis la personnalisation.</li>
+				<li>Focus initial sur le bouton de fermeture à l’ouverture.</li>
+			</ul>
+		</CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/Cookies.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/806" target="_blank" style={{color:'#0C41BD'}}>issue #806</a>)</p>
-</div>
+		<CriteriaCard icon="🦻" title="Événements et consentement">
+			<ul>
+				<li><strong>accept/reject</strong> : émettent les catégories configurables (via les items) et toujours <code>essentials: true</code> si fournis.</li>
+				<li><strong>submit</strong> : renvoie les préférences personnalisées + <code>essentials: true</code> le cas échéant.</li>
+				<li>Pas de chargement de cookies non essentiels avant l’<code>accept</code> ou <code>submit</code>.</li>
+			</ul>
+		</CriteriaCard>
+	</CriteriaSection>
+
+	<DemoSection componentName="CookieBanner">
+		<Primary />
+	</DemoSection>
+
+	<BestPracticesSection>
+		<ul>
+			<li>Ne surchargez pas la description : un paragraphe clair et concis.</li>
+			<li>Assurez un contraste suffisant des boutons et du fond de bannière.</li>
+			<li>Proposez un lien « En savoir plus » vers votre politique cookies.</li>
+			<li>Chargez les cookies non essentiels uniquement après <code>accept</code> ou <code>submit</code>.</li>
+			<li>Conservez la possibilité de rouvrir la bannière ou de modifier le choix ailleurs dans l’interface.</li>
+		</ul>
+	</BestPracticesSection>
+
+	<ResourcesSection>
+		<ul>
+			<li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/" target="_blank" rel="noopener noreferrer">APG : Alert dialog</a></li>
+			<li><a href="https://www.cnil.fr/fr/cookies-traceurs-que-dit-la-loi" target="_blank" rel="noopener noreferrer">CNIL : Cookies et traceurs</a></li>
+			<li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+		</ul>
+	</ResourcesSection>
+</AccessibilityGuideLayout>

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

@@ -24,8 +24,16 @@ describe('CookieBanner', () => {
 		expect(wrapper.find('[data-test-id="customize"]').attributes('style')).toContain('100%')
 	})
 
-	it('emit a reject event when the reject btn is clicked', async () => {
+	it('emit a reject event with payload built from provided items', async () => {
 		const wrapper = mount(CookieBanner, {
+			props: {
+				headingLevel: 2,
+				headingLevelInformation: 2,
+				items: {
+					essentials: [],
+					functional: [],
+				},
+			},
 			global: {
 				stubs: {
 					Teleport: true,
@@ -35,11 +43,22 @@ describe('CookieBanner', () => {
 
 		await wrapper.find('[data-test-id="reject"]').trigger('click')
 
-		expect(wrapper.emitted()).toHaveProperty('reject')
+		expect(wrapper.emitted('reject')?.[0]?.[0]).toEqual({
+			essentials: false,
+			functional: false,
+		})
 	})
 
-	it('emit a accept event when the accept btn is clicked', async () => {
+	it('emit an accept event with payload built from provided items', async () => {
 		const wrapper = mount(CookieBanner, {
+			props: {
+				headingLevel: 2,
+				headingLevelInformation: 2,
+				items: {
+					functional: [],
+					analytics: [],
+				},
+			},
 			global: {
 				stubs: {
 					Teleport: true,
@@ -49,7 +68,10 @@ describe('CookieBanner', () => {
 
 		await wrapper.find('[data-test-id="accept"]').trigger('click')
 
-		expect(wrapper.emitted()).toHaveProperty('accept')
+		expect(wrapper.emitted('accept')?.[0]?.[0]).toEqual({
+			functional: true,
+			analytics: true,
+		})
 	})
 
 	it('does not close the dialog when the customize button is clicked and do not show the cookie form', async () => {
@@ -72,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: [
 						{
@@ -116,4 +140,32 @@ describe('CookieBanner', () => {
 		expect(wrapper.find('.vd-cookies-card').html()).toMatchSnapshot()
 		expect(wrapper.emitted()).toHaveProperty('customize')
 	})
+
+	it('emits submit payload coming from CookiesSelection without altering categories', async () => {
+		const wrapper = mount(CookieBanner, {
+			props: {
+				headingLevel: 2,
+				headingLevelInformation: 2,
+				items: {
+					functional: [],
+					analytics: [],
+				},
+			},
+			global: {
+				stubs: {
+					Teleport: true,
+				},
+			},
+		})
+
+		await wrapper.find('[data-test-id="customize"]').trigger('click')
+		await wrapper.vm.$nextTick()
+
+		const selection = wrapper.findComponent({ name: 'CookiesSelection' })
+		selection.vm.$emit('submit', { functional: true })
+
+		expect(wrapper.emitted('submit')?.[0]?.[0]).toEqual({
+			functional: true,
+		})
+	})
 })

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,

package/src/components/CookiesSelection/CookiesSelection.vue

@@ -5,9 +5,13 @@
 	import { locales } from './locales'
 	import type { CookieTypes, CookiesItems, Preferences } from './types'
 
-	const props = defineProps<{
+	const props = withDefaults(defineProps<{
 		items: CookiesItems
-	}>()
+		headingLevel?: 1 | 2 | 3 | 4 | 5 | 6
+
+	}>(), {
+		headingLevel: 2,
+	})
 
 	const emits = defineEmits<{
 		submit: [preferences: Partial<Preferences>]
@@ -109,6 +113,7 @@
 					:type="cookieType"
 					:table-items="cookies"
 					class="mb-6"
+					:heading-level="headingLevel"
 				>
 					<template
 						v-for="(_, slotName) in $slots"

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

@@ -42,6 +42,7 @@ describe('CookiesSelection – accessibility (axe)', () => {
 	it('has no obvious axe violations for full cookie preferences form', async () => {
 		const wrapper = mount(CookiesSelection, {
 			props: {
+				headingLevel: 2,
 				items: cookiesList,
 			},
 		})

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

@@ -35,6 +35,7 @@ describe('CookiesSelection', () => {
 	it('renders correctly', () => {
 		const wrapper = mount(CookiesSelection, {
 			propsData: {
+				headingLevel: 2,
 				items: cookiesList,
 			},
 		})
@@ -49,6 +50,7 @@ describe('CookiesSelection', () => {
 	it('sets global preferences', async () => {
 		const wrapper = mount(CookiesSelection, {
 			props: {
+				headingLevel: 2,
 				items: cookiesList,
 			},
 		})
@@ -78,6 +80,7 @@ describe('CookiesSelection', () => {
 	it('sets preferences for each category', async () => {
 		const wrapper = mount(CookiesSelection, {
 			props: {
+				headingLevel: 2,
 				items: cookiesList,
 			},
 		})
@@ -118,6 +121,7 @@ describe('CookiesSelection', () => {
 	it('requires all categories to be set', async () => {
 		const wrapper = mount(CookiesSelection, {
 			props: {
+				headingLevel: 2,
 				items: cookiesList,
 				modelValue: undefined,
 			},
@@ -151,6 +155,7 @@ describe('CookiesSelection', () => {
 	it('displays the cookie description as a scoped slot', () => {
 		const wrapper = mount(CookiesSelection, {
 			props: {
+				headingLevel: 2,
 				items: cookiesList,
 			},
 			slots: {

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

@@ -136,6 +136,7 @@ exports[`CookiesSelection > renders correctly 1`] = `
       <h2 class="
         font-weight-bold
         mb-2
+        sy-heading
         text-subtitle-1
       ">
         Cookies requis
@@ -224,14 +225,15 @@ exports[`CookiesSelection > renders correctly 1`] = `
           <!---->
         </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[`CookiesSelection > renders correctly 1`] = `
       <h2 class="
         font-weight-bold
         mb-2
+        sy-heading
         text-subtitle-1
       ">
         Cookies fonctionnels
@@ -318,14 +321,15 @@ exports[`CookiesSelection > renders correctly 1`] = `
           <!---->
         </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
@@ -444,6 +448,7 @@ exports[`CookiesSelection > renders correctly 1`] = `
       <h2 class="
         font-weight-bold
         mb-2
+        sy-heading
         text-subtitle-1
       ">
         Cookies d’analyse
@@ -521,14 +526,15 @@ exports[`CookiesSelection > renders correctly 1`] = `
           <!---->
         </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/CopyBtn/CopyBtn.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-	import { ref, onUnmounted } from 'vue'
+	import { ref, onUnmounted, useId } from 'vue'
 	import { mdiContentCopy } from '@mdi/js'
 
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
@@ -27,6 +27,7 @@
 
 	const options = useCustomizableOptions(config, props)
 
+	const id = useId()
 	const tooltip = ref(false)
 	const copyIcon = mdiContentCopy
 	let tooltipTimeoutId: ReturnType<typeof setTimeout> | undefined
@@ -87,7 +88,7 @@
 
 <template>
 	<div
-		:id="props.ariaOwns"
+		:id="`${props.ariaOwns}-${id}`"
 		class="sy-copy-btn"
 	>
 		<VTooltip
@@ -96,14 +97,15 @@
 			:open-on-click="true"
 			:open-on-hover="false"
 			:disabled="hideTooltip"
+			content-class="tooltip"
 		>
 			<template #activator="{ props: tooltipProps }">
 				<VBtn
 					v-bind="{...tooltipProps,...options.btn}"
 					:aria-label="props.ariaLabel"
-					:aria-owns="props.ariaOwns"
+					:aria-owns="`${props.ariaOwns}-${id}`"
 					:data-test-id="props.ariaOwns"
-					aria-controls="copy-btn"
+					:aria-controls="`copy-btn-${id}`"
 					@click="copy"
 				>
 					<slot name="icon">