From 6ba090b82e82c6527e99e7ed9ddb6c93f5b61467 Mon Sep 17 00:00:00 2001
From: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Date: Mon, 31 Aug 2020 15:45:31 +0200
Subject: [PATCH] Make checkbox accessible from keyboard

---
 CHANGELOG.md                                  |  1 +
 .../src/__snapshots__/storyshots.test.ts.snap | 91 +++++++++++++------
 .../src/forms/TriStateCheckbox.tsx            |  7 +-
 3 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e5f6a7e87e..ae84089240 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix text-overflow in danger zone ([#1298](https://github.com/scm-manager/scm-manager/pull/1298))
 - Fix plugin installation error if previously a plugin was installed with the same dependency which is still pending. ([#1300](https://github.com/scm-manager/scm-manager/pull/1300))
 - Fix layout overflow on changesets with multiple tags ([#1314](https://github.com/scm-manager/scm-manager/pull/1314))
+- Make checkbox accessible from keyboard ([#1309](https://github.com/scm-manager/scm-manager/pull/1309))
 - Fix logging of large stacktrace for unknown language ([#1313](https://github.com/scm-manager/scm-manager/pull/1313))
 - Fix incorrect word breaking behaviour in markdown ([1317](https://github.com/scm-manager/scm-manager/pull/1317))
 - Remove obsolete revision encoding on sources ([#1315](https://github.com/scm-manager/scm-manager/pull/1315))
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 c725cfbb6d..ccec322bf8 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -44049,10 +44049,15 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
       <label
         className="checkbox"
       >
-        <i
-          className="is-outlined fa-square has-text-black far"
-        />
-         
+        <span
+          className="gwt-Anchor"
+          tabIndex={0}
+        >
+          <i
+            className="is-outlined fa-square has-text-black far"
+          />
+           
+        </span>
         Not checked
       </label>
     </div>
@@ -44067,10 +44072,15 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
       <label
         className="checkbox"
       >
-        <i
-          className="is-outlined fa-check-square has-text-link fa"
-        />
-         
+        <span
+          className="gwt-Anchor"
+          tabIndex={0}
+        >
+          <i
+            className="is-outlined fa-check-square has-text-link fa"
+          />
+           
+        </span>
         Checked
       </label>
     </div>
@@ -44085,10 +44095,15 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
       <label
         className="checkbox"
       >
-        <i
-          className="is-outlined fa-minus-square has-text-link far"
-        />
-         
+        <span
+          className="gwt-Anchor"
+          tabIndex={0}
+        >
+          <i
+            className="is-outlined fa-minus-square has-text-link far"
+          />
+           
+        </span>
         Indeterminate
       </label>
     </div>
@@ -44111,10 +44126,15 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
         className="checkbox"
         disabled={true}
       >
-        <i
-          className="is-outlined fa-check-square has-text-grey-light fa"
-        />
-         
+        <span
+          className="gwt-Anchor"
+          tabIndex={0}
+        >
+          <i
+            className="is-outlined fa-check-square has-text-grey-light fa"
+          />
+           
+        </span>
         Checked but disabled
       </label>
     </div>
@@ -44136,10 +44156,15 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
       <label
         className="checkbox"
       >
-        <i
-          className="is-outlined fa-square has-text-black far"
-        />
-         
+        <span
+          className="gwt-Anchor"
+          tabIndex={0}
+        >
+          <i
+            className="is-outlined fa-square has-text-black far"
+          />
+           
+        </span>
         Classic helpText
         <span
           className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"
@@ -44162,10 +44187,15 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
       <label
         className="checkbox"
       >
-        <i
-          className="is-outlined fa-check-square has-text-link fa"
-        />
-         
+        <span
+          className="gwt-Anchor"
+          tabIndex={0}
+        >
+          <i
+            className="is-outlined fa-check-square has-text-link fa"
+          />
+           
+        </span>
         Long helpText
         <span
           className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"
@@ -47541,10 +47571,15 @@ exports[`Storyshots Modal|Modal With long tooltips 1`] = `
             <label
               className="checkbox"
             >
-              <i
-                className="is-outlined fa-check-square has-text-link fa"
-              />
-               
+              <span
+                className="gwt-Anchor"
+                tabIndex={0}
+              >
+                <i
+                  className="is-outlined fa-check-square has-text-link fa"
+                />
+                 
+              </span>
               Checkbox
               <span
                 className="tooltip has-tooltip-right Help__HelpTooltip-ykmmew-0 cYhfno is-inline-block has-tooltip-multiline"
diff --git a/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx b/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx
index 13e5eb03b3..6e92c48ad3 100644
--- a/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx
+++ b/scm-ui/ui-components/src/forms/TriStateCheckbox.tsx
@@ -58,10 +58,13 @@ const TriStateCheckbox: FC<Props> = ({ checked, indeterminate, disabled, label,
     color = "black";
   }
 
+  // We need a tabIndex to make the checkbox accessible from keyboard.
+  // We also add the gwt-Anchor css class to support the key-jump browser extension
+  // https://github.com/KennethSundqvist/key-jump-chrome-extension/blob/master/src/content.js#L365
   return (
-    <>
+    <span tabIndex={0} className="gwt-Anchor">
       <Icon iconStyle={"is-outlined"} name={icon} className={className} color={color} testId={testId} /> {label}
-    </>
+    </span>
   );
 };