app-proto/inversive-display/main.css

@@ -14,10 +14,15 @@ body {
 canvas {
   float: left;
   background-color: #020202;
+  border: 1px solid #555;
   border-radius: 10px;
   margin-top: 5px;
 }
 
+canvas:focus {
+  border-color: #aaa;
+}
+
 .hidden {
   display: none;
 }
@@ -29,7 +34,12 @@ canvas {
 }
 
 input[type="radio"] {
-  display: none;
+  appearance: none;
+  width: 0px;
+  height: 0px;
+  padding: 0px;
+  margin: 0px;
+  outline: none;
 }
 
 .tab-pane > label {
@@ -46,6 +56,10 @@ input[type="radio"] {
   background-color: #555;
 }
 
+.tab-pane > label:has(:focus-visible) {
+  outline: medium auto currentColor;
+}
+
 .tab-pane > label:hover:not(:has(:checked)) {
   border-color: #bbb;
   background-color: #333;

app-proto/inversive-display/src/main.rs

@@ -482,7 +482,7 @@ fn main() {
                     }
                 }
                 div { "Mean frame interval: " (mean_frame_interval.get()) " ms" }
-                canvas(ref=display, width="600", height="600")
+                canvas(ref=display, width=600, height=600, tabindex=0)
                 div(ref=gen_controls) {
                     label(class="control") {
                         span { "Sphere 0 depth" }