fix(NcAppSettingsDialog): Make sure sections are correctly labelled

Signed-off-by: Ferdinand Thiessen <[email protected]>

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 { mount } from 'cypress/vue2'
+import NcAppSettingsDialog from '../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue'
+import NcAppSettingsSection from '../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue'
+import { defineComponent } from 'vue'
+
+describe('NcAppSettingsDialog', () => {
+	it('Dialog is correctly labelled', () => {
+		mount(NcAppSettingsDialog, {
+			propsData: {
+				open: true,
+				name: 'My settings dialog',
+			},
+			slots: {
+				default: defineComponent({
+					render: (h) => h(NcAppSettingsSection, { props: { name: 'First section', id: 'first' } })
+				})
+			},
+		})
+
+		cy.findByRole('dialog', { name: 'My settings dialog' }).should('exist')
+	})
+
+	it('Dialog sections are correctly labelled', () => {
+		mount(NcAppSettingsDialog, {
+			propsData: {
+				open: true,
+				name: 'My settings dialog',
+				showNavigation: true,
+			},
+			slots: {
+				default: defineComponent({
+					render: (h) => 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')
+	})
+})

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>