Make checkboxes changeable with key press

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -44045,6 +44045,7 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
     <div
       className="control"
       onClick={[Function]}
+      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
@@ -44068,6 +44069,7 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
     <div
       className="control"
       onClick={[Function]}
+      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
@@ -44091,6 +44093,7 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
     <div
       className="control"
       onClick={[Function]}
+      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
@@ -44121,6 +44124,7 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
     <div
       className="control"
       onClick={[Function]}
+      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
@@ -44152,6 +44156,7 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
     <div
       className="control"
       onClick={[Function]}
+      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
@@ -44183,6 +44188,7 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
     <div
       className="control"
       onClick={[Function]}
+      onKeyDown={[Function]}
     >
       <label
         className="checkbox"
@@ -47567,6 +47573,7 @@ exports[`Storyshots Modal|Modal With long tooltips 1`] = `
           <div
             className="control"
             onClick={[Function]}
+            onKeyDown={[Function]}
           >
             <label
               className="checkbox"

scm-ui/ui-components/src/forms/Checkbox.tsx

@@ -45,6 +45,13 @@ export default class Checkbox extends React.Component<Props> {
     }
   };
 
+  onKeyDown = (event: React.KeyboardEvent) => {
+    const SPACE = 32;
+    if (event.keyCode === SPACE) {
+      this.onCheckboxChange();
+    }
+  };
+
   renderHelp = () => {
     const { title, helpText } = this.props;
     if (helpText && !title) {
@@ -64,7 +71,7 @@ export default class Checkbox extends React.Component<Props> {
     return (
       <div className="field">
         {this.renderLabelWithHelp()}
-        <div className="control" onClick={this.onCheckboxChange}>
+        <div className="control" onClick={this.onCheckboxChange} onKeyDown={this.onKeyDown}>
           {/*
             we have to ignore the next line,
             because jsx label does not the custom disabled attribute