fix(interface): ♿ make segmented controls tabbable

JamesNZL · Jul 16, 2022 · a7129e8 · a7129e8
1 parent 6d05f9c
commit a7129e8
Showing 1 changed file with 16 additions and 4 deletions.
diff --git a/src/style/stylesheet.scss b/src/style/stylesheet.scss
@@ -427,7 +427,9 @@ select {
 		color: var(--text-colour);
 
 		&>input {
-			display: none;
+			opacity: 0;
+			position: absolute;
+			z-index: -10;
 
 			&:checked+label {
 				color: configuration.$accent-complement;
@@ -438,10 +440,18 @@ select {
 				font-weight: 700;
 			}
 
+			&:focus {
+				&~label:last-of-type::before {
+					box-shadow: 0 0 0 0.2rem var(--element-shadow);
+					background-color: var(--element-hover);
+				}
+			}
+
 			&:nth-of-type(1) {
 
 				&:checked,
-				&:active {
+				&:active,
+				&:focus {
 					&~label:last-of-type::before {
 						transform: translateX(calc(-1 * configuration.$border-width));
 					}
@@ -451,7 +461,8 @@ select {
 			&:nth-of-type(2) {
 
 				&:checked,
-				&:active {
+				&:active,
+				&:focus {
 					&~label:last-of-type::before {
 						transform: translateX(calc(100% - 3 * configuration.$border-width));
 					}
@@ -499,7 +510,8 @@ select {
 			&:nth-of-type(3) {
 
 				&:checked,
-				&:active {
+				&:active,
+				&:focus {
 					&~label:last-of-type::before {
 						transform: translateX(calc(200% - 5 * configuration.$border-width));
 					}