[BITV] No heading for settings pages

[ChristophWurst]

⚠️ This issue respects the following points: ⚠️

• This is a bug, not a question or a configuration/webserver/proxy issue.
• This issue is not already reported on Github (I've searched it).
• Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
• Nextcloud Server is running on 64bit capable CPU, PHP and OS.
• I agree to follow Nextcloud's Code of Conduct.

Bug description

If I open the settings page of Nextcloud there is no h1 heading found in the page's source.

Steps to reproduce

1. Open /index.php/settings/user or /index.php/settings/admin
2. Navigate through the pages from the left sidebar

Expected behavior

A h1 in the content area for the currently selected entry, e.g. "Personal info".

The heading should have tabindex="-1" so the focus jumps to it after selecting the page.

Installation method

Official All-in-One appliance

Operating system

RHEL/CentOS

PHP engine version

PHP 8.1

Web server

Other

Database engine version

MySQL

Is this bug present after an update or on a fresh install?

Fresh Nextcloud Server install

Are you using the Nextcloud Server Encryption module?

Encryption is Enabled

What user-backends are you using?

• Default user-backend (database)
• LDAP/ Active Directory
• SSO - SAML
• Other

Configuration report

No response

List of activated Apps

N/a

Nextcloud Signing status

No response

Nextcloud Logs

No response

Additional info

No response

[ChristophWurst]

there is already an h1 and the sections on the settings pages use h2

[ChristophWurst]

So currently we have a rather generic hidden h1 and h2s for the settings sections.

I would propose to drop the hidden h1 for this page and instead add a visible h1 with the settings page name on top of the h2 sections.

Does that sounds ok from a design perspective @nimishavijay and from an accessibility perspective @michaelnissenbaum? Is this change a requirement for certification?

[michaelnissenbaum]

From accessibility perspective it doesn't make any difference whether heading is hidden or visible. Important is whether the structure of the headings makes sense in regard to the content of the page.

[nimishavijay]

I would propose to drop the hidden h1 for this page and instead add a visible h1 with the settings page name on top of the h2 sections.

So for eg. when you are in the Security section, the top of the content will have an h1 "Security", and h2 "Two factor authentication", "Passwordless authentication", "End-to-end encryption" etc, did I understand that correctly? That sounds good to me.

[ChristophWurst]

Yes, that is how it would render

[JuliaKirschenheuter]

Headings have to be fixed in:

• Files
• Personal + Administration settings
• Users
• Apps
• Photos App
• Activity App

[nickvergessen]

Personal + Administration settings

Most of them use the settings component we have and that has headers in them 🤔

[JuliaKirschenheuter]

Most of them use the settings component we have and that has headers in them

I understand what you mean. I've understood this ticket this way: somehow it should be possible to create a individual name for each page from the sidebar. For now there only headings for for example "Version", "Update" and so on available. But how is it possible to identify "Overview" which is inside of "Administration"?

[nickvergessen]

Well that block is not using vue yet, so you need to do it directly in it's template:
https://github.com/nextcloud/server/blob/master/apps/settings/templates/settings/admin/overview.php#L31

[JuliaKirschenheuter]

There is one acceptable solution which will set right <h1> from page to page and won't break existing page layout: existing <h1> have to be replaced with current value from $_['pageTitle']. Because of it it is important to set an initial value for pageTitle in each app: Users, Apps, Activity, Photos, Personal/Admin settings and Files. This is already done via setting initial value for additional param pageTitle in TemplateResponse of each responsible Controller:

• Personal/Admin settings: Improve accessibility of the title of the settings #29881
• Apps and Users: Create headings for apps, users, settings pages #36640
• Photos: Create headings for photos pages photos#1634
• Activity: Create headings for sidebar pages activity#1081

TODO:

• Files: set initial value for additional param pageTitle in TemplateResponse
• Documentation: extend developer documentation for function new function setPageHeading Extend developer documentation from OCP accessibility documentation#9723

In addition to initial value of pageTitle it is need to update it relating to current page. In all apps besides Personal/Admin settings browser history API takes place. Because of this a function which implements an update of pageTitle should be written in https://github.com/nextcloud/nextcloud-router. This function should be called:

• server/apps/settings/src/router.js

  Line 129 in d334342

  // document.getElementById('pageHeadingLevel1').textContent = metaTitle

• https://github.com/nextcloud/activity/blob/ecc10d541871ca34b9e69664600433c511f7589f/js/script.js#L62
• https://github.com/nextcloud/photos/blob/9f1351106d7c0da773426f5ee79bd9c4678376ee/src/router/index.js#L303
• Files