Merge pull request #3 from BMDSoftware/imp/checkbox-click-area

Increase hit area for file multi-selection checkboxes

Author: Rui-Jesus

frontend/src/FileManager/FileList/FileItem.jsx

@@ -214,6 +214,7 @@ const FileItem = ({
             id={file.name}
             checked={fileSelected}
             className={`selection-checkbox ${checkboxClassName}`}
+            labelClassName={`selection-checkbox-label`}
             onChange={handleCheckboxChange}
             onClick={(e) => e.stopPropagation()}
           />

frontend/src/FileManager/FileList/FileList.scss

@@ -67,10 +67,15 @@
       background-color: $item-hover-color;
     }
 
-    .selection-checkbox {
+    .selection-checkbox-label {
       position: absolute;
-      left: 5px;
-      top: 8px;
+      top: 0;
+      left: 0;
+      padding: 8px 5px;
+    }
+
+    .selection-checkbox {
+      position: static;
     }
 
     .hidden {
@@ -199,8 +204,13 @@
       background-color: unset;
     }
 
+    .selection-checkbox-label {
+      padding-top: 12px;
+      padding-bottom: 12px;
+    }
+
     .selection-checkbox {
-      top: 12px;
+      position: static;
     }
 
     .file-name {

frontend/src/components/Checkbox/Checkbox.jsx

@@ -1,18 +1,19 @@
 import "./Checkbox.scss";
 
-const Checkbox = ({ name, id, checked, onClick, onChange, className = "", title, disabled = false }) => {
+const Checkbox = ({ name, id, checked, onClick, onChange, className = "", labelClassName = "", title, disabled = false }) => {
   return (
-    <input
-      className={`fm-checkbox ${className}`}
-      type="checkbox"
-      name={name}
-      id={id}
-      checked={checked}
-      onClick={onClick}
-      onChange={onChange}
-      title={title}
-      disabled={disabled}
-    />
+    <label htmlFor={id} aria-label={`${name} checkbox`} onClick={onClick} className={labelClassName}>
+      <input
+        className={`fm-checkbox ${className}`}
+        type="checkbox"
+        name={name}
+        id={id}
+        checked={checked}
+        onChange={onChange}
+        title={title}
+        disabled={disabled}
+      />
+    </label>
   );
 };