Create headings for settings pages

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

Author: JuliaKirschenheuter

apps/settings/lib/Controller/AppSettingsController.php

@@ -136,7 +136,7 @@ public function viewApps(): TemplateResponse {
 		$params['bundles'] = $this->getBundles();
 		$this->navigationManager->setActiveEntry('core_apps');
 
-		$templateResponse = new TemplateResponse('settings', 'settings-vue', ['serverData' => $params]);
+		$templateResponse = new TemplateResponse('settings', 'settings-vue', ['serverData' => $params, 'pageTitle' => $this->l10n->t('Apps')]);
 		$policy = new ContentSecurityPolicy();
 		$policy->addAllowedImageDomain('https://usercontent.apps.nextcloud.com');
 		$templateResponse->setContentSecurityPolicy($policy);

apps/settings/lib/Controller/UsersController.php

@@ -277,7 +277,7 @@ public function usersList(): TemplateResponse {
 		$serverData['newUserRequireEmail'] = $this->config->getAppValue('core', 'newUser.requireEmail', 'no') === 'yes';
 		$serverData['newUserSendEmail'] = $this->config->getAppValue('core', 'newUser.sendEmail', 'yes') === 'yes';
 
-		return new TemplateResponse('settings', 'settings-vue', ['serverData' => $serverData]);
+		return new TemplateResponse('settings', 'settings-vue', ['serverData' => $serverData, 'pageTitle' => $this->l10n->t('Users')]);
 	}
 
 	/**

apps/settings/src/router.js

@@ -27,6 +27,7 @@ import Router from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
 import { APPS_SECTION_ENUM } from './constants/AppsConstants.js'
 import store from './store/index.js'
+import Accessibility from '../../../core/src/OCP/accessibility'
 
 // Dynamic loading
 const Users = () => import(/* webpackChunkName: 'settings-users' */'./views/Users')
@@ -126,6 +127,7 @@ router.afterEach(async (to) => {
 	const metaTitle = await to.meta.title?.(to)
 	if (metaTitle) {
 		document.title = `${metaTitle} - ${baseTitle}`
+		OCP.Accessibility.setPageTitle(metaTitle)
 	} else {
 		document.title = baseTitle
 	}

core/src/OCP/accessibility.js

@@ -29,4 +29,15 @@ export default {
 	disableKeyboardShortcuts() {
 		return loadState('theming', 'shortcutsDisabled', false)
 	},
+	/**
+	 * Set a page title to h1 header
+	 *
+	 * @param {string} [pageTitle] page title from the history api
+	 */
+	setPageTitle(pageTitle) {
+		const heading = document.getElementById('pageHeadingLevel1')
+		if (heading) {
+			heading.textContent = pageTitle
+		}
+	},
 }

core/templates/layout.user.php

@@ -19,9 +19,9 @@
 		<title>
 			<?php
 				p(!empty($_['pageTitle'])?$_['pageTitle'].' - ':'');
-p(!empty($_['application'])?$_['application'].' - ':'');
-p($theme->getTitle());
-?>
+				p(!empty($_['application'])?$_['application'].' - ':'');
+				p($theme->getTitle());
+			?>
 		</title>
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
@@ -57,6 +57,9 @@
 		</div>
 
 		<header role="banner" id="header">
+			<h1 class="hidden-visually" id="pageHeadingLevel1">
+				<?php p(!empty($_['pageTitle'])?$_['pageTitle']:''); ?>
+			</h1>
 			<div class="header-left">
 				<a href="<?php print_unescaped($_['logoUrl'] ?: link_to('', 'index.php')); ?>"
 					id="nextcloud">
@@ -89,9 +92,6 @@
 		</form>
 
 		<main id="content" class="app-<?php p($_['appid']) ?>">
-			<h1 class="hidden-visually">
-				<?php p($l->t('%s\'s homepage', [$theme->getName()])); ?>
-			</h1>
 			<?php print_unescaped($_['content']); ?>
 		</main>
 		<div id="profiler-toolbar"></div>