Make sure that if a regular input checkbox can have an extra label

That was the way it was implemented before my changes (adding a visual-
-only checkbox option). So I wanted to keep that option.

src/components/checkbox/Checkbox.tsx

@@ -40,33 +40,34 @@ const CheckBox: FC<CheckBoxProps> = ({
         // This is to handle focus when more items are loaded via pagination
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={focused}
-        id={id}
         data-cy={id}
         className="checkbox__input"
         onChange={(e) => {
           checkedHandler(e.target.checked);
         }}
         checked={selected}
         type="checkbox"
-        aria-label={ariaLabel}
+        aria-label={isVisualOnly && labelledBy ? undefined : ariaLabel}
         aria-labelledby={isVisualOnly && labelledBy ? labelledBy : undefined}
         disabled={disabled}
       />
-      <label className="checkbox__label" htmlFor={id}>
+      <div className="checkbox__label" id={id}>
         <span className="checkbox__icon" aria-labelledby={labelledBy}>
           <IconCheckbox />
         </span>
         {label && (
-          <span
+          <label
+            id={id}
+            htmlFor={id}
             data-cy="checkbox-text"
             className={`checkbox__text text-small-caption color-secondary-gray ${
               hideLabel ? "checkbox__text--hide-visually" : ""
             }`}
           >
             {label}
-          </span>
+          </label>
         )}
-      </label>
+      </div>
     </div>
   );
 };