Merge pull request #42112 from nextcloud/enh/a11y/page-headings

enh(settings): Set main page heading

apps/settings/src/constants/AppsConstants.js

@@ -24,6 +24,7 @@ import { translate as t } from '@nextcloud/l10n'
 
 /** Enum of verification constants, according to Apps */
 export const APPS_SECTION_ENUM = Object.freeze({
+	installed: t('settings', 'Your apps'),
 	enabled: t('settings', 'Active apps'),
 	disabled: t('settings', 'Disabled apps'),
 	updates: t('settings', 'Updates'),

apps/settings/src/mixins/AppManagement.js

@@ -50,7 +50,7 @@ export default {
 			if (this.app.needsDownload) {
 				return t('settings', 'The app will be downloaded from the App Store')
 			}
-			return false
+			return null
 		},
 		forceEnableButtonTooltip() {
 			const base = t('settings', 'This app is not marked as compatible with your Nextcloud version. If you continue you will still be able to install the app. Note that the app might not work as expected.')

apps/settings/src/views/Apps.vue

@@ -31,7 +31,7 @@
 					:to="{ name: 'apps' }"
 					:exact="true"
 					icon="icon-category-installed"
-					:name="t('settings', 'Your apps')" />
+					:name="$options.APPS_SECTION_ENUM.installed" />
 				<NcAppNavigationItem id="app-category-enabled"
 					:to="{ name: 'apps-category', params: { category: 'enabled' } }"
 					icon="icon-category-enabled"
@@ -88,7 +88,9 @@
 		</NcAppNavigation>
 
 		<!-- Apps list -->
-		<NcAppContent class="app-settings-content" :class="{ 'icon-loading': loadingList }">
+		<NcAppContent class="app-settings-content"
+			:class="{ 'icon-loading': loadingList }"
+			:page-heading="pageHeading">
 			<AppList :category="category" :app="app" :search="searchQuery" />
 		</NcAppContent>
 
@@ -206,6 +208,13 @@ export default {
 	},
 
 	computed: {
+		pageHeading() {
+			if (this.$options.APPS_SECTION_ENUM[this.category]) {
+				return this.$options.APPS_SECTION_ENUM[this.category]
+			}
+			const category = this.$store.getters.getCategoryById(this.category)
+			return category.displayName
+		},
 		loading() {
 			return this.$store.getters.loading('categories')
 		},

apps/settings/src/views/Users.vue

@@ -127,7 +127,7 @@
 				</template>
 			</NcAppNavigation>
 
-			<NcAppContent>
+			<NcAppContent :page-heading="pageHeading">
 				<UserList :selected-group="selectedGroupDecoded"
 					:external-actions="externalActions" />
 			</NcAppContent>
@@ -212,6 +212,17 @@ export default {
 	},
 
 	computed: {
+		pageHeading() {
+			if (this.selectedGroupDecoded === null) {
+				return t('settings', 'Active users')
+			}
+			const matchHeading = {
+				admin: t('settings', 'Admins'),
+				disabled: t('settings', 'Disabled users'),
+			}
+			return matchHeading[this.selectedGroupDecoded] ?? t('settings', 'User group: {group}', { group: this.selectedGroupDecoded })
+		},
+
 		showConfig() {
 			return this.$store.getters.getShowConfig
 		},