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 {
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;

View File

@ -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" }