diff --git a/cypress/component/NcAppSettingsDialog.cy.ts b/cypress/component/NcAppSettingsDialog.cy.ts
new file mode 100644
index 0000000000..8be76770ae
--- /dev/null
+++ b/cypress/component/NcAppSettingsDialog.cy.ts
@@ -0,0 +1,48 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineComponent, h } from 'vue'
+
+import NcAppSettingsDialog from '../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue'
+import NcAppSettingsSection from '../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue'
+
+describe('NcAppSettingsDialog', () => {
+	it('Dialog is correctly labelled', () => {
+		cy.mount(NcAppSettingsDialog, {
+			propsData: {
+				open: true,
+				name: 'My settings dialog',
+			},
+			slots: {
+				default: defineComponent({
+					render: () => h(NcAppSettingsSection, { props: { name: 'First section', id: 'first' } }),
+				}),
+			},
+		})
+
+		cy.findByRole('dialog', { name: 'My settings dialog' }).should('exist')
+	})
+
+	it('Dialog sections are correctly labelled', () => {
+		cy.mount(NcAppSettingsDialog, {
+			propsData: {
+				open: true,
+				name: 'My settings dialog',
+				showNavigation: true,
+			},
+			slots: {
+				default: defineComponent({
+					render: () => h(NcAppSettingsSection, { props: { name: 'First section', id: 'first' } }, ['The section content']),
+				}),
+			},
+		})
+
+		cy.findByRole('dialog', { name: 'My settings dialog' }).should('exist')
+		cy.findByRole('dialog', { name: 'My settings dialog' })
+			.findByRole('region', { name: 'First section' })
+			.should('exist')
+			.and('contain.text', 'The section content')
+	})
+})
diff --git a/cypress/component/NcDialog.cy.ts b/cypress/component/NcDialog.cy.ts
new file mode 100644
index 0000000000..2be6c0d35d
--- /dev/null
+++ b/cypress/component/NcDialog.cy.ts
@@ -0,0 +1,22 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import NcDialog from '../../src/components/NcDialog/NcDialog.vue'
+
+describe('NcDialog', () => {
+	it('Dialog is correctly labelled', () => {
+		cy.mount(NcDialog, {
+			props: {
+				show: true,
+				name: 'My dialog',
+			},
+			slots: {
+				default: 'Text',
+			},
+		})
+
+		cy.findByRole('dialog', { name: 'My dialog' }).should('exist')
+	})
+})
diff --git a/cypress/component/NcModal.cy.ts b/cypress/component/NcModal.cy.ts
new file mode 100644
index 0000000000..95c11a9626
--- /dev/null
+++ b/cypress/component/NcModal.cy.ts
@@ -0,0 +1,81 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Component } from 'vue'
+
+import { h } from 'vue'
+import NcModal from '../../src/components/NcModal/NcModal.vue'
+
+
+describe('NcModal', () => {
+	it('Modal is labelled correctly if name is set', () => {
+		cy.mount(NcModal, {
+			props: {
+				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', () => {
+		cy.mount(NcModal, {
+			props: {
+				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', () => {
+		cy.mount(NcModal, {
+			props: {
+				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', () => {
+		cy.mount(NcModal, {
+			props: {
+				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('div', [
+							h('div', { style: 'height: 100vh;' }),
+							h('div', { 'data-cy': 'bottom' }),
+						]),
+				} as Component,
+			},
+		})
+
+		cy.get('[data-cy="bottom"]').scrollIntoView()
+		cy.get('button.modal-container__close').should('be.visible')
+	})
+})
diff --git a/cypress/component/modal.cy.ts b/cypress/component/modal.cy.ts
deleted file mode 100644
index c558be46c1..0000000000
--- a/cypress/component/modal.cy.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { mount } from 'cypress/vue'
-import NcModal from '../../src/components/NcModal/NcModal.vue'
-import type { Component } from 'vue'
-import { h } from 'vue'
-
-describe('NcModal', () => {
-	it('close button is visible when content is scrolled', () => {
-		mount(NcModal, {
-			props: {
-				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('div', [
-							h('div', { style: { height: '100vh' } }),
-							h('div', { 'data-cy': 'bottom' }),
-						]),
-				} as Component,
-			},
-		})
-
-		cy.get('[data-cy="bottom"]').scrollIntoView()
-		cy.get('button.modal-container__close').should('be.visible')
-	})
-})
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 1cad81ca4d..e0565b52b8 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -4,5 +4,25 @@
  */
 
 import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command'
+import { mount } from 'cypress/vue'
+import '@testing-library/cypress/add-commands'
 
 addCompareSnapshotCommand()
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+
+declare global {
+	// eslint-disable-next-line @typescript-eslint/no-namespace
+	namespace Cypress {
+		interface Chainable {
+			mount: typeof mount
+		}
+	}
+}
+
+// Example use:
+// cy.mount(MyComponent)
+Cypress.Commands.add('mount', mount)
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
index fd49873712..a03d0f0786 100644
--- a/cypress/support/component.ts
+++ b/cypress/support/component.ts
@@ -3,28 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+// register commands
+import './commands.ts'
+
 // setup styles
 import '../../styleguide/assets/default.css'
 import '../../styleguide/assets/additional.css'
 import '../../styleguide/assets/icons.css'
 
-import './commands.ts'
-import { mount } from '@cypress/vue'
-
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
-
-declare global {
-	// eslint-disable-next-line @typescript-eslint/no-namespace
-	namespace Cypress {
-		interface Chainable {
-			mount: typeof mount
-		}
-	}
-}
-
-// Example use:
-// cy.mount(MyComponent)
-Cypress.Commands.add('mount', mount)
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
index bf89f6a6d2..d3184097ab 100644
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@@ -6,7 +6,8 @@
 		"rootDir": "..",
 		"types": [
 			"cypress",
-			"cypress-visual-regression"
+			"cypress-visual-regression",
+			"@testing-library/cypress"
 		]
 	}	
 }
diff --git a/package-lock.json b/package-lock.json
index bcf0edecc5..27854c4e92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "@ckpack/vue-color": "^1.5.0",
-        "@floating-ui/dom": "^1.6.6",
+        "@floating-ui/dom": "^1.6.7",
         "@nextcloud/auth": "^2.3.0",
         "@nextcloud/axios": "^2.5.0",
         "@nextcloud/browser-storage": "^0.4.0",
@@ -45,7 +45,7 @@
         "unified": "^11.0.5",
         "unist-builder": "^4.0.0",
         "unist-util-visit": "^5.0.0",
-        "vue": "^3.4.30",
+        "vue": "^3.4.31",
         "vue-datepicker-next": "^1.0.3",
         "vue-router": "^4.4.0",
         "vue-select": "^4.0.0-beta.6"
@@ -64,6 +64,7 @@
         "@nextcloud/stylelint-config": "^3.0.1",
         "@nextcloud/vite-config": "^2.1.0",
         "@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#vue3",
+        "@testing-library/cypress": "^10.0.2",
         "@types/gettext-parser": "^4.0.4",
         "@vitest/coverage-v8": "^1.6.0",
         "@vue/test-utils": "^2.4.6",
@@ -2726,18 +2727,18 @@
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.6.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.6.tgz",
-      "integrity": "sha512-qiTYajAnh3P+38kECeffMSQgbvXty2VB6rS+42iWR4FPIlZjLK84E9qtLnMTLIpPz2znD/TaFqaiavMUrS+Hcw==",
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.7.tgz",
+      "integrity": "sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng==",
       "dependencies": {
-        "@floating-ui/core": "^1.0.0",
-        "@floating-ui/utils": "^0.2.3"
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.4"
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.3.tgz",
-      "integrity": "sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww=="
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz",
+      "integrity": "sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA=="
     },
     "node_modules/@fontsource/roboto": {
       "version": "5.0.13",
@@ -4025,6 +4026,144 @@
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true
     },
+    "node_modules/@testing-library/cypress": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/cypress/-/cypress-10.0.2.tgz",
+      "integrity": "sha512-dKv95Bre5fDmNb9tOIuWedhGUryxGu1GWYWtXDqUsDPcr9Ekld0fiTb+pcBvSsFpYXAZSpmyEjhoXzLbhh06yQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.14.6",
+        "@testing-library/dom": "^10.1.0"
+      },
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "cypress": "^12.0.0 || ^13.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.3.0.tgz",
+      "integrity": "sha512-pT/TYB2+IyMYkkB6lqpkzD7VFbsR0JBJtflK3cS68sCNWxmOhWwRm1XvVHlseNEorsNcxkYsb4sRDV3aNIpttg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@testing-library/dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true
+    },
+    "node_modules/@testing-library/dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
@@ -4055,6 +4194,12 @@
       "integrity": "sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==",
       "dev": true
     },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.5",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
@@ -4884,36 +5029,36 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.30.tgz",
-      "integrity": "sha512-ZL8y4Xxdh8O6PSwfdZ1IpQ24PjTAieOz3jXb/MDTfDtANcKBMxg1KLm6OX2jofsaQGYfIVzd3BAG22i56/cF1w==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.31.tgz",
+      "integrity": "sha512-skOiodXWTV3DxfDhB4rOf3OGalpITLlgCeOwb+Y9GJpfQ8ErigdBUHomBzvG78JoVE8MJoQsb+qhZiHfKeNeEg==",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/shared": "3.4.30",
+        "@vue/shared": "3.4.31",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.30.tgz",
-      "integrity": "sha512-+16Sd8lYr5j/owCbr9dowcNfrHd+pz+w2/b5Lt26Oz/kB90C9yNbxQ3bYOvt7rI2bxk0nqda39hVcwDFw85c2Q==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz",
+      "integrity": "sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==",
       "dependencies": {
-        "@vue/compiler-core": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-core": "3.4.31",
+        "@vue/shared": "3.4.31"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.30.tgz",
-      "integrity": "sha512-8vElKklHn/UY8+FgUFlQrYAPbtiSB2zcgeRKW7HkpSRn/JjMRmZvuOtwDx036D1aqKNSTtXkWRfqx53Qb+HmMg==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz",
+      "integrity": "sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==",
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/compiler-core": "3.4.30",
-        "@vue/compiler-dom": "3.4.30",
-        "@vue/compiler-ssr": "3.4.30",
-        "@vue/shared": "3.4.30",
+        "@vue/compiler-core": "3.4.31",
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/compiler-ssr": "3.4.31",
+        "@vue/shared": "3.4.31",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.10",
         "postcss": "^8.4.38",
@@ -4921,12 +5066,12 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.30.tgz",
-      "integrity": "sha512-ZJ56YZGXJDd6jky4mmM0rNaNP6kIbQu9LTKZDhcpddGe/3QIalB1WHHmZ6iZfFNyj5mSypTa4+qDJa5VIuxMSg==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz",
+      "integrity": "sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/shared": "3.4.31"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -4985,49 +5130,49 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.30.tgz",
-      "integrity": "sha512-bVJurnCe3LS0JII8PPoAA63Zd2MBzcKrEzwdQl92eHCcxtIbxD2fhNwJpa+KkM3Y/A4T5FUnmdhgKwOf6BfbcA==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.31.tgz",
+      "integrity": "sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==",
       "dependencies": {
-        "@vue/shared": "3.4.30"
+        "@vue/shared": "3.4.31"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.30.tgz",
-      "integrity": "sha512-qaFEbnNpGz+tlnkaualomogzN8vBLkgzK55uuWjYXbYn039eOBZrWxyXWq/7qh9Bz2FPifZqGjVDl/FXiq9L2g==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.31.tgz",
+      "integrity": "sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==",
       "dependencies": {
-        "@vue/reactivity": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/reactivity": "3.4.31",
+        "@vue/shared": "3.4.31"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.30.tgz",
-      "integrity": "sha512-tV6B4YiZRj5QsaJgw2THCy5C1H+2UeywO9tqgWEc21tn85qHEERndHN/CxlyXvSBFrpmlexCIdnqPuR9RM9thw==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz",
+      "integrity": "sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==",
       "dependencies": {
-        "@vue/reactivity": "3.4.30",
-        "@vue/runtime-core": "3.4.30",
-        "@vue/shared": "3.4.30",
+        "@vue/reactivity": "3.4.31",
+        "@vue/runtime-core": "3.4.31",
+        "@vue/shared": "3.4.31",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.30.tgz",
-      "integrity": "sha512-TBD3eqR1DeDc0cMrXS/vEs/PWzq1uXxnvjoqQuDGFIEHFIwuDTX/KWAQKIBjyMWLFHEeTDGYVsYci85z2UbTDg==",
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.31.tgz",
+      "integrity": "sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.30",
-        "@vue/shared": "3.4.30"
+        "@vue/compiler-ssr": "3.4.31",
+        "@vue/shared": "3.4.31"
       },
       "peerDependencies": {
-        "vue": "3.4.30"
+        "vue": "3.4.31"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz",
-      "integrity": "sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg=="
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz",
+      "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA=="
     },
     "node_modules/@vue/test-utils": {
       "version": "2.4.6",
@@ -5697,6 +5842,15 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
     "node_modules/arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -9527,6 +9681,12 @@
       "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==",
       "dev": true
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true
+    },
     "node_modules/dom-serializer": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -15536,6 +15696,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.10",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
@@ -25336,15 +25505,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.4.30",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.30.tgz",
-      "integrity": "sha512-NcxtKCwkdf1zPsr7Y8+QlDBCGqxvjLXF2EX+yi76rV5rrz90Y6gK1cq0olIhdWGgrlhs9ElHuhi9t3+W5sG5Xw==",
-      "dependencies": {
-        "@vue/compiler-dom": "3.4.30",
-        "@vue/compiler-sfc": "3.4.30",
-        "@vue/runtime-dom": "3.4.30",
-        "@vue/server-renderer": "3.4.30",
-        "@vue/shared": "3.4.30"
+      "version": "3.4.31",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.31.tgz",
+      "integrity": "sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.4.31",
+        "@vue/compiler-sfc": "3.4.31",
+        "@vue/runtime-dom": "3.4.31",
+        "@vue/server-renderer": "3.4.31",
+        "@vue/shared": "3.4.31"
       },
       "peerDependencies": {
         "typescript": "*"
diff --git a/package.json b/package.json
index 6afb3943f0..f0b04d902a 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
   ],
   "dependencies": {
     "@ckpack/vue-color": "^1.5.0",
-    "@floating-ui/dom": "^1.6.6",
+    "@floating-ui/dom": "^1.6.7",
     "@nextcloud/auth": "^2.3.0",
     "@nextcloud/axios": "^2.5.0",
     "@nextcloud/browser-storage": "^0.4.0",
@@ -100,7 +100,7 @@
     "unified": "^11.0.5",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
-    "vue": "^3.4.30",
+    "vue": "^3.4.31",
     "vue-datepicker-next": "^1.0.3",
     "vue-router": "^4.4.0",
     "vue-select": "^4.0.0-beta.6"
@@ -123,6 +123,7 @@
     "@nextcloud/stylelint-config": "^3.0.1",
     "@nextcloud/vite-config": "^2.1.0",
     "@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#vue3",
+    "@testing-library/cypress": "^10.0.2",
     "@types/gettext-parser": "^4.0.4",
     "@vitest/coverage-v8": "^1.6.0",
     "@vue/test-utils": "^2.4.6",
diff --git a/src/components/NcAppSettingsSection/NcAppSettingsSection.vue b/src/components/NcAppSettingsSection/NcAppSettingsSection.vue
index 159e9407ee..0864c094f8 100644
--- a/src/components/NcAppSettingsSection/NcAppSettingsSection.vue
+++ b/src/components/NcAppSettingsSection/NcAppSettingsSection.vue
@@ -4,14 +4,14 @@
 -->
 
 <template>
-	<div :id="htmlId" class="app-settings-section">
-		<h3 class="app-settings-section__name">
+	<section :id="htmlId" :aria-labelledby="`${htmlId}--label`" class="app-settings-section">
+		<h3 :id="`${htmlId}--label`" class="app-settings-section__name">
 			{{ name }}
 		</h3>
 		<slot />
 		<!-- @slot Optonal icon to for the secion in the navigation -->
 		<slot v-if="false" name="icon" />
-	</div>
+	</section>
 </template>
 
 <script>
diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
index f7fad4f693..614510100c 100644
--- a/src/components/NcButton/NcButton.vue
+++ b/src/components/NcButton/NcButton.vue
@@ -422,13 +422,9 @@ td.row-size {
 import type { PropType } from 'vue'
 
 import { defineComponent, h, resolveComponent } from 'vue'
-
+import { ButtonAlignment, ButtonNativeType, ButtonType } from './types'
 import isSlotPopulated from '../../utils/isSlotPopulated'
 
-const BUTTON_ALIGNMENT = ['start', 'start-reverse', 'center', 'center-reverse', 'end', 'end-reverse'] as const
-const BUTTON_TYPES = ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'] as const
-const NATIVE_TYPES = ['submit', 'reset', 'button'] as const
-
 export default defineComponent({
 	name: 'NcButton',
 
@@ -447,10 +443,10 @@ export default defineComponent({
 		 * @type {'start' | 'start-reverse' | 'center' | 'center-reverse' | 'end' | 'end-reverse'}
 		 */
 		alignment: {
-			type: String as PropType<typeof BUTTON_ALIGNMENT[number]>,
-			default: 'center',
-			validator(alignment) {
-				return typeof alignment === 'string' && (BUTTON_ALIGNMENT as readonly string[]).includes(alignment)
+			type: String as PropType<ButtonAlignment>,
+			default: ButtonAlignment.Center,
+			validator(value: string) {
+				return Object.values(ButtonAlignment).includes(value as ButtonAlignment)
 			},
 		},
 
@@ -482,25 +478,26 @@ export default defineComponent({
 		 * @type {'primary' | 'secondary' | 'tertiary' | 'tertiary-no-background' | 'tertiary-on-primary' | 'error' | 'warning' | 'success'}
 		 */
 		type: {
-			type: String as PropType<typeof BUTTON_TYPES[number]>,
+			type: String as PropType<ButtonType>,
+			default: ButtonType.Secondary,
 			validator(value: string) {
-				return (BUTTON_TYPES as readonly string[]).includes(value)
+				return Object.values(ButtonType).includes(value as ButtonType)
 			},
-			default: 'secondary',
 		},
 
 		/**
 		 * Specifies the button native type
 		 * If left empty, the default "button" type will be used.
 		 *
+		 * @default 'button'
 		 * @type {'submit' | 'reset' | 'button'}
 		 */
 		nativeType: {
-			type: String as PropType<typeof NATIVE_TYPES[number]>,
-			validator(value) {
-				return typeof value === 'string' && (NATIVE_TYPES as readonly string[]).includes(value)
+			type: String as PropType<ButtonNativeType>,
+			default: ButtonNativeType.Button,
+			validator(value: string) {
+				return Object.values(ButtonNativeType).includes(value as ButtonNativeType)
 			},
-			default: 'button',
 		},
 
 		/**
diff --git a/src/components/NcButton/index.ts b/src/components/NcButton/index.ts
index d50b4f98d4..11bc480627 100644
--- a/src/components/NcButton/index.ts
+++ b/src/components/NcButton/index.ts
@@ -4,3 +4,4 @@
  */
 
 export { default } from './NcButton.vue'
+export * from './types'
diff --git a/src/components/NcButton/types.ts b/src/components/NcButton/types.ts
new file mode 100644
index 0000000000..ce8fdd03ed
--- /dev/null
+++ b/src/components/NcButton/types.ts
@@ -0,0 +1,33 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+export enum ButtonAlignment {
+	Start = 'start',
+	StartReverse = 'start-reverse',
+	Center = 'center',
+	CenterReverse = 'center-reverse',
+	End = 'end',
+	EndReverse = 'end-reverse',
+}
+
+export enum ButtonNativeType {
+	Submit = 'submit',
+	Reset = 'reset',
+	Button = 'button',
+}
+
+export enum ButtonType {
+	Primary = 'primary',
+	Secondary = 'secondary',
+	Tertiary = 'tertiary',
+	TertiaryNoBackground = 'tertiary-no-background',
+	TertiaryOnPrimary = 'tertiary-on-primary',
+	Error = 'error',
+	/**
+	 * @deprecated Designwise not recommended for new code
+	 */
+	Warning = 'warning',
+	Success = 'success',
+}
diff --git a/src/components/NcDialog/NcDialog.vue b/src/components/NcDialog/NcDialog.vue
index 461a9cd04e..66badb8d18 100644
--- a/src/components/NcDialog/NcDialog.vue
+++ b/src/components/NcDialog/NcDialog.vue
@@ -120,7 +120,10 @@ export default {
 	</NcModal>
 </template>
 
-<script>
+<script lang="ts">
+import type { PropType } from 'vue'
+import type { ComponentProps } from '../../utils/VueTypes.ts'
+
 import { useElementSize } from '@vueuse/core'
 import { computed, defineComponent, ref } from 'vue'
 
@@ -129,6 +132,8 @@ import NcDialogButton from '../NcDialogButton/index.js'
 
 import GenRandomId from '../../utils/GenRandomId.js'
 
+type NcDialogButtonProps = ComponentProps<typeof NcDialogButton>
+
 export default defineComponent({
 	name: 'NcDialog',
 
@@ -152,7 +157,7 @@ export default defineComponent({
 
 		/** Additional elements to add to the focus trap */
 		additionalTrapElements: {
-			type: Array,
+			type: Array as PropType<(string|HTMLElement)[]>,
 			validator: (arr) => {
 				return (
 					Array.isArray(arr) && arr.every(
@@ -189,10 +194,10 @@ export default defineComponent({
 		 * @type {'small'|'normal'|'large'|'full'}
 		 */
 		size: {
-			type: String,
+			type: String as PropType<'small'|'normal'|'large'|'full'>,
 			required: false,
 			default: 'small',
-			validator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),
+			validator: (value: string) => ['small', 'normal', 'large', 'full'].includes(value),
 		},
 
 		/**
@@ -200,10 +205,13 @@ export default defineComponent({
 		 * @default []
 		 */
 		buttons: {
-			type: Array,
+			type: Array as PropType<NcDialogButtonProps[]>,
 			required: false,
 			default: () => ([]),
-			validator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),
+			validator(value: unknown[]) {
+				return Array.isArray(value)
+					&& value.every((element) => typeof element === 'object')
+			},
 		},
 
 		/**
@@ -304,14 +312,13 @@ export default defineComponent({
 	setup(props, { emit, slots }) {
 		/**
 		 * The dialog wrapper element
-		 * @type {import('vue').Ref<HTMLDivElement>}
 		 */
-		const wrapper = ref()
+		const wrapper = ref<HTMLDivElement>()
 
 		/**
 		 * We use the dialog width to decide if we collapse the navigation (flex direction row)
 		 */
-		const { width: dialogWidth } = useElementSize(wrapper, { width: 900 })
+		const { width: dialogWidth } = useElementSize(wrapper, { width: 900, height: 0 })
 
 		/**
 		 * Whether the navigation is collapsed due to dialog and window size
@@ -327,7 +334,7 @@ export default defineComponent({
 		/**
 		 * The unique id of the nav element
 		 */
-		const navigationId = ref(GenRandomId())
+		const navigationId = GenRandomId()
 
 		/**
 		 * aria-label attribute for the nav element
@@ -343,7 +350,7 @@ export default defineComponent({
 				return undefined
 			}
 			// Use dialog name as a fallback label for navigation
-			return props.navigationAriaLabelledby || navigationId.value
+			return props.navigationAriaLabelledby || navigationId
 		})
 
 		/**
@@ -390,6 +397,8 @@ export default defineComponent({
 			container: props.container === undefined ? 'body' : props.container,
 			// we do not pass the name as we already have the name as the headline
 			// name: props.name,
+			// But we need to set the correct label id so the dialog is labelled
+			labelId: navigationId,
 			size: props.size,
 			show: props.open && showModal.value,
 			outTransition: props.outTransition,
diff --git a/src/components/NcDialogButton/NcDialogButton.vue b/src/components/NcDialogButton/NcDialogButton.vue
index f926a32354..6b1e6c53e8 100644
--- a/src/components/NcDialogButton/NcDialogButton.vue
+++ b/src/components/NcDialogButton/NcDialogButton.vue
@@ -22,9 +22,9 @@ Dialog button component used by NcDialog in the actions slot to display the butt
 	</NcButton>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
-import NcButton from '../NcButton/index.ts'
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+import NcButton, { ButtonType } from '../NcButton/index'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 
 export default defineComponent({
@@ -67,10 +67,12 @@ export default defineComponent({
 		 * @type {'primary'|'secondary'|'error'|'warning'|'success'}
 		 */
 		type: {
-			type: String,
+			type: String as PropType<ButtonType>,
+			default: ButtonType.Secondary,
 			required: false,
-			default: 'secondary',
-			validator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),
+			validator(value: string) {
+				return Object.values(ButtonType).includes(value as ButtonType)
+			}
 		},
 
 		/**
diff --git a/src/components/NcDialogButton/index.js b/src/components/NcDialogButton/index.ts
similarity index 100%
rename from src/components/NcDialogButton/index.js
rename to src/components/NcDialogButton/index.ts
diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index 4e2e116361..ab791166f5 100644
--- a/src/components/NcModal/NcModal.vue
+++ b/src/components/NcModal/NcModal.vue
@@ -195,7 +195,7 @@ export default {
 			:style="cssVariables"
 			role="dialog"
 			aria-modal="true"
-			:aria-labelledby="'modal-name-' + randId"
+			:aria-labelledby="modalLabelId"
 			:aria-describedby="'modal-description-' + randId"
 			tabindex="-1">
 			<!-- Header -->
@@ -319,6 +319,10 @@ export default {
 </template>
 
 <script>
+import { useSwipe } from '@vueuse/core'
+import { createFocusTrap } from 'focus-trap'
+import { warn as VueWarn } from 'vue'
+
 import { getTrapStack } from '../../utils/focusTrap.js'
 import { t } from '../../l10n.js'
 import GenRandomId from '../../utils/GenRandomId.js'
@@ -333,9 +337,6 @@ import Close from 'vue-material-design-icons/Close.vue'
 import Pause from 'vue-material-design-icons/Pause.vue'
 import Play from 'vue-material-design-icons/Play.vue'
 
-import { createFocusTrap } from 'focus-trap'
-import { useSwipe } from '@vueuse/core'
-
 export default {
 	name: 'NcModal',
 
@@ -494,6 +495,15 @@ export default {
 			default: undefined,
 		},
 
+		/**
+		 * Id of the element that labels the dialog (the name)
+		 * Not needed if the `name` prop is set, but if no name is set you need to provide the ID of an element to label the dialog for accessibility.
+		 */
+		labelId: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Set element to return focus to after focus trap deactivation
 		 *
@@ -525,6 +535,13 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * ID of the element to label the modal
+		 */
+		modalLabelId() {
+			return this.labelId || `modal-name-${this.randId}`
+		},
+
 		showModal() {
 			return (this.show === undefined) ? this.internalShow : this.show
 		},
@@ -583,6 +600,10 @@ export default {
 		this.mc.stop()
 	},
 	mounted() {
+		if (!this.name && !this.labelId) {
+			VueWarn('[NcModal] You need either set the name or set a `labelId` for accessibility.')
+		}
+
 		// init clear view
 		this.useFocusTrap()
 		this.mc = useSwipe(this.$refs.mask, {
diff --git a/src/utils/VueTypes.ts b/src/utils/VueTypes.ts
new file mode 100644
index 0000000000..5181a72467
--- /dev/null
+++ b/src/utils/VueTypes.ts
@@ -0,0 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { AllowedComponentProps, Component, VNodeProps } from 'vue'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ComponentProps<C extends Component> = C extends new (...args: any) => any
+	? Omit<InstanceType<C>['$props'], keyof VNodeProps | keyof AllowedComponentProps | `on${string}`>
+	: never;