Merge pull request #5575 from nextcloud-libraries/backport/5567/next

[next] feat(NcAppNavigationCaption): Allow to set heading level

src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue

@@ -147,6 +147,14 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * If `isHeading` is set, this defines the heading level that should be used
+		 */
+		headingLevel: {
+			type: Number,
+			default: 2,
+		},
+
 		/**
 		 * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop
 		 */
@@ -160,7 +168,9 @@ export default {
 			return this.isHeading ? 'div' : 'li'
 		},
 		captionTag() {
-			return this.isHeading ? 'h2' : 'span'
+			// Limit to at least h2 as h1 is considered invalid and reserved
+			const headingLevel = Math.max(2, this.headingLevel)
+			return this.isHeading ? `h${headingLevel}` : 'span'
 		},
 	},
 }

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

@@ -0,0 +1,74 @@
+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, {
+			props: {
+				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('component is a list entry by default', async () => {
+		const wrapper = shallowMount(NcAppNavigationCaption, {
+			props: {
+				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, {
+			props: {
+				name: 'The name',
+				isHeading: true,
+			},
+		})
+
+		expect(wrapper.element.tagName).toBe('DIV')
+		expect(wrapper.find('h2').exists()).toBe(true)
+	})
+
+	test('can set the heading level', async () => {
+		const wrapper = shallowMount(NcAppNavigationCaption, {
+			props: {
+				name: 'The name',
+				isHeading: true,
+				headingLevel: 3,
+			},
+		})
+
+		expect(wrapper.find('h3').exists()).toBe(true)
+		expect(wrapper.find('h2').exists()).toBe(false)
+	})
+
+	test('does not set the heading level to h1', async () => {
+		const wrapper = shallowMount(NcAppNavigationCaption, {
+			props: {
+				name: 'The name',
+				isHeading: true,
+				headingLevel: 1,
+			},
+		})
+
+		expect(wrapper.find('h2').exists()).toBe(true)
+		expect(wrapper.find('h1').exists()).toBe(false)
+	})
+})