Merge pull request #43804 from nextcloud/fix/a11y/groups-heading

fix(settings): Split group lists

Author: skjnldsv

apps/settings/src/views/Users.vue

@@ -34,7 +34,7 @@
 					</template>
 				</NcAppNavigationNew>
 
-				<template #list>
+				<NcAppNavigationList>
 					<NcAppNavigationItem id="everyone"
 						:exact="true"
 						:name="t('settings', 'Active accounts')"
@@ -79,41 +79,44 @@
 							</NcCounterBubble>
 						</template>
 					</NcAppNavigationItem>
+				</NcAppNavigationList>
+
+				<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 #actionsTriggerIcon>
+						<NcLoadingIcon v-if="loadingAddGroup" />
+						<Plus v-else :size="20" />
+					</template>
+					<template #actions>
+						<NcActionText>
+							<template #icon>
+								<AccountGroup :size="20" />
+							</template>
+							{{ t('settings', 'Create group') }}
+						</NcActionText>
+						<NcActionInput :label="t('settings', 'Group name')"
+							data-cy-settings-new-group-name
+							:label-outside="false"
+							:disabled="loadingAddGroup"
+							:value.sync="newGroupName"
+							:error="hasAddGroupError"
+							:helper-text="hasAddGroupError ? t('settings', 'Please enter a valid group name') : ''"
+							@submit="createGroup" />
+					</template>
+				</NcAppNavigationCaption>
 
-					<NcAppNavigationCaption :name="t('settings', 'Groups')"
-						:disabled="loadingAddGroup"
-						:aria-label="loadingAddGroup ? t('settings', 'Creating group …') : t('settings', 'Create group')"
-						force-menu
-						:open.sync="isAddGroupOpen">
-						<template #actionsTriggerIcon>
-							<NcLoadingIcon v-if="loadingAddGroup" />
-							<Plus v-else :size="20" />
-						</template>
-						<template #actions>
-							<NcActionText>
-								<template #icon>
-									<AccountGroup :size="20" />
-								</template>
-								{{ t('settings', 'Create group') }}
-							</NcActionText>
-							<NcActionInput :label="t('settings', 'Group name')"
-								data-cy-settings-new-group-name
-								:label-outside="false"
-								:disabled="loadingAddGroup"
-								:value.sync="newGroupName"
-								:error="hasAddGroupError"
-								:helper-text="hasAddGroupError ? t('settings', 'Please enter a valid group name') : ''"
-								@submit="createGroup" />
-						</template>
-					</NcAppNavigationCaption>
-
+				<NcAppNavigationList>
 					<GroupListItem v-for="group in groupList"
 						:id="group.id"
 						:key="group.id"
 						:active="selectedGroupDecoded === group.id"
 						:name="group.title"
 						:count="group.count" />
-				</template>
+				</NcAppNavigationList>
 
 				<template #footer>
 					<ul class="app-navigation-entry__settings">
@@ -150,6 +153,7 @@ import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
 import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
 import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
+import NcAppNavigationList from '@nextcloud/vue/dist/Components/NcAppNavigationList.js'
 import NcAppNavigationNew from '@nextcloud/vue/dist/Components/NcAppNavigationNew.js'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
 import NcCounterBubble from '@nextcloud/vue/dist/Components/NcCounterBubble.js'
@@ -182,6 +186,7 @@ export default {
 		NcAppNavigation,
 		NcAppNavigationCaption,
 		NcAppNavigationItem,
+		NcAppNavigationList,
 		NcAppNavigationNew,
 		NcContent,
 		NcCounterBubble,

cypress/e2e/settings/users_groups.cy.ts

@@ -54,7 +54,7 @@ describe('Settings: Create groups', () => {
 		handlePasswordConfirmation(admin.password)
 
 		// see that the created group is in the list
-		cy.get('ul.app-navigation__list').within(() => {
+		cy.get('ul.app-navigation-list').within(() => {
 			// see that the list of groups contains the group foo
 			cy.contains(groupName).should('exist')
 		})
@@ -76,8 +76,8 @@ describe('Settings: Assign user to a group', { testIsolation: false }, () => {
 	})
 
 	it('see that the group is in the list', () => {
-		cy.get('ul.app-navigation__list').contains('li', groupName).should('exist')
-		cy.get('ul.app-navigation__list').contains('li', groupName).within(() => {
+		cy.get('ul.app-navigation-list').contains('li', groupName).should('exist')
+		cy.get('ul.app-navigation-list').contains('li', groupName).within(() => {
 			cy.get('.counter-bubble__counter')
 				.should('not.exist') // is hidden when 0
 		})
@@ -118,7 +118,7 @@ describe('Settings: Assign user to a group', { testIsolation: false }, () => {
 
 	it('see the group was successfully assigned', () => {
 		// see a new memeber
-		cy.get('ul.app-navigation__list')
+		cy.get('ul.app-navigation-list')
 			.contains('li', groupName)
 			.find('.counter-bubble__counter')
 			.should('contain', '1')
@@ -142,7 +142,7 @@ describe('Settings: Delete an empty group', { testIsolation: false }, () => {
 	})
 
 	it('see that the group is in the list', () => {
-		cy.get('ul.app-navigation__list').within(() => {
+		cy.get('ul.app-navigation-list').within(() => {
 			// see that the list of groups contains the group foo
 			cy.contains(groupName).should('exist').scrollIntoView()
 			// open the actions menu for the group
@@ -163,7 +163,7 @@ describe('Settings: Delete an empty group', { testIsolation: false }, () => {
 	})
 
 	it('deleted group is not shown anymore', () => {
-		cy.get('ul.app-navigation__list').within(() => {
+		cy.get('ul.app-navigation-list').within(() => {
 			// see that the list of groups does not contain the group
 			cy.contains(groupName).should('not.exist')
 		})
@@ -192,12 +192,12 @@ describe('Settings: Delete a non empty group', () => {
 
 	it('see that the group is in the list', () => {
 		// see that the list of groups contains the group
-		cy.get('ul.app-navigation__list').contains('li', groupName).should('exist').scrollIntoView()
+		cy.get('ul.app-navigation-list').contains('li', groupName).should('exist').scrollIntoView()
 	})
 
 	it('can delete the group', () => {
 		// open the menu
-		cy.get('ul.app-navigation__list')
+		cy.get('ul.app-navigation-list')
 			.contains('li', groupName)
 			.find('button.action-item__menutoggle')
 			.click({ force: true })
@@ -212,7 +212,7 @@ describe('Settings: Delete a non empty group', () => {
 	})
 
 	it('deleted group is not shown anymore', () => {
-		cy.get('ul.app-navigation__list').within(() => {
+		cy.get('ul.app-navigation-list').within(() => {
 			// see that the list of groups does not contain the group foo
 			cy.contains(groupName).should('not.exist')
 		})