fix(interface): ♿ show outline focus ring on keyboard focus

JamesNZL · Jul 17, 2022 · 956c8c3 · 956c8c3
1 parent be94ffe
commit 956c8c3
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/src/style/stylesheet.scss b/src/style/stylesheet.scss
@@ -162,6 +162,10 @@ a {
 		box-shadow: 0 0 0 0.2rem map-get($options, 'shadow');
 	}
 
+	&:focus-visible {
+		outline: revert;
+	}
+
 	&:active {
 		color: map-get($options, 'text-active');
 		background-color: map-get($options, 'background-active');
@@ -359,14 +363,11 @@ select {
 	}
 
 	&:focus {
+		outline: none;
 		box-shadow: 0 0 0 0.2rem var(--element-shadow);
 		background-color: var(--element-hover);
 	}
 
-	&:focus-visible {
-		outline: none;
-	}
-
 	&.invalid-input {
 		box-shadow: 0 0 0 0.2rem rgba(red, calc(var(--shadow-multiplier) * 0.275));
 
@@ -440,18 +441,20 @@ select {
 				font-weight: 700;
 			}
 
-			&:focus {
+			&:focus-visible {
 				&~label:last-of-type::before {
 					box-shadow: 0 0 0 0.2rem var(--element-shadow);
 					background-color: var(--element-hover);
+					outline: 1px auto;
+					outline: -webkit-focus-ring-color auto 1px;
 				}
 			}
 
 			&:nth-of-type(1) {
 
 				&:checked,
 				&:active,
-				&:focus {
+				&:focus-visible {
 					&~label:last-of-type::before {
 						transform: translateX(calc(-1 * configuration.$border-width));
 					}
@@ -462,7 +465,7 @@ select {
 
 				&:checked,
 				&:active,
-				&:focus {
+				&:focus-visible {
 					&~label:last-of-type::before {
 						transform: translateX(calc(100% - 3 * configuration.$border-width));
 					}
@@ -511,7 +514,7 @@ select {
 
 				&:checked,
 				&:active,
-				&:focus {
+				&:focus-visible {
 					&~label:last-of-type::before {
 						transform: translateX(calc(200% - 5 * configuration.$border-width));
 					}