Fix/dialog box aria (#3817)

assurance-maladie-digital · Oct 22, 2024 · 6d7242f · 6d7242f
1 parent a9b795b
commit 6d7242f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 51 deletions.
diff --git 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>

diff --git 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