fix(NcDialog): Ensure the dialog is correctly labelled by its name

* Added `labelId` prop to NcModal to allow label modal without a name
* Pass the navigation id (the ID of the headline element of NcDialog) to `labelId`
* Added cypress tests

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

cypress/component/NcDialog.cy.ts

@@ -0,0 +1,23 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from 'cypress/vue2'
+import NcDialog from '../../src/components/NcDialog/NcDialog.vue'
+
+describe('NcDialog', () => {
+	it('Dialog is correctly labelled', () => {
+		mount(NcDialog, {
+			propsData: {
+				show: true,
+				name: 'My dialog',
+			},
+			slots: {
+				default: 'Text',
+			},
+		})
+
+		cy.findByRole('dialog', { name: 'My dialog' }).should('exist')
+	})
+})

cypress/component/NcModal.cy.ts

@@ -0,0 +1,79 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from 'cypress/vue2'
+import NcModal from '../../src/components/NcModal/NcModal.vue'
+import type { Component } from 'vue'
+
+describe('NcModal', () => {
+	it('Modal is labelled correctly if name is set', () => {
+		mount(NcModal, {
+			propsData: {
+				show: true,
+				name: 'My modal',
+				size: 'small',
+			},
+			slots: {
+				default: 'Text',
+			},
+		})
+
+		cy.findByRole('dialog', { name: 'My modal' }).should('exist')
+	})
+
+	it('Modal is labelled correctly if `labelId` is set', () => {
+		mount(NcModal, {
+			propsData: {
+				show: true,
+				size: 'small',
+				labelId: 'my-id',
+			},
+			slots: {
+				default: '<h2 id="my-id">Labelled dialog</h2>',
+			},
+		})
+
+		cy.findByRole('dialog', { name: 'Labelled dialog' }).should('exist')
+	})
+
+	it('Modal is labelled correctly if `labelId` and `name` are set', () => {
+		mount(NcModal, {
+			propsData: {
+				show: true,
+				size: 'small',
+				name: 'My modal',
+				labelId: 'my-id',
+			},
+			slots: {
+				default: '<h2 id="my-id">Real name</h2>',
+			},
+		})
+
+		cy.findByRole('dialog', { name: 'Real name' }).should('exist')
+	})
+
+	it('close button is visible when content is scrolled', () => {
+		mount(NcModal, {
+			propsData: {
+				show: true,
+				size: 'small',
+				name: 'Name',
+			},
+			slots: {
+				// Create two div as children, first is 100vh = overflows the content, second just gets some data attribute so we can scroll into view
+				default: {
+					render: (h) =>
+						h('div', [
+							h('div', { style: 'height: 100vh;' }),
+							h('div', { attrs: { 'data-cy': 'bottom' } }),
+						]),
+				} as Component,
+			},
+		})
+
+		cy.get('[data-cy="bottom"]').scrollIntoView()
+		cy.get('button.modal-container__close').should('be.visible')
+	})
+})

cypress/support/commands.ts

@@ -5,4 +5,6 @@
 
 import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command'
 
+import '@testing-library/cypress/add-commands'
+
 addCompareSnapshotCommand()

cypress/tsconfig.json

@@ -4,7 +4,8 @@
 	"compilerOptions": {
 		"types": [
 			"cypress",
-			"cypress-visual-regression"
+			"cypress-visual-regression",
+			"@testing-library/cypress"
 		]
 	}	
 }

package.json

@@ -125,6 +125,7 @@
     "@nextcloud/stylelint-config": "^3.0.0",
     "@nextcloud/vite-config": "^1.2.2",
     "@nextcloud/webpack-vue-config": "^6.0.1",
+    "@testing-library/cypress": "^10.0.2",
     "@types/gettext-parser": "^4.0.4",
     "@types/jest": "^29.5.5",
     "@vue/test-utils": "^1.3.0",