Merge pull request #61545 from nextcloud/backport/61505/stable32

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

Author: AndyScherzinger

apps/settings/src/components/AppNavigationGroupList.spec.ts

@@ -0,0 +1,56 @@
+/**
+ * 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'
+import AppNavigationGroupList from './AppNavigationGroupList.vue'
+
+// 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),
+}))
+
+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

@@ -9,7 +9,6 @@
 			: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" />
@@ -40,6 +39,7 @@
 			{{ 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">
 			<GroupListItem v-for="group in filteredGroups"

cypress/e2e/settings/users_groups.cy.ts

@@ -248,16 +248,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
 		})
 	})
 
@@ -276,16 +276,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')
 		})
 	})
 })