feat(switch): add tab index for accessibility with tab key on switch (#…

…95)

* feat(switch): add tab index for acceblity with tab key on switch

Add tab index for acceblity with tab key on switch

* test(switch): update snapshot tests for teb index

Update snapshot tests for tab index

* feat(switch): add onChange function and keypress enter listener

add onChange function and keypress enter listener

* refactor(switch): add enter key press listener

Add enter key press listener

* feat(switch): change eventlistener with onKeyDown prop

Change eventlistener with onKeyDown prop

* feat(switch): add onChange prop to switch component

add onChange prop to switch component

* test(switch): update switch component screenshot tests

update switch component screenshot tests

packages/switch/src/Switch.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import cn from 'classnames';
 
 import { SwitchProps } from './Switch.types';
@@ -8,17 +8,38 @@ import styles from './styles/default.module.css';
 export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
   ({ checked, onChange, disabled = false, className }, ref) => {
     const classNames = cn(styles.container, className);
+    const [isChecked, setChecked] = useState(checked);
+
+    useEffect(() => {
+      setChecked(checked);
+    }, [checked]);
+
+    const handleSwitch = () => {
+      setChecked(!isChecked);
+      onChange();
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e?.key === 'Enter') {
+        handleSwitch();
+        onChange();
+      }
+    };
 
     return (
       <label className={classNames}>
         <input
-          checked={checked}
+          checked={isChecked}
           disabled={disabled}
-          onChange={onChange}
+          onChange={() => handleSwitch()}
           ref={ref}
           type="checkbox"
         />
-        <span className={styles.switch} />
+        <span
+          className={styles.switch}
+          tabIndex={0}
+          onKeyDown={handleKeyDown}
+        />
       </label>
     );
   },

packages/switch/src/Switch.types.ts

@@ -1,5 +1,3 @@
-import React from 'react';
-
 export interface SwitchProps {
   /**
    * Controls the state of the switch. If true, the switch is displayed as checked
@@ -8,7 +6,7 @@ export interface SwitchProps {
   /**
    * Function that will be called every time the Switch value is changed. The `boolean` property `event.target.checked` represent the new/target value of the Switch.
    */
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: () => void;
   /**
    * Additional `class` names to be added
    */

packages/switch/src/__tests__/__snapshots__/Switch.snapshot.test.tsx.snap

@@ -15,6 +15,7 @@ Object {
         />
         <span
           class="switch"
+          tabindex="0"
         />
       </label>
     </div>
@@ -30,6 +31,7 @@ Object {
       />
       <span
         class="switch"
+        tabindex="0"
       />
     </label>
   </div>,
@@ -101,6 +103,7 @@ Object {
         />
         <span
           class="switch"
+          tabindex="0"
         />
       </label>
     </div>
@@ -115,6 +118,7 @@ Object {
       />
       <span
         class="switch"
+        tabindex="0"
       />
     </label>
   </div>,
@@ -185,6 +189,7 @@ Object {
         />
         <span
           class="switch"
+          tabindex="0"
         />
       </label>
     </div>
@@ -198,6 +203,7 @@ Object {
       />
       <span
         class="switch"
+        tabindex="0"
       />
     </label>
   </div>,
@@ -269,6 +275,7 @@ Object {
         />
         <span
           class="switch"
+          tabindex="0"
         />
       </label>
     </div>
@@ -283,6 +290,7 @@ Object {
       />
       <span
         class="switch"
+        tabindex="0"
       />
     </label>
   </div>,

packages/switch/src/docs/Component.stories.mdx

@@ -38,7 +38,7 @@ export const SwitchTemplate = args => <Switch {...args} />;
 <Story
   name="Switch"
   args={{
-    checked: true,
+    checked: false,
     onChange: () => {},
   }}
 >