From 938a0fe63dd705285a3fdebe42ac378ac9dd3d78 Mon Sep 17 00:00:00 2001
From: Christos Paschalidis <paschalidi@outlook.com>
Date: Thu, 18 Apr 2019 20:48:44 +0200
Subject: [PATCH] feat(Toggle and ToggleSmall): on Enter key press toggle
 action is being triggered. (#2219)

* fix(Toggle): adds event for key.wich===13

* fix(ToggleSmall): adds event for key.wich===13

* fix(Toggle): adds helpers for keypress

* fix: adds helpers for keypress

* fix: adds actions
---
 src/components/Toggle/Toggle.js           | 8 ++++++++
 src/components/ToggleSmall/ToggleSmall.js | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/components/Toggle/Toggle.js b/src/components/Toggle/Toggle.js
index 2ff036e076..e7af76cf73 100644
--- a/src/components/Toggle/Toggle.js
+++ b/src/components/Toggle/Toggle.js
@@ -10,6 +10,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { keys, match } from '../../tools/key';
 
 const { prefix } = settings;
 const getInstanceId = setupGetInstanceId();
@@ -113,6 +114,13 @@ class Toggle extends React.Component {
             ref={el => {
               input = el;
             }}
+            onKeyUp={evt => {
+              if (match(evt, keys.ENTER)) {
+                input.checked = !input.checked;
+                onChange(evt);
+                onToggle(input.checked, id, evt);
+              }
+            }}
           />
 
           <label className={`${prefix}--toggle__label`} htmlFor={id}>
diff --git a/src/components/ToggleSmall/ToggleSmall.js b/src/components/ToggleSmall/ToggleSmall.js
index f41c69ee69..9e98433e06 100644
--- a/src/components/ToggleSmall/ToggleSmall.js
+++ b/src/components/ToggleSmall/ToggleSmall.js
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
+import { keys, match } from '../../tools/key';
 
 const { prefix } = settings;
 
@@ -52,6 +53,13 @@ const ToggleSmall = ({
           input = el;
         }}
         aria-label={ariaLabel}
+        onKeyUp={evt => {
+          if (match(evt, keys.ENTER)) {
+            input.checked = !input.checked;
+            onChange(evt);
+            onToggle(input.checked, id, evt);
+          }
+        }}
       />
 
       <label className={`${prefix}--toggle__label`} htmlFor={id}>