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

@@ -44048,11 +44048,16 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
     >
       <label
         className="checkbox"
+      >
+        <span
+          className="gwt-Anchor"
+          tabIndex={0}
         >
           <i
             className="is-outlined fa-square has-text-black far"
           />
            
+        </span>
         Not checked
       </label>
     </div>
@@ -44066,11 +44071,16 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
     >
       <label
         className="checkbox"
+      >
+        <span
+          className="gwt-Anchor"
+          tabIndex={0}
         >
           <i
             className="is-outlined fa-check-square has-text-link fa"
           />
            
+        </span>
         Checked
       </label>
     </div>
@@ -44084,11 +44094,16 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
     >
       <label
         className="checkbox"
+      >
+        <span
+          className="gwt-Anchor"
+          tabIndex={0}
         >
           <i
             className="is-outlined fa-minus-square has-text-link far"
           />
            
+        </span>
         Indeterminate
       </label>
     </div>
@@ -44110,11 +44125,16 @@ exports[`Storyshots Forms|Checkbox Disabled 1`] = `
       <label
         className="checkbox"
         disabled={true}
+      >
+        <span
+          className="gwt-Anchor"
+          tabIndex={0}
         >
           <i
             className="is-outlined fa-check-square has-text-grey-light fa"
           />
            
+        </span>
         Checked but disabled
       </label>
     </div>
@@ -44135,11 +44155,16 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
     >
       <label
         className="checkbox"
+      >
+        <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"
@@ -44161,11 +44186,16 @@ exports[`Storyshots Forms|Checkbox With HelpText 1`] = `
     >
       <label
         className="checkbox"
+      >
+        <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"
@@ -47540,11 +47570,16 @@ exports[`Storyshots Modal|Modal With long tooltips 1`] = `
           >
             <label
               className="checkbox"
+            >
+              <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"

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