Make checkbox accessible from keyboard

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))

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

@@ -44049,10 +44049,15 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
       <label
         className="checkbox"
       >
-        <i
+        <span
-          className="is-outlined fa-square has-text-black far"
+          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
+        <span
-          className="is-outlined fa-check-square has-text-link fa"
+          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
+        <span
-          className="is-outlined fa-minus-square has-text-link far"
+          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
+        <span
-          className="is-outlined fa-check-square has-text-grey-light fa"
+          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
+        <span
-          className="is-outlined fa-square has-text-black far"
+          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
+        <span
-          className="is-outlined fa-check-square has-text-link fa"
+          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
+              <span
-                className="is-outlined fa-check-square has-text-link fa"
+                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"

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>
   );
 };