fix(NcAppSettingsDialog): Make sure sections are correctly labelled

Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud-libraries · Jul 4, 2024 · 4aa6709 · 4aa6709
1 parent 3843348
commit 4aa6709
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 31 deletions.
diff --git a/cypress/component/NcAppSettingsDialog.cy.ts 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 } 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) => 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) => 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
@@ -3,12 +3,11 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { mount } from 'cypress/vue'
 import NcDialog from '../../src/components/NcDialog/NcDialog.vue'
 
 describe('NcDialog', () => {
 	it('Dialog is correctly labelled', () => {
-		mount(NcDialog, {
+		cy.mount(NcDialog, {
 			props: {
 				show: true,
 				name: 'My dialog',

diff --git a/cypress/component/NcModal.cy.ts b/cypress/component/NcModal.cy.ts
@@ -5,14 +5,13 @@
 
 import type { Component } from 'vue'
 
-import { mount } from 'cypress/vue'
 import { h } from 'vue'
 import NcModal from '../../src/components/NcModal/NcModal.vue'
 
 
 describe('NcModal', () => {
 	it('Modal is labelled correctly if name is set', () => {
-		mount(NcModal, {
+		cy.mount(NcModal, {
 			props: {
 				show: true,
 				name: 'My modal',
@@ -27,7 +26,7 @@ describe('NcModal', () => {
 	})
 
 	it('Modal is labelled correctly if `labelId` is set', () => {
-		mount(NcModal, {
+		cy.mount(NcModal, {
 			props: {
 				show: true,
 				size: 'small',
@@ -42,7 +41,7 @@ describe('NcModal', () => {
 	})
 
 	it('Modal is labelled correctly if `labelId` and `name` are set', () => {
-		mount(NcModal, {
+		cy.mount(NcModal, {
 			props: {
 				show: true,
 				size: 'small',
@@ -58,7 +57,7 @@ describe('NcModal', () => {
 	})
 
 	it('close button is visible when content is scrolled', () => {
-		mount(NcModal, {
+		cy.mount(NcModal, {
 			props: {
 				show: true,
 				size: 'small',

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -4,7 +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
@@ -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/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>