skeletonlabs
Switch cannot be selected via keyboard
Current Behavior
The switch component (here or even on the homepage) cannot be selected or toggle using the keyboard (Tab), which means it's not accessible.
Expected Behavior
I should be selectable/toggable via the keyboard.
Steps To Reproduce
No response
Link to Reproduction / Stackblitz
No response
Environment Information
No response
More Information
No response
Just to clarify, the issue is the Switch component itself doesn't reflect the selection state visually.
If you select near the selection, press tab, then spacebar, the switch will toggle.
The reason for this is Zag uses custom CSS selector statements and custom styles. Where as Skeleton tends to lean into the default selection state in the case of native buttons, ect to avoid this scenario. So these are a bit at odds. https://zagjs.com/components/svelte/switch#styling-guide
That said, I'd like us to resolve this, but it may require some cooperation with Zag to allow utility classes to be used, as per the Skeleton norm. But it's part of the items we're reviewing as part of the larger component pass for v4.0:
- https://github.com/skeletonlabs/skeleton/issues/3463
- https://github.com/skeletonlabs/skeleton/pull/3491
We may even group this item into that as relevant.
FYI @Hugos68
Solved in Skeleton v4 RC - try it here: https://github.com/skeletonlabs/skeleton/discussions/3844