adobe
useSwitch hidden input always in checked state
Provide a general summary of the issue here
When you use the useSwitch hooks together with useToggleState the <VisuallyHidden> component always has a checked class applied to it whatever the state is.
🤔 Expected Behavior?
When you use the useSwitch hooks together with useToggleState I expected the <VisuallyHidden> component in the DOM to change the switch is toggled.
😯 Current Behavior
The 'checked' class is always there.
💁 Possible Solution
I guess it should either remove the class or whatever is correct ARIA procedure.
🔦 Context
I was actually trying to check the dom for seeing if the switch should trigger a load. But the the state of the input is not represented in the dom. (At-least not where I expected it to be, possibly in my own markup)
🖥️ Steps to Reproduce
Easiest reproduction is the example on your own docs:
https://react-spectrum.adobe.com/react-aria/useSwitch.html#usage
Inspect the element and find the hidden . It will have a checked class. This class persists whenever toggle the <Switch />
Version
"react-aria": "^3.31.1", "react-stately": "^3.29.1", "@react-aria/utils": "3.23.0"
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
MacOS Monterey 12.5.1
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
@JoachimKoenigslieb The checked attribute represents the initial state, not changing dynamically with the switch. Therefore, I think this behavior is correct! For details, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#checked
However, since the IDL attribute is changing, you should be able to check the checked attribute. Please refer to the attached video for details.
https://github.com/adobe/react-spectrum/assets/76232929/f30c2ae3-1648-449b-b8a7-8c6a2ad438f7
