Fix keyboard focus outline for toggles. Add CSS comments.

replete · Jun 9, 2024 · 5d61a5d · 5d61a5d
1 parent 4422f3b
commit 5d61a5d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/biscuitman.css b/biscuitman.css
@@ -102,7 +102,8 @@
 		}
 
 		&[disabled] {
-			display: none
+			display: none;
+			/* This rule is for the 'force' option */
 		}
 
 		&:hover {
@@ -355,6 +356,12 @@
 			}
 		}
 
+		&:has(:focus-within) {
+			/* Show focus outline correctly correctly with keyboard focus */
+			outline: auto;
+			outline-color:highlight; /* in Chrome the wrong colour is shown, this should make more sense */
+		}
+
 		&:has([disabled]:checked) {
 			opacity:0.6
 		}

diff --git a/dist/biscuitman.min.css b/dist/biscuitman.min.css