feat(toggle): fixes disabled issue and adds test

[AlexanderMelox]

Closes #13956

Before
https://github.com/carbon-design-system/carbon/assets/12755042/071a7579-fc21-4b48-b101-2ef6382667a6

After

Screen.Recording.2023-06-08.at.12.04.25.PM.mov

This PR fixes the issue where you are able to still toggle when the Toggle is disabled.

Changelog

Changed

• packages/react/src/components/Toggle/Toggle.js
• packages/react/src/components/Toggle/Toggle-test.js

Testing / Reviewing

Checked on storybook if you are able to toggle while disabled. Added test to make sure you are not able to toggle when disabled.

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Name	Link
🔨 Latest commit	551f369
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/6487452e912086000834d458
😎 Deploy Preview	https://deploy-preview-13958--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[tw15egan]

I'm also seeing some focus styles being applied when clicking on the disabled Toggle.

I was able to remove those styles locally by changing the selector to this on L77 in _toggle.scss

  .#{$prefix}--toggle__button:not(:disabled):focus
    + .#{$prefix}--toggle__label
    .#{$prefix}--toggle__switch,
  .#{$prefix}--toggle__button:not(:disabled):active
    + .#{$prefix}--toggle__label
    .#{$prefix}--toggle__switch,
  .#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active
    .#{$prefix}--toggle__switch {

Seems like the HCM fix at the bottom of the file uses the same selector, so should update that block as well.

[AlexanderMelox]

I'm also seeing some focus styles being applied when clicking on the disabled Toggle.

I was able to remove those styles locally by changing the selector to this on L77 in _toggle.scss

  .#{$prefix}--toggle__button:not(:disabled):focus
    + .#{$prefix}--toggle__label
    .#{$prefix}--toggle__switch,
  .#{$prefix}--toggle__button:not(:disabled):active
    + .#{$prefix}--toggle__label
    .#{$prefix}--toggle__switch,
  .#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active
    .#{$prefix}--toggle__switch {

Seems like the HCM fix at the bottom of the file uses the same selector, so should update that block as well.

I went ahead and added the changes. I removed the CSS that shows focus and active states when the toggle is disabled. In terms of keyboard navigation should the toggle still have focus even thought it's disabled?

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	551f369
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6487452e6b35e2000891f0c2
😎 Deploy Preview	https://deploy-preview-13958--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[tw15egan]

@AlexanderMelox it seems like something is still in the tab order... it goes from the link in the top right, presumably something inside the toggle (but with no focus state), and then to the controls toggle in the storybook panel. I think we should remove the tab stop rather than add focus when disabled. But it doesn't show up when using voiceover, so I'm not sure where the focus is going. Might be a storybook issue?

Styles look great 👍🏻

[AlexanderMelox]

@tw15egan It's just focusing the selector tab at the bottom! So the disabled Toggle is not in the Tab Order :)

Screen.Recording.2023-06-09.at.10.33.05.AM.mov

[francinelucca]

LGTM but seems like 1 tab stop is getting lost, I have to tab twice from the top panel to get to the bottom and it's not clear where the focus is on that "ghost" tab stop

Screen.Recording.2023-06-09.at.10.40.50.AM.mov

[AlexanderMelox]

I'm trying to see where the focus can go, we did disabled this so idk if this is enough.

[AlexanderMelox]

So i did some debugging and it looks like focus is still being applied while disabled, we just don't see the styles

[tw15egan]

@AlexanderMelox weird, even setting the tabIndex on the div (and/or button) it still stays in the tab order 🤔

[AlexanderMelox]

If we find a solution let me know, I have other things to work on. Thought this would be a quick fix.

[tw15egan]

@AlexanderMelox @francinelucca 🙃 figured it out, it's the storybook iframe taking up a tab stop, so not an issue with the component. Sorry about that! 😓

Fixed an issue with linting on the test, the rest looks great. Thanks for contributing!

[AlexanderMelox]

The tests are oddly failing