Enable focus for tabs and display

You can now switch tabs from the keyboard using the usual radio button
interaction.
This commit is contained in:
Aaron Fenyes 2024-09-09 02:15:04 -07:00
parent 69ab888d5b
commit 2efc08d6c0
2 changed files with 16 additions and 2 deletions

View File

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

View File

@ -482,7 +482,7 @@ fn main() {
} }
} }
div { "Mean frame interval: " (mean_frame_interval.get()) " ms" } 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) { div(ref=gen_controls) {
label(class="control") { label(class="control") {
span { "Sphere 0 depth" } span { "Sphere 0 depth" }