[✨]: Headless switch component

[tleperou]

Summary

Switch component behaves like a input checkbox, but looking like a on/off switch button.

Behave as same as a native input checkbox:

• keyboard control
• accessibile

Expected

• integrated component
• axe report

[AlanLes]

👋 Hello @tleperou is it still opened and unassigned? Looks like you're working on it in #250 ? 😄

[tleperou]

🙌

Hello,

I think we can proceed with this one. There's currently a slider but it provides a limited access to its internal parts (cf. thumb) and implement the wrong aria-attributes.

There're more details about it in that thread on Discord. Let me know if you don't have Discord, I will DM with you.

I stashed codes about the Switch somewhere, let me retrieve that.

🖖

[tleperou]

Well, it's pretty much what I proposed in the PR #250 .

It remains:

exposing the thumb

Expose the thumb with a sub component, for instance:

<Root>
  <Thumb />
</Root>

expose the state

When creating the headless, we can reuse the pattern of the #280 to expose (optionally) the state of the switch.

const switch = useSwitch();

useTask(({track}) => {
  const checked = track(() => switch.checked.value);
  console.log('is switch checked? ', checked');
});

return (
  <Switch use={switch} />
);

aria compliant

Double check that is fully accessible and follow the common best practices. For example (and not limited to the following), how the thumb is seen from screen reader – it shall not be seen.

References

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role
• https://www.w3.org/WAI/ARIA/apg/patterns/switch/