From 6f406cd440f5b1a1956f0bf6f76b366929ec6dcd Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 8 May 2024 22:08:57 +0200
Subject: [PATCH] feat(NcAppNavigationCaption): Add `heading-id` prop to allow
 setting the ID on the caption itself

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../NcAppNavigationCaption.vue                | 32 +++++++++-
 .../NcAppNavigation/NcAppNavigation.spec.js   |  1 -
 .../NcAppNavigationCaption.spec.ts            | 60 +++++++++++++++++++
 3 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 tests/unit/components/NcAppNavigation/NcAppNavigationCaption.spec.ts

diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
index 14db1178a8..44bc6a0cbb 100644
--- a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
+++ b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -1,4 +1,6 @@
 <docs>
+### Basic usage
+
 ```vue
 	<template>
 		<ul class="nav">
@@ -95,6 +97,23 @@
 	</style>
 ```
 
+### Element used as a heading
+```vue
+	<template>
+		<!-- e.g. NcAppNavigation-->
+		<div style="display: flex; flex-direction: column;">
+			<NcAppNavigationCaption heading-id="mylist-heading"
+				is-heading
+				name="My navigation list" />
+			<NcAppNavigationList aria-labelledby="mylist-heading">
+				<NcAppNavigationItem name="First" />
+				<NcAppNavigationItem name="Second" />
+				<NcAppNavigationItem name="Third" />
+			</NcAppNavigationList>
+		</div>
+	</template>
+```
+
 </docs>
 
 <template>
@@ -102,7 +121,9 @@
 		class="app-navigation-caption"
 		:class="{ 'app-navigation-caption--heading': isHeading }">
 		<!-- Name of the caption -->
-		<component :is="captionTag" class="app-navigation-caption__name">
+		<component :is="captionTag"
+			:id="headingId"
+			class="app-navigation-caption__name">
 			{{ name }}
 		</component>
 
@@ -138,6 +159,15 @@ export default {
 			required: true,
 		},
 
+		/**
+		 * `id` to set on the inner caption
+		 * Can be used for connecting the `NcActionCaption` with `NcActionList` using `aria-labelledby`.
+		 */
+		headingId: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * Enable when used as a heading
 		 * e.g. Before NcAppNavigationList
diff --git a/tests/unit/components/NcAppNavigation/NcAppNavigation.spec.js b/tests/unit/components/NcAppNavigation/NcAppNavigation.spec.js
index 07ab89b5ae..b18be230cd 100644
--- a/tests/unit/components/NcAppNavigation/NcAppNavigation.spec.js
+++ b/tests/unit/components/NcAppNavigation/NcAppNavigation.spec.js
@@ -19,7 +19,6 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { emit } from '@nextcloud/event-bus'
diff --git a/tests/unit/components/NcAppNavigation/NcAppNavigationCaption.spec.ts b/tests/unit/components/NcAppNavigation/NcAppNavigationCaption.spec.ts
new file mode 100644
index 0000000000..f2f4508a60
--- /dev/null
+++ b/tests/unit/components/NcAppNavigation/NcAppNavigationCaption.spec.ts
@@ -0,0 +1,60 @@
+import { describe, expect, test } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import NcAppNavigationCaption from '../../../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue'
+
+describe('NcAppNavigationCaption.vue', () => {
+	test('attributes are passed to actions', async () => {
+		const wrapper = shallowMount(NcAppNavigationCaption, {
+			propsData: {
+				name: 'The name',
+			},
+			attrs: {
+				forceMenu: 'true',
+			},
+			slots: {
+				actions: [
+					'<NcActionButton>Button 1</NcActionButton>',
+					'<NcActionButton>Button 2</NcActionButton>',
+				],
+			},
+		})
+
+		expect(wrapper.findComponent({ name: 'NcActions' }).attributes('forcemenu')).toBe('true')
+	})
+
+	test('can set id on the caption', async () => {
+		const wrapper = shallowMount(NcAppNavigationCaption, {
+			propsData: {
+				name: 'The name',
+				isHeading: true,
+				headingId: 'my-heading-id',
+			},
+		})
+
+		expect(wrapper.find('h2').attributes('id')).toBe('my-heading-id')
+	})
+
+	test('component is a list entry by default', async () => {
+		const wrapper = shallowMount(NcAppNavigationCaption, {
+			propsData: {
+				name: 'The name',
+			},
+		})
+
+		expect(wrapper.element.tagName).toBe('LI')
+		expect(wrapper.find('h2').exists()).toBe(false)
+		expect(wrapper.find('span').exists()).toBe(true)
+	})
+
+	test('component tags are adjusted when used as heading', async () => {
+		const wrapper = shallowMount(NcAppNavigationCaption, {
+			propsData: {
+				name: 'The name',
+				isHeading: true,
+			},
+		})
+
+		expect(wrapper.element.tagName).toBe('DIV')
+		expect(wrapper.find('h2').exists()).toBe(true)
+	})
+})