feat(NcAppNavigationCaption): Add heading-id prop to allow setting …

…the ID on the caption itself

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

src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue

@@ -1,4 +1,6 @@
 <docs>
+### Basic usage
+
 ```vue
 	<template>
 		<ul class="nav">
@@ -95,14 +97,33 @@
 	</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>
 	<component :is="wrapperTag"
 		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>
 
@@ -139,6 +160,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

tests/unit/components/NcAppNavigation/NcAppNavigation.spec.js

@@ -19,7 +19,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import { describe, it, expect, afterEach } from '@jest/globals'
+import { describe, it, expect } from '@jest/globals'
 import { mount } from '@vue/test-utils'
 import { emit } from '@nextcloud/event-bus'
 import { nextTick } from 'vue'

tests/unit/components/NcAppNavigation/NcAppNavigationCaption.spec.ts

@@ -0,0 +1,60 @@
+import { describe, expect, test } from '@jest/globals'
+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)
+	})
+})