Merge pull request #5565 from nextcloud-libraries/fix/navigation-caption

feat(NcAppNavigationCaption): Add `caption-id` prop to allow setting the ID on the caption itself

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

@@ -1,4 +1,4 @@
-import { describe, expect } from '@jest/globals'
+import { describe, expect, test } from '@jest/globals'
 import { shallowMount } from '@vue/test-utils'
 import NcAppNavigationCaption from '../../../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue'
 
@@ -22,6 +22,18 @@ describe('NcAppNavigationCaption.vue', () => {
 		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: {