[BUG]: Toggle component and keyboard events (Enter, Arrows)
simpsonr opened this issue · comments
Rachel Simpson commented
Description
Issues that have surfaced while using the Iris toggle component:
- The a11ykey event handler is on Wrapper not hidden Input, so it only visually does the trick of faking the faux toggle on/off, doesn't actually change the value of the hidden input.
- Once a Iris toggle is controlled by keyboard controls (Enter/Arrow key - a11ykey method triggered), the value is very likely inverted compared to where the checked value is from
I wonder if we can remove the a11yKey
method from Mark.tsx, and allow an onKeyUp
prop to determine how the toggle responds to keyboard events
Steps to Reproduce
Use toggle event with checked
prop, try updating the Toggle using Enter/Arrow keyboard event. On re-render, the toggle will switch back to the checked
valued because the a11ykeyevent handler only visually updates the faux toggle not the hidden input component.
Storybook Demonstration
No response
Version
0.104.0
What browsers are you seeing the problem on?
Firefox, Chrome, Safari
Relevant log output
No response
Screenshots
No response