From 36b8f667bf36cf489a1e5e85169ccb29dc11435c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Pfeuffer?= <rene.pfeuffer@cloudogu.com>
Date: Tue, 1 Sep 2020 13:55:53 +0200
Subject: [PATCH] Make checkboxes changeable with key press

---
 .../src/__snapshots__/storyshots.test.ts.snap            | 7 +++++++
 scm-ui/ui-components/src/forms/Checkbox.tsx              | 9 ++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index ccec322bf8..c34fb0bc10 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/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"
diff --git a/scm-ui/ui-components/src/forms/Checkbox.tsx b/scm-ui/ui-components/src/forms/Checkbox.tsx
index 30b740dee1..4f31c1b175 100644
--- a/scm-ui/ui-components/src/forms/Checkbox.tsx
+++ b/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