From e7c4efec9de2a893d389cb3bb5ebcc0b9bf6f328 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Mon, 22 Jun 2026 16:25:17 +0200
Subject: [PATCH 1/3] fix(settings): correct heading order in account
 management sidebar

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
---
 .../components/AppNavigationGroupList.spec.ts | 57 ++++++++++++++++++
 .../src/components/AppNavigationGroupList.vue | 58 +++++++++----------
 2 files changed, 85 insertions(+), 30 deletions(-)
 create mode 100644 apps/settings/src/components/AppNavigationGroupList.spec.ts

diff --git a/apps/settings/src/components/AppNavigationGroupList.spec.ts b/apps/settings/src/components/AppNavigationGroupList.spec.ts
new file mode 100644
index 0000000000000..01b53caf27bb3
--- /dev/null
+++ b/apps/settings/src/components/AppNavigationGroupList.spec.ts
@@ -0,0 +1,57 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
+
+// The component builds a real Vuex store via useStore(); mock it so this stays
+// a focused component test that controls its own data.
+vi.mock('../store/index.js', () => ({
+	useStore: () => ({
+		getters: {
+			getServerData: { isAdmin: false, isDelegatedAdmin: false },
+			getSortedGroups: [],
+			getSubAdminGroups: [],
+			getSearchQuery: '',
+		},
+		commit: vi.fn(),
+		dispatch: vi.fn(),
+	}),
+}))
+
+vi.mock('vue-router/composables', async (importActual) => ({
+	...(await importActual<object>()),
+	useRoute: () => ({ params: {} }),
+	useRouter: () => ({ push: vi.fn() }),
+}))
+
+vi.mock('../service/groups.ts', () => ({
+	searchGroups: () => Promise.resolve([]),
+}))
+
+vi.mock('@vueuse/core', async (importActual) => ({
+	...(await importActual<object>()),
+	useElementVisibility: () => ref(false),
+}))
+
+import AppNavigationGroupList from './AppNavigationGroupList.vue'
+
+describe('AppNavigationGroupList', () => {
+	it('does not expose the group list as a heading (BITV 9.1.3.1a)', () => {
+		const wrapper = mount(AppNavigationGroupList)
+
+		// The sidebar group list is navigation, not document structure. It must
+		// not emit a heading, which would sit before the page <h1> in the DOM
+		// and produce an out-of-order outline (h2 before h1).
+		const caption = wrapper.findComponent(NcAppNavigationCaption)
+		expect(caption.exists()).toBe(true)
+		expect(caption.find('h1,h2,h3,h4,h5,h6').exists()).toBe(false)
+
+		// The "Groups" label is still rendered, just not as a heading.
+		expect(caption.text()).toContain('Groups')
+	})
+})
diff --git a/apps/settings/src/components/AppNavigationGroupList.vue b/apps/settings/src/components/AppNavigationGroupList.vue
index 1a9d214cdd69e..2de76b591a1b5 100644
--- a/apps/settings/src/components/AppNavigationGroupList.vue
+++ b/apps/settings/src/components/AppNavigationGroupList.vue
@@ -5,36 +5,6 @@
 
 <template>
 	<Fragment>
-		<NcAppNavigationCaption
-			:name="t('settings', 'Groups')"
-			:disabled="loadingAddGroup"
-			:aria-label="loadingAddGroup ? t('settings', 'Creating group…') : t('settings', 'Create group')"
-			force-menu
-			is-heading
-			:open.sync="isAddGroupOpen">
-			<template v-if="isAdminOrDelegatedAdmin" #actionsTriggerIcon>
-				<NcLoadingIcon v-if="loadingAddGroup" />
-				<NcIconSvgWrapper v-else :path="mdiPlus" />
-			</template>
-			<template v-if="isAdminOrDelegatedAdmin" #actions>
-				<NcActionText>
-					<template #icon>
-						<NcIconSvgWrapper :path="mdiAccountGroupOutline" />
-					</template>
-					{{ t('settings', 'Create group') }}
-				</NcActionText>
-				<NcActionInput
-					v-model="newGroupName"
-					:label="t('settings', 'Group name')"
-					data-cy-users-settings-new-group-name
-					:label-outside="false"
-					:disabled="loadingAddGroup"
-					:error="hasAddGroupError"
-					:helper-text="hasAddGroupError ? t('settings', 'Please enter a valid group name') : ''"
-					@submit="createGroup" />
-			</template>
-		</NcAppNavigationCaption>
-
 		<p id="group-list-desc" class="hidden-visually">
 			{{ t('settings', 'List of groups. This list is not fully populated for performance reasons. The groups will be loaded as you navigate or search through the list.') }}
 		</p>
@@ -42,6 +12,34 @@
 			class="account-management__group-list"
 			aria-describedby="group-list-desc"
 			data-cy-users-settings-navigation-groups="custom">
+			<NcAppNavigationCaption
+				:name="t('settings', 'Groups')"
+				:disabled="loadingAddGroup"
+				:aria-label="loadingAddGroup ? t('settings', 'Creating group…') : t('settings', 'Create group')"
+				force-menu
+				:open.sync="isAddGroupOpen">
+				<template v-if="isAdminOrDelegatedAdmin" #actionsTriggerIcon>
+					<NcLoadingIcon v-if="loadingAddGroup" />
+					<NcIconSvgWrapper v-else :path="mdiPlus" />
+				</template>
+				<template v-if="isAdminOrDelegatedAdmin" #actions>
+					<NcActionText>
+						<template #icon>
+							<NcIconSvgWrapper :path="mdiAccountGroupOutline" />
+						</template>
+						{{ t('settings', 'Create group') }}
+					</NcActionText>
+					<NcActionInput
+						v-model="newGroupName"
+						:label="t('settings', 'Group name')"
+						data-cy-users-settings-new-group-name
+						:label-outside="false"
+						:disabled="loadingAddGroup"
+						:error="hasAddGroupError"
+						:helper-text="hasAddGroupError ? t('settings', 'Please enter a valid group name') : ''"
+						@submit="createGroup" />
+				</template>
+			</NcAppNavigationCaption>
 			<GroupListItem
 				v-for="group in filteredGroups"
 				:id="group.id"

