Change focused items behavior that neighbor elements (text and border) have no overlapping.

Add native tooltips to items.

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

Author: JuliaKirschenheuter

core/css/header.scss

@@ -20,11 +20,39 @@
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
-	a:not(.button):focus-visible, button:not(.button-vue):focus-visible, div[role="button"]:focus-visible {
-		box-shadow: inset 0 0 0 2px var(--color-primary-text);
-		border-radius: var(--border-radius);
-		outline: none;
-	}
+}
+#header a:not(.button):focus-visible, #header .button-vue:focus-visible, #header div[role=button]:focus-visible,
+#expanddiv a:not(.button):focus-visible,
+#expanddiv button:not(.button-vue):focus-visible,
+#expanddiv div[role=button]:focus-visible {
+	outline: none;
+}
+
+#expanddiv a:not(.button):focus-visible,
+#expanddiv button:not(.button-vue):focus-visible,
+#expanddiv div[role=button]:focus-visible {
+	box-shadow: inset 0 0 0 2px var(--color-primary-text);
+	border-radius: var(--border-radius);
+}
+
+#header a:not(.button):focus-visible::after, #header .button-vue:focus-visible::after, #header div[role=button]:focus-visible::after {
+	content: " ";
+	position: absolute;
+	transform: translateX(-50%);
+	width: 12px;
+	height: 2px;
+	border-radius: 3px;
+	background-color: var(--color-primary-text);
+	left: 50%;
+	opacity: 1;
+	bottom: 6%;
+}
+
+#header .header-right a:not(.button):focus-visible::after, #header .header-right div[role=button]:focus-visible::after {
+	bottom: 10%;
+}
+#header .header-right #expand.menutoggle:focus-visible::after {
+	left: 40%;
 }
 
 /* HEADERS ------------------------------------------------------------------ */

core/src/components/AppMenu.vue

@@ -30,6 +30,7 @@
 				<a :href="app.href"
 					:class="{ 'has-unread': app.unread > 0 }"
 					:aria-label="appLabel(app)"
+					:title="app.name"
 					:aria-current="app.active ? 'page' : false">
 					<img :src="app.icon" alt="">
 					<div class="app-menu-entry--label">
@@ -195,25 +196,27 @@ $header-icon-size: 20px;
 			text-align: center;
 			bottom: -5px;
 			left: 50%;
+			top: 45%;
 			display: block;
 			min-width: 100%;
 			transform: translateX(-50%);
 			transition: all 0.1s ease-in-out;
 			width: 100%;
 			text-overflow: ellipsis;
 			overflow: hidden;
+			letter-spacing: -0.5px;
 		}
 
 		&:hover,
 		&:focus-within {
 			opacity: 1;
 			.app-menu-entry--label {
 				opacity: 1;
-				font-weight: bold;
-				font-size: 14px;
+				font-weight: bolder;
 				bottom: 0;
-				width: auto;
-				overflow: visible;
+				width: 100%;
+				text-overflow: ellipsis;
+				overflow: hidden;
 			}
 		}
 
@@ -227,7 +230,7 @@ $header-icon-size: 20px;
 		opacity: 1;
 
 		img {
-			margin-top: -6px;
+			margin-top: -8px;
 		}
 
 		.app-menu-entry--label {
@@ -254,10 +257,7 @@ $header-icon-size: 20px;
 
 	&:focus-visible {
 		opacity: 1;
-		background-color: transparent !important;
-		border-radius: var(--border-radius);
-		outline: none;
-		box-shadow: 0 0 0 2px var(--color-primary-text);
+		outline: none !important;
 	}
 }