[stable34] fix(settings): correct heading order in account management sidebar

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 { 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
+// 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')
+	})
+})

apps/settings/src/components/AppNavigationGroupList.vue

@@ -5,43 +5,42 @@
 
 <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>
 		<NcAppNavigationList
 			class="account-management__group-list"
+			:aria-label="t('settings', 'Groups')"
 			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"

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')
 		})
 	})
 })