fix: make top nav bar right elements within a nav

[kristian-zendato]

• Resolves: https://github.com/nextcloud-gmbh/customer-feature-requests/issues/1591
• Related PR: fix: update role of NcHeaderMenu nextcloud-libraries/nextcloud-vue#8874

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]

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

[kristian-zendato]

@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]

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

[kristian-zendato]

@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]

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

yes

[ShGKme]

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]

What about toolbar instead?

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

[kristian-zendato]

@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.

[github-actions]

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.)

[susnux]

So the plan would be now:

• remove role none from li
• remove role toolbar
• = keep this as a simple list
• change label as "header menu" is too unspecific

[susnux]

@nimishavijay or @kra-mo do you have a better idea how to label the section of the navigation here? (the part including notifications, assistent, contacts etc)

[nimishavijay]

They are all rather distinct apps there, and if anyone using a screenreader heard something generic for this category like "More apps" or something like that, they may skip over it entirely.

If there is any way we can take them out of this section and have them be directly accessible that would be the best from a UX persepctive. If that's not possible then I'd suggest "Nextcloud Assistant, notifications and settings" to indicate the most commonly used apps.

In the future we could also think about moving the assistant to the center section as it's closer in function to searching, then the top right group could become "Notifications and settings" which makes more sense in my head.
@kra-mo any thoughts here since you worked on the new layout?

[kra-mo]

The original proposal did have Assistant next to search, but I wonder about the balance if we have suggested apps on the left in the future.

As for the label, considering it also includes the people menu for example, I really am not sure what to call it. I do think something generic may be the best, but without using the word "app". For regular users, I would reserve that word for apps in the grid. Maybe "Actions and options"?