Enter key for toggle component is not working as expected

[AlvinChacko]

What package(s) are you using?

• [ ] carbon-components
• [x] carbon-components-react

Detailed description

I was creating a toggle that sets the toggled value from formik context on load. I also have a onChange that checks a customviewOnly prop before making any change to the context variable. I want to mimic this toggle as read-only but visible to screen reader. The space bar and the mouse click works as expected that does not let it toggle when in viewOnly mode but for some reason the enter key lets it toggle on and off even though I dont change anything on the onChange. I tried event.preventDefault() and that didnt help.

Steps to reproduce the issue

1. Create a toggle and set toggled prop to a state variable
2. The onChange prop should only set the toggle on some condition
3. Tab to the toggle and use enter key which will toggle on and off.
4. Now try using the space key and mouse click. Works as expected doesnt change the toggle unless the condition is met.

Additional information

My code:

<Toggle
         aria-label={t(`${LABEL_PREFIX}ariaLabelDefaultMasking`)}
         toggled={encryptionEnabled} //<--- Variable that store the state
         id='toggle-encryption'
         onToggle={(checked) => {
              if (!isViewOnly) setEncryptionEnabled(checked)
          }}
/>

I found this line that could be changing the toggle no matter what and then call then onChange and onToggle: https://github.com/carbon-design-system/carbon-components-react/blob/938a0fe63dd705285a3fdebe42ac378ac9dd3d78/src/components/Toggle/Toggle.js#L119

[tw15egan]

Responded in slack, reposting here as well

I believe it’s due to us assuming that it would be passed disabled, thus eliminating any keyboard interactions. Can you explain why the disabled toggle is not suitable for your use case? I would imagine a user could be frustrated if a Toggle seems intractable, but nothing is happening when they try to click.

[AlvinChacko]

When the toggle is disabled the screen reader does not pick it up when tabbing thru the fields. It just skips them and doesnt even read the value. I tested accessibility using the VoiceOver on Mac

[tay1orjones]

I think this will be satisfied by providing a readonly variant of the Toggle. This would ensure that the Toggle is read by screenreaders, while remaining unable to be changed.

There is a broad workstream shaping up around read only inputs:

• 2177

This is all currently being specced out by design. The individual Toggle variant progress can be tracked here:

• https://github.com/carbon-design-system/carbon/issues/12318