mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Apps menu focus keyboard accessibility fix 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-06-24 19:11:51 +02:00
parent 6806c589d0
commit 94f7a8db13
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
1 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
core/css/header.scss
View File

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