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 { setPageHeading } from '../../../core/src/OCP/accessibility.js'
 
 // 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}`
+		setPageHeading(metaTitle)
 	} else {
 		document.title = baseTitle
 	}

apps/settings/tests/Controller/AppSettingsControllerTest.php

@@ -209,7 +209,8 @@ public function testViewApps() {
 					'appstoreEnabled' => true,
 					'bundles' => [],
 					'developerDocumentation' => ''
-				]
+				],
+				'pageTitle' => 'Apps'
 			],
 			'user');
 		$expected->setContentSecurityPolicy($policy);
@@ -243,7 +244,8 @@ public function testViewAppsAppstoreNotEnabled() {
 					'appstoreEnabled' => false,
 					'bundles' => [],
 					'developerDocumentation' => ''
-				]
+				],
+				'pageTitle' => 'Apps'
 			],
 			'user');
 		$expected->setContentSecurityPolicy($policy);

core/src/OCP/accessibility.js

@@ -22,11 +22,23 @@
 
 import { loadState } from '@nextcloud/initial-state'
 
+/**
+ * Set the page heading
+ *
+ * @param {string} heading page title from the history api
+ */
+export function setPageHeading(heading) {
+	const headingEl = document.getElementById('page-heading-level-1')
+	if (headingEl) {
+		headingEl.textContent = heading
+	}
+}
 export default {
 	/**
 	 * @return {boolean} Whether the user opted-out of shortcuts so that they should not be registered
 	 */
 	disableKeyboardShortcuts() {
 		return loadState('theming', 'shortcutsDisabled', false)
 	},
+	setPageHeading,
 }

core/templates/layout.user.php

@@ -57,6 +57,9 @@
 		</div>
 
 		<header role="banner" id="header">
+			<h1 class="hidden-visually" id="page-heading-level-1">
+				<?php p(!empty($_['pageTitle'])?$_['pageTitle']:$theme->getName()); ?>
+			</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>

dist/core-main.js

@@ -114,3 +114,25 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
+/**
+ * @copyright Copyright (c) 2022 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */