From 94f7a8db13fcdc15bd0a672b7059e8a0847952d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Sun, 24 Jun 2018 19:11:51 +0200
Subject: [PATCH] Apps menu focus keyboard accessibility fix
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 core/css/header.scss | 39 ++++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/core/css/header.scss b/core/css/header.scss
index 1507a71163..94ce58284a 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -475,13 +475,22 @@ nav[role='navigation'] {
 		}
 	}
 
-
+	/* focused app visual feedback */
 	li:hover a,
 	li a:focus,
 	li a.active {
 		opacity: 1;
+		+ span {
+			display: inline-block;
+		}
 	}
 
+	li:hover span,
+	li:focus span {
+		display: inline-block;
+	}
+
+	/* hidden apps menu */
 	li img,
 	.icon-more-white {
 		display: inline-block;
@@ -489,6 +498,7 @@ nav[role='navigation'] {
 		height: 20px;
 	}
 
+	/* app title popup */
 	li span {
 		display: none;
 		position: absolute;
@@ -509,13 +519,8 @@ nav[role='navigation'] {
 		z-index: 100;
 	}
 
-	li:hover span {
-		display: inline-block;
-	}
-
 	/* show triangle below active app */
-	li:hover a:before,
-	li a.active:before {
+	li a::before {
 		content: ' ';
 		height: 0;
 		width: 0;
@@ -529,20 +534,24 @@ nav[role='navigation'] {
 		bottom: 0;
 		display: none;
 	}
-	li a.active:before,
-	li:hover a:before,
-	li:hover a.active:before {
+	/* triangle focus feedback */
+	li a.active::before,
+	li:hover a::before,
+	li:hover a.active::before,
+	li a:focus::before {
 		display: block;
 	}
-	li a.active:before {
+	li a.active::before {
 		z-index: 99;
 	}
-	li:hover a:before,
-	li a.active:hover:before {
+	li:hover a::before,
+	li:hover a::before,
+	li a.active:hover::before,
+	li a:focus::before {
 		z-index: 101;
 	}
-	&.menu-open li:hover a:before,
-	&.menu-open li a.active:before,
+	&.menu-open li:hover a::before,
+	&.menu-open li a.active::before,
 	&.menu-open li:hover span {
 		display: none !important;
 	}