From 579f9045b982faa593965439b96cc53b204e5b5c Mon Sep 17 00:00:00 2001
From: Runxi Yu <me@runxiyu.org>
Date: Mon, 17 Feb 2025 16:01:57 +0800
Subject: [PATCH] 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.

---
 TODO             |  3 ---
 static/style.css | 29 +++++++++++++++++++----------

diff --git a/TODO b/TODO
index e3180578100a9f518bb61a315561a7883a70e951..e8cc5fa25fc03b90d146bf3843c1f3f8997e52ac 100644
--- a/TODO
+++ b/TODO
@@ -10,6 +10,3 @@ * RSS
 
 * 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 e49a705014c315ee1fdd5f5fc17d6b72956b0dd1..4f2ceab83f05d11fc890085d1b69d2fab526f692 100644
--- a/static/style.css
+++ b/static/style.css
@@ -43,25 +43,30 @@ }
 
 /* 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 @@ .toggle-off-wrapper, .toggle-on-wrapper {
 	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;
@@ -196,6 +202,9 @@ 	display: block;
 }
 .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;

-- 
2.48.1