style.css: Reformat and improve checkbox accessibility

Previously the expandable checkboxes were { display: none; } which made
them impossible to focus via the keyboard. Here we change it to {
opacity: 0; position: absolute; }, so it becomes keyboard-focusable.
Then we add an outline to the <label> when the checkbox is focused so
users could visually identify that the checkbox has been focused.

2 files changed, 19 insertions, 13 deletions

diff --git a/TODO b/TODO
index e318057..e8cc5fa 100644
--- a/TODO
+++ b/TODO
@@ -10,6 +10,3 @@
 
 * Unit tests
 * Refactoring other stuff
-
-Accessibility:
-* Those labels in css state machines are not keyboard focusable!
diff --git a/static/style.css b/static/style.css
index e49a705..4f2ceab 100644
--- a/static/style.css
+++ b/static/style.css
@@ -43,25 +43,30 @@ html, code, pre {
 
 /* Toggle table controls */
 .toggle-table-off, .toggle-table-on {
-       display: none;
+	opacity: 0;
+	position: absolute;
+}
+.toggle-table-off:focus + table > thead > tr > th > label,
+.toggle-table-on:focus + table > thead > tr > th > label {
+	outline: 1.5px var(--primary-color) solid;
 }
 .toggle-table-off + table > thead > tr > th, .toggle-table-on + table > thead > tr > th {
-       padding: 0;
+	padding: 0;
 }
 .toggle-table-off + table > thead > tr > th > label, .toggle-table-on + table > thead > tr > th > label {
-       width: 100%;
-       display: inline-block;
-       padding: 3px 0;
-       cursor: pointer;
+	width: 100%;
+	display: inline-block;
+	padding: 3px 0;
+	cursor: pointer;
 }
 .toggle-table-off:checked + table > tbody {
-       display: none;
+	display: none;
 }
 .toggle-table-on + table > tbody {
-       display: none;
+	display: none;
 }
 .toggle-table-on:checked + table > tbody {
-       display: table-row-group;
+	display: table-row-group;
 }
 
 /* Footer styles */
@@ -181,7 +186,8 @@ pre.chunk {
 	border: var(--lighter-border-color) solid 1px;
 }
 .toggle-off-toggle, .toggle-on-toggle {
-	display: none;
+	opacity: 0;
+	position: absolute;
 }
 .toggle-off-header, .toggle-on-header {
 	font-weight: bold;
@@ -197,6 +203,9 @@ pre.chunk {
 .toggle-on-content {
 	display: none;
 }
+.toggle-on-toggle:focus + .toggle-on-header, .toggle-off-toggle:focus + .toggle-off-header {
+	outline: 1.5px var(--primary-color) solid;
+}
 .toggle-on-toggle:checked + .toggle-on-header + .toggle-on-content {
 	display: block;
 }