fix: make top nav bar right elements within a nav

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

Author: kristian-zendato

core/css/header.scss

@@ -147,6 +147,21 @@
 				flex: 1 0;
 			}
 		}
+
+		// List wrapper for notifications / contacts / account (and injected entries)
+		&__items {
+			display: inline-flex;
+			align-items: center;
+			justify-content: flex-end;
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+
+		&__item {
+			display: flex;
+			align-items: center;
+		}
 	}
 
 	// Public layout related headers

core/css/mobile.scss

@@ -134,15 +134,16 @@
 }
 
 @media only screen and (max-width: 480px) {
-	#header .header-end > div > .menu {
+	#header .header-end .menu {
 		max-width: calc(100vw - 10px);
 		position: fixed;
 		&::after {
 			display: none !important;
 		}
 	}
 	/* Arrow directly child of menutoggle */
-	#header .header-end > div {
+	#header .header-end > div,
+	#header .header-end__item > div {
 		&.openedMenu {
 			&::after {
 				display: block;

core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue

@@ -162,7 +162,8 @@ function clearAndCloseSearch() {
 		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)) {
+	:global(.header-end:has(.local-unified-search--open) > :not(.unified-search-menu)),
+	:global(.header-end:has(.local-unified-search--open) .header-end__item:not(:has(.local-unified-search--open))) {
 		display: none;
 	}
 }

core/templates/layout.user.php

@@ -75,11 +75,19 @@
 			<div class="header-center">
 				<div id="unified-search"></div>
 			</div>
-			<div class="header-end">
-				<div id="notifications"></div>
-				<div id="contactsmenu"></div>
-				<div id="user-menu"></div>
-			</div>
+			<nav class="header-end" aria-label="<?php p($l->t('User menu')); ?>">
+				<ul class="header-end__items">
+					<li class="header-end__item">
+						<div id="notifications"></div>
+					</li>
+					<li class="header-end__item">
+						<div id="contactsmenu"></div>
+					</li>
+					<li class="header-end__item">
+						<div id="user-menu"></div>
+					</li>
+				</ul>
+			</nav>
 		</header>
 
 		<div id="content" class="app-<?php p($_['appid']) ?>">