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:
parent
69ab888d5b
commit
2efc08d6c0
@ -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;
|
||||
|
@ -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" }
|
||||
|
Loading…
Reference in New Issue
Block a user