From 4737e020890f79e8503b4a0290978c9793468d63 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Mon, 22 Jun 2026 16:53:13 +0200
Subject: [PATCH 2/3] chore: build assets

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>
---
 apps/settings/src/components/AppNavigationGroupList.spec.ts | 2 +-
 apps/settings/src/components/AppNavigationGroupList.vue     | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/settings/src/components/AppNavigationGroupList.spec.ts b/apps/settings/src/components/AppNavigationGroupList.spec.ts
index 01b53caf27bb3..a260e78477ca8 100644
--- a/apps/settings/src/components/AppNavigationGroupList.spec.ts
+++ b/apps/settings/src/components/AppNavigationGroupList.spec.ts
@@ -4,8 +4,8 @@
  */
 
 import { mount } from '@vue/test-utils'
-import { ref } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
 import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
 
 // The component builds a real Vuex store via useStore(); mock it so this stays
diff --git a/apps/settings/src/components/AppNavigationGroupList.vue b/apps/settings/src/components/AppNavigationGroupList.vue
index 2de76b591a1b5..3a4252ba99d99 100644
--- a/apps/settings/src/components/AppNavigationGroupList.vue
+++ b/apps/settings/src/components/AppNavigationGroupList.vue
@@ -10,6 +10,7 @@
 		</p>
 		<NcAppNavigationList
 			class="account-management__group-list"
+			:aria-label="t('settings', 'Groups')"
 			aria-describedby="group-list-desc"
 			data-cy-users-settings-navigation-groups="custom">
 			<NcAppNavigationCaption

From 33f320bea4add91b0df1c5b3e36272fcec9578e3 Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Tue, 23 Jun 2026 13:42:43 +0200
Subject: [PATCH 3/3] test(settings): exclude the group caption from group-row
 selectors

test(settings): exclude the group caption from group-row selectors

Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

[skip ci]
---
 cypress/e2e/settings/users_groups.cy.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/cypress/e2e/settings/users_groups.cy.ts b/cypress/e2e/settings/users_groups.cy.ts
index f9f29059884da..b8738115a0e07 100644
--- a/cypress/e2e/settings/users_groups.cy.ts
+++ b/cypress/e2e/settings/users_groups.cy.ts
@@ -163,6 +163,7 @@ describe('Settings: Delete an empty group', { testIsolation: false }, () => {
 		// see that the list of groups does not contain the group
 		cy.get('ul[data-cy-users-settings-navigation-groups="custom"]')
 			.find('li')
+			.not('.app-navigation-caption')
 			.should('not.exist')
 		// and also not in database
 		cy.runOccCommand('group:list --output=json').then(($response) => {
@@ -219,6 +220,7 @@ describe('Settings: Delete a non empty group', () => {
 		// see that the list of groups does not contain the group foo
 		cy.get('ul[data-cy-users-settings-navigation-groups="custom"]')
 			.find('li')
+			.not('.app-navigation-caption')
 			.should('not.exist')
 		// and also not in database
 		cy.runOccCommand('group:list --output=json').then(($response) => {
@@ -260,16 +262,16 @@ describe('Settings: Sort groups in the UI', () => {
 
 	it('See that the groups are sorted by the member count', () => {
 		cy.get('ul[data-cy-users-settings-navigation-groups="custom"]').within(() => {
-			cy.get('li').eq(0).should('contain', 'B') // 1 member
-			cy.get('li').eq(1).should('contain', 'A') // 0 members
+			cy.get('li').not('.app-navigation-caption').eq(0).should('contain', 'B') // 1 member
+			cy.get('li').not('.app-navigation-caption').eq(1).should('contain', 'A') // 0 members
 		})
 	})
 
 	it('See that the order is preserved after a reload', () => {
 		cy.reload()
 		cy.get('ul[data-cy-users-settings-navigation-groups="custom"]').within(() => {
-			cy.get('li').eq(0).should('contain', 'B') // 1 member
-			cy.get('li').eq(1).should('contain', 'A') // 0 members
+			cy.get('li').not('.app-navigation-caption').eq(0).should('contain', 'B') // 1 member
+			cy.get('li').not('.app-navigation-caption').eq(1).should('contain', 'A') // 0 members
 		})
 	})
 
@@ -288,16 +290,16 @@ describe('Settings: Sort groups in the UI', () => {
 
 	it('See that the groups are sorted by the user count', () => {
 		cy.get('ul[data-cy-users-settings-navigation-groups="custom"]').within(() => {
-			cy.get('li').eq(0).should('contain', 'A')
-			cy.get('li').eq(1).should('contain', 'B')
+			cy.get('li').not('.app-navigation-caption').eq(0).should('contain', 'A')
+			cy.get('li').not('.app-navigation-caption').eq(1).should('contain', 'B')
 		})
 	})
 
 	it('See that the order is preserved after a reload', () => {
 		cy.reload()
 		cy.get('ul[data-cy-users-settings-navigation-groups="custom"]').within(() => {
-			cy.get('li').eq(0).should('contain', 'A')
-			cy.get('li').eq(1).should('contain', 'B')
+			cy.get('li').not('.app-navigation-caption').eq(0).should('contain', 'A')
+			cy.get('li').not('.app-navigation-caption').eq(1).should('contain', 'B')
 		})
 	})
 })