fix: make top nav bar right elements within a nav by kristian-zendato · Pull Request #63239 · nextcloud/server

kristian-zendato · 2026-08-14T06:42:33Z

Summary

Move the top navbar right elements within a nav element.

Checklist

Code is properly formatted
Sign-off message is added to all commits
Tests (unit, integration, api and/or acceptance) are included
Screenshots before/after for front-end changes
Documentation (manuals or wiki) has been updated or is not required
Backports requested where applicable (ex: critical bugfixes)
Labels added where applicable (ex: bug/enhancement, 3. to review, feature component)
Milestone added for target branch/version (ex: 32.x for stable32)

AI (if applicable)

The content of this PR was partly or fully generated using AI

susnux · 2026-08-14T13:35:11Z

-				<div id="contactsmenu"></div>
-				<div id="user-menu"></div>
-			</div>
+			<nav class="header-end" aria-label="<?php p($l->t('User menu')); ?>">


Thats not the user menu, the user menu is the one on the very end.
This navigation should have a different label

Also the content within must have proper roles.

ul needs role = menubar

li needs role = none

button within need role = menuitem -> this needs to be fixed in NcHeaderButton

@susnux The user menu is already in nav wrapper.
As far as I checked the comment here(https://github.com/nextcloud-gmbh/customer-feature-requests/issues/1591#issuecomment-5281587123), we need to move the whole top navbar within a nav wrapper which is in div now.

That's the issue though: wrapping it means nav inside nav. Fine to have the outer one, but then AccountMenu shouldn't set is-nav. And "User menu" is the wrong label for the whole bar either way.

pringelmann · 2026-08-17T08:30:02Z


 @media only screen and (max-width: 480px) {
-	#header .header-end > div > .menu {
+	#header .header-end .menu {


Dropping to a descendant selector means any nested .menu in the header matches now, not just the toggle's own. Can you do the same two-selector thing as below?

pringelmann · 2026-08-17T08:33:47Z

 		inset-inline: 0;
 	}
 	// Hide all other entries, especially the user menu as it might leak pixels
-	:global(.header-end:has(.local-unified-search--open) > :not(.unified-search-menu)) {


Can you drop this? The local search bar is Deck-only and Deck already replaced it with its own filter input, so it's getting removed from the header anyway. No point patching selectors on it.

susnux

This part looks good, likely needs adjustments in the vue library for NcHeadMenu to set role = menuitem

kristian-zendato · 2026-08-24T15:40:38Z

@susnux Regarding updating role of NcHeaderMenu to menuitem, I don't think adding role="menuitem" in NcHeaderMenu is a good solution because we have many places using it.
To solve this problem, I am going to add is-menu-item prop to it.
What do you think about my idea?

susnux · 2026-08-24T15:56:59Z

@kristian-zendato which other place is using it? It must only be used within that header bar thats its full purpose.

kristian-zendato · 2026-08-24T16:00:06Z

@susnux I checked that again and yes, they are only used in header.
Then it means, we can update role in NcHeaderMenu without any further update?

susnux · 2026-08-24T16:19:36Z

Then it means, we can update role in NcHeaderMenu without any further update?

yes

ShGKme · 2026-08-26T11:53:22Z

ul needs role = menubar

@susnux Why? menubar has different semantics and requirements.

menubar represents a menu, just with always visible items.

Semantically, this is not about any set of buttons but a complete actions set. Like this one:

I can see how it can be used as an application menu, but even in this case, it is usually about the classic application menus (File | Edit | View | Help).

Technically, a menubar must have menu keyboard navigation, for example:

Entire menu is a single focusable element, entered by Tab and exited by the next Tab
Navigation inside the manu is performed by Arrows

So if we keep it a menubar, we must implement it as a menu bar.

What about toolbar instead?

susnux · 2026-08-26T21:09:36Z

What about toolbar instead?

You are right! The proper role is likely toolbar after reading the role descriptions again.
Thank you!

Signed-off-by: kristian-zendato <kristian.zendato@nextcloud.com>

kristian-zendato · 2026-08-28T08:06:25Z

@susnux , @ShGKme Thank you for your review.
I update the role to toolbar instead of menubar and remove the PR from nextcloud-vue as no update is needed from there.

I'd appreciate it if you review it again.

susnux · 2026-08-28T21:58:16Z

+			<nav class="header-end" aria-label="<?php p($l->t('Header menu')); ?>">
+				<ul class="header-end__items" role="toolbar">


After looking again at the overall structure of the new waffle menu I think there are more problems:

the dashboard link (the logo) should be within the same <nav> as the waffle menu

I do not think the <nav> here makes sense if we use toolbar because this is not a navigation we do not navigate anywhere but we just open menus or other actions.

toolbar still requires custom TAB handling

1 is unrelated to this PR but we should still at some point fix it
2 I guess just use ´
without` should fix it
3 see:

https://handreichungen.bfit-bund.de/accessible-uie/werkzeugleiste.html

no?

What about keeping it a general list? What is the problem with keeping it general buttons? Especially if this is about just 3-4 buttons, not a large menu.

github-actions · 2026-08-29T01:38:01Z

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

kristian-zendato requested review from a team as code owners August 14, 2026 06:42

kristian-zendato requested review from icewind1991, leftybournes, provokateurin, skjnldsv, sorbaugh and susnux and removed request for a team August 14, 2026 06:42

kristian-zendato added 3. to review Waiting for reviews accessibility labels Aug 14, 2026

susnux requested a review from pringelmann August 14, 2026 13:30

susnux reviewed Aug 14, 2026

View reviewed changes

pringelmann reviewed Aug 17, 2026

View reviewed changes

kristian-zendato force-pushed the fix/top-navbar-right-elements-nav branch from 384a1bd to 4551f67 Compare August 20, 2026 17:51

kristian-zendato requested review from pringelmann and susnux August 20, 2026 17:51

susnux approved these changes Aug 21, 2026

View reviewed changes

kristian-zendato mentioned this pull request Aug 24, 2026

fix: update role of NcHeaderMenu nextcloud-libraries/nextcloud-vue#8874

Closed

4 tasks

kristian-zendato requested a review from susnux August 24, 2026 16:42

fix: make top nav bar elements within a nav

ff48cf3

Signed-off-by: kristian-zendato <kristian.zendato@nextcloud.com>

kristian-zendato force-pushed the fix/top-navbar-right-elements-nav branch from 4551f67 to ff48cf3 Compare August 28, 2026 08:04

susnux reviewed Aug 28, 2026

View reviewed changes

github-actions Bot added the feedback-requested label Aug 29, 2026

		<nav class="header-end" aria-label="<?php p($l->t('Header menu')); ?>">
		<ul class="header-end__items" role="toolbar">

Uh oh!

Uh oh!

Conversation

kristian-zendato commented Aug 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

AI (if applicable)

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

susnux left a comment

Choose a reason for hiding this comment

Uh oh!

kristian-zendato commented Aug 24, 2026

Uh oh!

susnux commented Aug 24, 2026

Uh oh!

kristian-zendato commented Aug 24, 2026

Uh oh!

susnux commented Aug 24, 2026

Uh oh!

ShGKme commented Aug 26, 2026

Uh oh!

susnux commented Aug 26, 2026

Uh oh!

kristian-zendato commented Aug 28, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Aug 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kristian-zendato commented Aug 14, 2026 •

edited

Loading