Fix navigation keyboard accessibility

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

1 files changed, 30 insertions, 11 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 822a27cc197..702ab5d75bc 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -145,8 +145,9 @@ kbd {
 				padding-left: 38px !important;
 			}
 
-			&:focus,
 			&:hover,
+			&:focus,
+			&:active,
 			&.active,
 			a.selected {
 				&,
@@ -156,6 +157,13 @@ kbd {
 				}
 			}
 
+			/* a instead of li is focused by keyboards */
+			a:focus,
+			a:active {
+				opacity: 1;
+				box-shadow: inset 4px 0 var(--color-primary);
+			}
+
 			/* align loader */
 			&.icon-loading-small:after {
 				left: 22px;
@@ -204,8 +212,8 @@ kbd {
 					display: inline-flex;
 					flex-wrap: wrap;
 					padding-left: 44px;
-					&:focus,
 					&:hover,
+					&:focus,
 					&.active,
 					a.selected {
 						&,
@@ -488,7 +496,8 @@ kbd {
 			padding: 5px;
 			margin-right: 0;
 			height: 38px;
-			&:hover {
+			&:hover,
+			&:focus {
 				/* overlapp borders */
 				z-index: 1;
 			}
@@ -537,7 +546,8 @@ kbd {
 			height: 44px;
 			width: 44px;
 			line-height: 44px;
-			&:hover, &:focus {
+			&:hover,
+			&:focus {
 				opacity: 1;
 			}
 		}
@@ -707,7 +717,8 @@ kbd {
 	opacity: .57;
 
 	&.opened,
-	&:hover {
+	&:hover,
+	&:focus {
 		background-color: var(--color-main-background);
 		opacity: 1;
 		box-shadow: inset 4px 0 var(--color-primary);
@@ -769,10 +780,13 @@ kbd {
 			font-weight: 600;
 			border-bottom: 1px solid var(--color-border);
 		}
-		&:hover {
+		&:hover,
+		&:focus {
 			border-bottom: 1px solid var(--color-border);
 		}
-		&.selected, &:hover {
+		&.selected,
+		&:hover
+		&:focus {
 			margin-bottom: 0px;
 			color: var(--color-main-text);
 			a {
@@ -911,7 +925,9 @@ $popovericon-size: 16px;
 			&[class*=' icon-'] {
 				padding: 0 #{($popoveritem-height - $popovericon-size) / 2} 0 $popoveritem-height !important;
 			}
-			&:hover, &:focus, &.active {
+			&:hover,
+			&:focus,
+			&.active {
 				opacity: 1 !important;
 			}
 			/* prevent .action class to break the design */
@@ -1056,13 +1072,15 @@ $popovericon-size: 16px;
 				padding: 22px;
 				opacity: .3;
 					cursor: pointer;
-				&:hover, &:focus {
+				&:hover,
+				&:focus {
 					opacity: .7;
 				}
 				&[class^='icon-star'],
 				&[class*=' icon-star'] {
 					opacity: .7;
-					&:hover, &:focus {
+					&:hover,
+					&:focus {
 						opacity: 1 ;
 					}
 
@@ -1073,7 +1091,8 @@ $popovericon-size: 16px;
 			}
 		}
 
-		&:hover, &:focus,
+		&:hover,
+		&:focus,
 		&.active {
 			background-color: var(--color-background-dark);
 		}