FIX: added conditional to prevent reducing on empty array

Author: TheMcnafaha

apps/website/src/routes/docs/headless/checkbox/examples/hero.tsx

@@ -7,7 +7,7 @@ export default component$(() => {
         <CheckboxIndicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
           ✅
         </CheckboxIndicator>
-        No other stuff is needed here
+        Accept item
       </MyCheckbox>
     </>
   );

apps/website/src/routes/docs/headless/checkbox/examples/pizza.tsx

@@ -0,0 +1,20 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { MyCheckbox, CheckboxIndicator, CheckList } from '@qwik-ui/headless';
+export default component$(() => {
+  return (
+    <>
+      <h3 id="pizza-toppings">Pizza toppings</h3>
+      <CheckList ariaLabeledBy="pizza-toppings">
+        <MyCheckbox
+          class="flex items-center gap-3 border-2 border-black p-2 "
+          checkList={true}
+        >
+          <CheckboxIndicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
+            ✅
+          </CheckboxIndicator>
+          Pick all toppings
+        </MyCheckbox>
+      </CheckList>
+    </>
+  );
+});

apps/website/src/routes/docs/headless/checkbox/index.mdx

@@ -12,3 +12,4 @@ import { statusByComponent } from '~/_state/component-statuses';
 Gives users a visual representation of what options they have picked and those that they have not by "checking" each option they want.
 
 <Showcase name="hero" />
+<Showcase name="pizza" />

packages/kit-headless/src/components/checkbox/checkbox.tsx

@@ -150,7 +150,10 @@ export const TriStateCheckbox = component$<TriStateCheckboxProps>((props) => {
   const checklistContext = useContext(CheckListContext);
   const childCheckboxes = checklistContext.checkboxes;
   const appliedSig = props.checkBoxSig ?? checklistContext.checklistSig;
-  const ariaControlsStrg = checklistContext.idArr.reduce((p, c) => p + ' ' + c);
+  const ariaControlsStrg =
+    checklistContext.idArr.length === 0
+      ? ''
+      : checklistContext.idArr.reduce((p, c) => p + ' ' + c);
   useContextProvider(CheckboxContext, appliedSig);
   useTask$(() => {});
 

packages/kit-headless/src/components/checkbox/checklist.tsx

@@ -84,11 +84,6 @@ export const CheckList: Component<CheckListProps> = (props: CheckListProps) => {
     checklistChilds.forEach((checkbox) => {
       Object.assign(checkbox.props, { _overWriteCheckbox: true });
     });
-    // TODO: add code for controlled stuff
-    // for (let index = 0; index < hellSigs.length; index++) {
-    //   const element = array[index];
-    //
-    // }
   }
   console.log('fav idArr: ', idArr);
 
@@ -110,3 +105,4 @@ export const CheckList: Component<CheckListProps> = (props: CheckListProps) => {
     </>
   );
 };
+// TODO: deprecate ariaLabelledBy