theme-toggles
theme-toggles copied to clipboard
Checkbox can't be used with keyboard
In the CSS for the checkbox solution, the checkbox is set to display:none;
. This makes it impossible to reach and interact with using the keyboard. Using the screen reader only class on the checkbox in the HTML instead solves that issue.
Then there is a further issue that there is no focus indicator. This can be solved by adding an outline
to the SVG when the checkbox is focused. You could use :focus-visible
if you don't want the outline when people use a mouse.
I will make sure this is fixed in the latest version. Thanks for all the great feedback