From 2efc08d6c056f6c130467019a5d7f51338b9c63d Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Mon, 9 Sep 2024 02:15:04 -0700
Subject: [PATCH] Enable focus for tabs and display

You can now switch tabs from the keyboard using the usual radio button
interaction.
---
 app-proto/inversive-display/main.css    | 16 +++++++++++++++-
 app-proto/inversive-display/src/main.rs |  2 +-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app-proto/inversive-display/main.css b/app-proto/inversive-display/main.css
index a16d04a..f8f7a96 100644
--- a/app-proto/inversive-display/main.css
+++ b/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;
diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs
index 6e6a0e8..3dd4653 100644
--- a/app-proto/inversive-display/src/main.rs
+++ b/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" }