vimeo / iris

Vimeo Design System

Home Page:https://vimeo.github.io/iris

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[BUG]: Toggle component and keyboard events (Enter, Arrows)

simpsonr opened this issue · comments

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