feat(toggle): fixes disabled issue and adds test (#13958)

* feat(toggle): fixes disabled issue and adds test

* fix: changes location of disabled check

* feat: removes styles that show focus state when disabled

* test(Toggle): fix lint error

* chore(Toggle): add screen to import

---------

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import Toggle from './Toggle';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 const prefix = 'cds';
@@ -145,6 +145,19 @@ describe('Toggle', () => {
       expect(wrapper.getByRole('switch')).toBeChecked();
     });
 
+    it('does not change value when disabled', () => {
+      const onClick = jest.fn();
+      const onToggle = jest.fn();
+      wrapper.rerender(
+        <Toggle {...props} onClick={onClick} onToggle={onToggle} disabled />
+      );
+
+      expect(onClick).not.toHaveBeenCalled();
+      userEvent.click(screen.getByRole('switch'));
+      expect(onClick).not.toHaveBeenCalled();
+      expect(onToggle).not.toHaveBeenCalled();
+    });
+
     it('does not change value when readonly', async () => {
       const onClick = jest.fn();
       const onToggle = jest.fn();

packages/react/src/components/Toggle/Toggle.js

@@ -83,7 +83,11 @@ export function Toggle({
               // the keyboard event which already calls handleClick. if we wouldn't catch this, the
               // onClick and onToggle functions would be called twice whenever the user activates the
               // toggle by keyboard and props['aria-labelledby'] is passed.
-              if (buttonElement.current && e.target !== buttonElement.current) {
+              if (
+                buttonElement.current &&
+                e.target !== buttonElement.current &&
+                !disabled
+              ) {
                 handleClick(e);
                 buttonElement.current.focus();
               }

packages/styles/scss/components/toggle/_toggle.scss

@@ -77,10 +77,8 @@
   .#{$prefix}--toggle__button:focus
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__switch,
-  .#{$prefix}--toggle__button:not(:disabled):active
-    + .#{$prefix}--toggle__label
-    .#{$prefix}--toggle__switch,
-  .#{$prefix}--toggle:active .#{$prefix}--toggle__switch {
+  .#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active
+    .#{$prefix}--toggle__switch {
     box-shadow: 0 0 0 1px $focus-inset, 0 0 0 3px $focus;
   }
 
@@ -192,10 +190,8 @@
   .#{$prefix}--toggle__button:focus
     + .#{$prefix}--toggle__label
     .#{$prefix}--toggle__switch,
-  .#{$prefix}--toggle__button:not(:disabled):active
-    + .#{$prefix}--toggle__label
-    .#{$prefix}--toggle__switch,
-  .#{$prefix}--toggle:active .#{$prefix}--toggle__switch {
+  .#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active
+    .#{$prefix}--toggle__switch {
     @include high-contrast-mode('focus');
   }
 }