@cnamts/synapse 1.0.21 → 1.0.23

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,

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">

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

@@ -1,15 +1,86 @@
-import { Meta, Story } from '@storybook/addon-docs';
-import * as Stories from '../CopyBtn.stories.ts';
-import '@/stories/styles/shared.css';
+import { Meta, Primary } from '@storybook/blocks';
+import * as CopyBtnStories from '../CopyBtn.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+    AccessibilityGuideLayout,
+    CriteriaSection,
+    CriteriaCard,
+    DemoSection,
+    BestPracticesSection,
+    ResourcesSection,
+    AuditSection
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
-<Meta of={Stories} />
+<Meta of={CopyBtnStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
+<AccessibilityGuideLayout
+    componentName="CopyBtn"
+    iconSrc={AccessibilityIcon}
+>
+    <CriteriaSection>
+        <CriteriaCard icon="🔍" title="Structure sémantique">
+            <ul>
+                <li><strong>Bouton natif</strong> : utilisation du composant<code>VBtn</code> qui génère un élément <code>&lt;button&gt;</code>, garantissant un comportement accessible par défaut.</li>
+                <li><strong>Nom accessible</strong> : l’attribut <code>aria-label</code>permet de fournir une description explicite de l’action (ex. « Copier le numéro de compte »).</li>
+                <li><strong>Association ARIA</strong> : les attributs<code>aria-owns</code> et <code>aria-controls</code> peuvent être utilisés pour relier le bouton à un élément spécifique de l’interface.</li>
+                <li><strong>Identifiants uniques</strong> : l’utilisation de<code>useId()</code> garantit des identifiants uniques pour chaque instance du composant.</li>
+            </ul>
+        </CriteriaCard>
 
+        <CriteriaCard icon="⌨️" title="Navigation clavier">
+            <ul>
+                <li><strong>Tabulation</strong> : le bouton est accessible dans l’ordre de tabulation standard de la page.</li>
+                <li><strong>Activation</strong> : l’action de copie peut être déclenchée avec la touche <kbd>Entrée</kbd> ou <kbd>Espace</kbd>.</li>
+                <li><strong>Focus visible</strong> : un style de focus est appliqué via<code>:focus-visible</code> pour assurer un repère visuel lors de la navigation clavier.</li>
+            </ul>
+        </CriteriaCard>
 
-<div class="mt-2">
-<p>Rapport d’audit manuel : <a href="/audits/CopyBtn.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/4008" target="_blank" style={{color:'#0C41BD'}}>issue #4008</a>)</p>
-</div>
+        <CriteriaCard icon="📢" title="Retour d’information">
+            <ul>
+                <li><strong>Tooltip informatif</strong> : un message visuel indique que l’action de copie a été effectuée.</li>
+                <li><strong>Annonce aux technologies d’assistance</strong> : le message est contenu dans un élément avec <code>role="status"</code>, permettant aux lecteurs d’écran d’annoncer l’information.</li>
+                <li><strong>Durée configurable</strong> : l’affichage du tooltip peut être contrôlé via la prop <code>tooltipDuration</code>.</li>
+                <li><strong>Désactivation possible</strong> : la prop<code>hideTooltip</code> permet de désactiver l’affichage du retour visuel si nécessaire.</li>
+            </ul>
+        </CriteriaCard>
+
+        <CriteriaCard icon="🧩" title="Personnalisation accessible">
+            <ul>
+                <li><strong>Slots personnalisables</strong> : possibilité de remplacer l’icône ou le contenu du tooltip via les slots<code>icon</code> et <code>tooltip</code>.</li>
+                <li><strong>Libellés adaptables</strong> : les propriétés<code>ariaLabel</code> et <code>ariaOwns</code> permettent d’adapter les descriptions selon le contexte.</li>
+                <li><strong>Nettoyage du contenu copié</strong> : la prop<code>separatorsToRemove</code> permet de retirer des caractères visuels (ex. espaces ou tirets) avant la copie.</li>
+            </ul>
+        </CriteriaCard>
+    </CriteriaSection>
+
+    <DemoSection componentName="CopyBtn">
+        <Primary/>
+    </DemoSection>
+
+    <BestPracticesSection>
+        <ul>
+            <li>Fournir un <strong>aria-label explicite</strong> décrivant clairement l’action (ex. « Copier l’adresse email »).</li>
+            <li>Conserver un <strong>retour d’information visible ou vocal</strong>après l’action de copie pour informer l’utilisateur.</li>
+            <li>Si une icône seule est utilisée, toujours garantir la présence d’un<strong>nom accessible</strong>.</li>
+            <li>Veiller à une <strong>taille de cible suffisante</strong>(au moins 44px) pour les interactions tactiles.</li>
+            <li>S’assurer que le contenu copié correspond bien à ce que l’utilisateur attend (ex. numéro sans espaces).</li>
+        </ul>
+    </BestPracticesSection>
+
+    <ResourcesSection>
+        <ul>
+            <li><a href="https://www.w3.org/WAI/WCAG22/quickref/#name-role-value" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les Name, role, value</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22" target="_blank" rel="noopener noreferrer">WAI-ARIA – rôle « status »</a></li>
+            <li><a href="https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html" target="_blank" rel="noopener noreferrer">WCAG 2.2 - Focus Visible</a></li>
+        </ul>
+    </ResourcesSection>
+
+    <AuditSection>
+
+        <div class="mt-2">
+            <p>Rapport d’audit manuel : <a href="/audits/CopyBtn.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/4008" target="_blank" style={{color: '#0C41BD'}}>issue #4008</a>)</p>
+        </div>
+
+    </AuditSection>
+</AccessibilityGuideLayout>

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

@@ -3,7 +3,7 @@
 exports[`CopyBtn > renders correctly 1`] = `
 <div
   class="sy-copy-btn"
-  id="copy-btn"
+  id="copy-btn-v-0"
   label="test"
 >
   <v-tooltip-stub
@@ -12,6 +12,7 @@ exports[`CopyBtn > renders correctly 1`] = `
     closeonback="false"
     closeoncontentclick="false"
     contained="false"
+    contentclass="tooltip"
     disabled="false"
     eager="true"
     interactive="false"
@@ -24,8 +25,11 @@ exports[`CopyBtn > renders correctly 1`] = `
     openonclick="true"
     openonhover="false"
     origin="auto"
+    persistent="false"
     scrim="false"
     scrollstrategy="reposition"
+    sticktotarget="false"
+    viewportmargin="12"
     zindex="2000"
   ></v-tooltip-stub>
 </div>