From 672922acc770b4cd52f145e040a7ee7524f49347 Mon Sep 17 00:00:00 2001
From: David FYON <davidfyon@gmail.com>
Date: Tue, 22 Oct 2024 14:23:19 +0200
Subject: [PATCH 1/4] fix accessbility

---
 packages/synapse-bridge/src/elements/DialogBox/DialogBox.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-bridge/src/elements/DialogBox/DialogBox.vue b/packages/synapse-bridge/src/elements/DialogBox/DialogBox.vue
index decc5545e..f0adb0e37 100644
--- a/packages/synapse-bridge/src/elements/DialogBox/DialogBox.vue
+++ b/packages/synapse-bridge/src/elements/DialogBox/DialogBox.vue
@@ -56,6 +56,7 @@ export default defineComponent({
 			closeIcon: mdiClose,
 			locales,
 			dialog: this.modelValue,
+			titleId: `title-${Math.random().toString(36).substring(7)}`
 		}
 	},
 
@@ -137,11 +138,11 @@ export default defineComponent({
 			v-bind="options.card"
 			ref="dialogContent"
 			id="dialogContent"
-			:aria-labelledby="title ? title : 'dialogContent'"
+			:aria-labelledby="titleId ? titleId : 'dialogContent'"
 		>
 			<VCardTitle v-bind="options.cardTitle">
 				<slot name="title">
-					<h2 v-if="title" class="text-h6 font-weight-bold">
+					<h2 v-if="title" :id="titleId" class="text-h6 font-weight-bold">
 						{{ title }}
 					</h2>
 				</slot>

From 187d51583477deb5759c5ce3f9b1550b85c18d2f Mon Sep 17 00:00:00 2001
From: David FYON <davidfyon@gmail.com>
Date: Tue, 22 Oct 2024 14:25:55 +0200
Subject: [PATCH 2/4] update snaps

---
 .../DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap b/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap
index 1ecf43e12..1423b5eea 100644
--- a/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap
+++ b/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
 <div data-v-ee61b14d="" model-value="true" width="600px" persistent="false" retain-focus="false" aria-modal="true" class="vd-dialog-box">
-  <div data-v-ee61b14d="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6" id="dialogContent" aria-labelledby="Test title">
+  <div data-v-ee61b14d="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6" id="dialogContent" aria-labelledby="title-wjsnj9">
     <!---->
     <div class="v-card__loader">
       <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -20,7 +20,7 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
     <!---->
     <!---->
     <div data-v-ee61b14d="" class="v-card-title d-flex align-start flex-nowrap pa-0 mb-6 mr-6">
-      <h2 data-v-ee61b14d="" class="text-h6 font-weight-bold">Test title</h2>
+      <h2 data-v-ee61b14d="" id="title-wjsnj9" class="text-h6 font-weight-bold">Test title</h2>
       <div data-v-ee61b14d="" class="v-spacer"></div><button data-v-ee61b14d="" type="button" class="v-btn v-btn--elevated v-btn--icon v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-elevated mt-n2 mr-n2 ml-4" style="height: 32px; width: 32px;" aria-label="Fermer la boîte de dialogue"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
         <!----><span class="v-btn__content" data-no-activator=""><i data-v-ee61b14d="" class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
         <!---->

From 211b1de149f239a8de06f9133beb3edcd2f98499 Mon Sep 17 00:00:00 2001
From: David FYON <davidfyon@gmail.com>
Date: Tue, 22 Oct 2024 15:21:35 +0200
Subject: [PATCH 3/4] fix snaps

---
 .../DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap b/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap
index 1423b5eea..63d731376 100644
--- a/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap
+++ b/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
 <div data-v-ee61b14d="" model-value="true" width="600px" persistent="false" retain-focus="false" aria-modal="true" class="vd-dialog-box">
-  <div data-v-ee61b14d="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6" id="dialogContent" aria-labelledby="title-wjsnj9">
+  <div data-v-ee61b14d="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6" id="dialogContent" aria-labelledby="title-tfho5q">
     <!---->
     <div class="v-card__loader">
       <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -20,7 +20,7 @@ exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
     <!---->
     <!---->
     <div data-v-ee61b14d="" class="v-card-title d-flex align-start flex-nowrap pa-0 mb-6 mr-6">
-      <h2 data-v-ee61b14d="" id="title-wjsnj9" class="text-h6 font-weight-bold">Test title</h2>
+      <h2 data-v-ee61b14d="" id="title-tfho5q" class="text-h6 font-weight-bold">Test title</h2>
       <div data-v-ee61b14d="" class="v-spacer"></div><button data-v-ee61b14d="" type="button" class="v-btn v-btn--elevated v-btn--icon v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-elevated mt-n2 mr-n2 ml-4" style="height: 32px; width: 32px;" aria-label="Fermer la boîte de dialogue"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
         <!----><span class="v-btn__content" data-no-activator=""><i data-v-ee61b14d="" class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
         <!---->

From 8470836d35c5a842b95d4efec568c934b9f6545d Mon Sep 17 00:00:00 2001
From: David FYON <davidfyon@gmail.com>
Date: Tue, 22 Oct 2024 15:46:32 +0200
Subject: [PATCH 4/4] fix snaps + dialog tests

---
 .../DialogBox/tests/DialogBox.spec.ts         | 18 ++++++--
 .../__snapshots__/DialogBox.spec.ts.snap      | 45 -------------------
 2 files changed, 14 insertions(+), 49 deletions(-)
 delete mode 100644 packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap

diff --git a/packages/synapse-bridge/src/elements/DialogBox/tests/DialogBox.spec.ts b/packages/synapse-bridge/src/elements/DialogBox/tests/DialogBox.spec.ts
index 8d14b3fc5..3e26a5431 100644
--- a/packages/synapse-bridge/src/elements/DialogBox/tests/DialogBox.spec.ts
+++ b/packages/synapse-bridge/src/elements/DialogBox/tests/DialogBox.spec.ts
@@ -3,7 +3,7 @@ import { mount, shallowMount } from '@vue/test-utils'
 import { vuetify } from '@tests/unit/setup'
 
 import DialogBox from '../'
-import { VCard } from 'vuetify/components'
+import { VDialog, VCard } from 'vuetify/components'
 
 const defaultProps = {
 	modelValue: true,
@@ -17,7 +17,7 @@ const defaultProps = {
 
 describe('DialogBox', () => {
 	describe('rendering and props', () => {
-		it('renders correctly with props', () => {
+		it('renders correctly with props', async () => {
 			const wrapper = mount(DialogBox, {
 				props: defaultProps,
 				global: {
@@ -30,7 +30,13 @@ describe('DialogBox', () => {
 				},
 			})
 
-			expect(wrapper.html()).toMatchSnapshot()
+			await wrapper.vm.$nextTick()
+
+			const dialog = wrapper.findComponent(VDialog);
+			const title = wrapper.findComponent(VCard).find('h2').text();
+
+			expect(dialog.exists()).toBe(true);
+			expect(title).toBe('Test title');
 		})
 
 		it('is closed when model value is false', async () => {
@@ -44,7 +50,11 @@ describe('DialogBox', () => {
 				},
 			})
 
-			expect(wrapper).toMatchInlineSnapshot('')
+			await wrapper.vm.$nextTick()
+
+			const card = wrapper.findComponent(VCard);
+
+			expect(card.exists()).toBe(false);
 		})
 
 		it('becomes visible when the model value is updated', async () => {
diff --git a/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap b/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap
deleted file mode 100644
index 63d731376..000000000
--- a/packages/synapse-bridge/src/elements/DialogBox/tests/__snapshots__/DialogBox.spec.ts.snap
+++ /dev/null
@@ -1,45 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`DialogBox > rendering and props > renders correctly with props 1`] = `
-<div data-v-ee61b14d="" model-value="true" width="600px" persistent="false" retain-focus="false" aria-modal="true" class="vd-dialog-box">
-  <div data-v-ee61b14d="" class="v-card v-theme--light v-card--density-default v-card--variant-elevated pa-6" id="dialogContent" aria-labelledby="title-tfho5q">
-    <!---->
-    <div class="v-card__loader">
-      <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px; left: 50%; transform: translateX(-50%);" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
-        <!---->
-        <div class="v-progress-linear__background" style="width: 100%;"></div>
-        <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
-          <div class="v-progress-linear__indeterminate">
-            <div class="v-progress-linear__indeterminate long"></div>
-            <div class="v-progress-linear__indeterminate short"></div>
-          </div>
-        </transition-stub>
-        <!---->
-      </div>
-    </div>
-    <!---->
-    <!---->
-    <div data-v-ee61b14d="" class="v-card-title d-flex align-start flex-nowrap pa-0 mb-6 mr-6">
-      <h2 data-v-ee61b14d="" id="title-tfho5q" class="text-h6 font-weight-bold">Test title</h2>
-      <div data-v-ee61b14d="" class="v-spacer"></div><button data-v-ee61b14d="" type="button" class="v-btn v-btn--elevated v-btn--icon v-theme--light v-btn--density-default elevation-0 v-btn--size-default v-btn--variant-elevated mt-n2 mr-n2 ml-4" style="height: 32px; width: 32px;" aria-label="Fermer la boîte de dialogue"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator=""><i data-v-ee61b14d="" class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
-        <!---->
-        <!---->
-      </button>
-    </div>
-    <div data-v-ee61b14d="" class="d-flex flex-wrap mt-6 vd-dialog-box-actions-ctn">
-      <div data-v-ee61b14d="" class="v-spacer"></div><button data-v-ee61b14d="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-text"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator="">Cancel</span>
-        <!---->
-        <!---->
-      </button><button data-v-ee61b14d="" type="button" class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-default v-btn--variant-elevated ml-4" data-test-id="confirm-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-        <!----><span class="v-btn__content" data-no-activator="">Confirm</span>
-        <!---->
-        <!---->
-      </button>
-    </div>
-    <!---->
-    <!----><span class="v-card__underlay"></span>
-  </div>
-</div>
-`;