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 1507a711636..94ce58284ab 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;
}
--
GitLab