use label element and set htmlFor

apps/app/src/components/PrivateLegacyPages.tsx

@@ -355,6 +355,7 @@ const PrivateLegacyPages = (): JSX.Element => {
       <div className="search-control d-flex align-items-center">
         <div className="d-flex ps-md-2">
           <OperateAllControl
+            inputClassName="ms-2"
             ref={selectAllControlRef}
             isCheckboxDisabled={isCheckboxDisabled}
             onCheckboxChanged={selectAllCheckboxChangedHandler}

apps/app/src/components/SearchPage.tsx

@@ -200,11 +200,18 @@ export const SearchPage = (): JSX.Element => {
           <div className="d-flex align-items-center py-2">
             <div className="ms-4">
               <OperateAllControl
+                inputId="cb-select-all"
+                inputClassName="form-check-input"
                 ref={selectAllControlRef}
                 isCheckboxDisabled={hitsCount === 0}
                 onCheckboxChanged={selectAllCheckboxChangedHandler}
               >
-                <span className="ms-2">{t('search_result.select_all')}</span>
+                <label
+                  className="form-check-label ms-2"
+                  htmlFor="cb-select-all"
+                >
+                  {t('search_result.select_all')}
+                </label>
               </OperateAllControl>
             </div>
 

apps/app/src/components/SearchPage/OperateAllControl.tsx

@@ -7,6 +7,8 @@ import type { ISelectableAndIndeterminatable } from '~/client/interfaces/selecta
 import type { IndeterminateInputElement } from '~/interfaces/indeterminate-input-elm';
 
 type Props = {
+  inputId?: string,
+  inputClassName?: string,
   isCheckboxDisabled?: boolean,
   onCheckboxChanged?: (isChecked: boolean) => void,
   children?: React.ReactNode,
@@ -14,6 +16,8 @@ type Props = {
 
 const OperateAllControlSubstance: ForwardRefRenderFunction<ISelectableAndIndeterminatable, Props> = (props: Props, ref): JSX.Element => {
   const {
+    inputId,
+    inputClassName = '',
     isCheckboxDisabled,
     onCheckboxChanged,
     children,
@@ -54,10 +58,10 @@ const OperateAllControlSubstance: ForwardRefRenderFunction<ISelectableAndIndeter
   return (
     <div className="d-flex align-items-center">
       <Input
+        id={inputId}
         type="checkbox"
-        id="cb-check-all"
         data-testid="cb-select-all"
-        className="ms-2"
+        className={inputClassName}
         innerRef={selectAllCheckboxElm}
         disabled={isCheckboxDisabled}
         onChange={checkboxChangedHandler}