fix(accordion): ci / lint warning fixes

Author: thejackshelton

packages/kit-headless/src/components/accordion/accordion-content.tsx

@@ -7,15 +7,10 @@ import {
   useTask$,
   $,
   useVisibleTask$,
-  type QwikIntrinsicElements,
+  type QwikIntrinsicElements
 } from '@builder.io/qwik';
 
-import {
-  accordionItemContextId,
-  accordionRootContextId,
-} from './accordion-context-id';
-
-import { isBrowser } from '@builder.io/qwik/build';
+import { accordionItemContextId, accordionRootContextId } from './accordion-context-id';
 
 export type ContentProps = QwikIntrinsicElements['div'];
 
@@ -79,20 +74,20 @@ export const AccordionContent = component$(({ ...props }: ContentProps) => {
     }
 
     function getCalculatedHeight() {
-      const contentChildren = Array.from(
-        contentElement?.children!
-      ) as HTMLElement[];
-
-      contentChildren.forEach((element, index) => {
-        totalHeightSig.value += element.offsetHeight;
-
-        if (index === contentChildren.length - 1) {
-          contentElement?.style.setProperty(
-            '--qwikui-accordion-content-height',
-            `${totalHeightSig.value}px`
-          );
-        }
-      });
+      if (contentElement) {
+        const contentChildren = Array.from(contentElement.children) as HTMLElement[];
+
+        contentChildren.forEach((element, index) => {
+          totalHeightSig.value += element.offsetHeight;
+
+          if (index === contentChildren.length - 1) {
+            contentElement?.style.setProperty(
+              '--qwikui-accordion-content-height',
+              `${totalHeightSig.value}px`
+            );
+          }
+        });
+      }
     }
   });
 
@@ -104,16 +99,14 @@ export const AccordionContent = component$(({ ...props }: ContentProps) => {
         id={contentId}
         data-content-id={contentId}
         data-state={isTriggerExpandedSig.value ? 'open' : 'closed'}
-        hidden={
-          animated ? isContentHiddenSig.value : !isTriggerExpandedSig.value
-        }
+        hidden={animated ? isContentHiddenSig.value : !isTriggerExpandedSig.value}
         onAnimationEnd$={[hideContent$, props.onAnimationEnd$]}
         onTransitionEnd$={[hideContent$, props.onTransitionEnd$]}
         style={{
           ['--qwikui-collapsible-content-height' as string]:
             'var(--qwikui-accordion-content-height)',
           ['--qwikui-collapsible-content-width' as string]:
-            'var(--qwikui-accordion-content-width)',
+            'var(--qwikui-accordion-content-width)'
         }}
         {...props}
       >

packages/kit-headless/src/components/accordion/accordion-item.tsx

@@ -4,8 +4,7 @@ import {
   Slot,
   useId,
   useContextProvider,
-  type QwikIntrinsicElements,
-  useVisibleTask$,
+  type QwikIntrinsicElements
 } from '@builder.io/qwik';
 
 import { accordionItemContextId } from './accordion-context-id';
@@ -28,19 +27,13 @@ export const AccordionItem = component$(
       itemId,
       isTriggerExpandedSig,
       isDefaultValueOpenedSig,
-      defaultValue,
+      defaultValue
     };
 
     useContextProvider(accordionItemContextId, itemContext);
 
     return (
-      <div
-        ref={itemRef}
-        id={itemId}
-        data-type="item"
-        data-item-id={itemId}
-        {...props}
-      >
+      <div ref={itemRef} id={itemId} data-type="item" data-item-id={itemId} {...props}>
         <Slot />
       </div>
     );

packages/kit-headless/src/components/accordion/accordion-root.tsx

@@ -6,10 +6,7 @@ import {
   useSignal,
   useStore,
   type QwikIntrinsicElements,
-  useVisibleTask$,
-  useOnWindow,
-  useOnDocument,
-  useTask$,
+  useTask$
 } from '@builder.io/qwik';
 
 import { type AccordionRootContext } from './accordion-context.type';
@@ -19,7 +16,6 @@ export type AccordionRootProps = {
   behavior?: 'single' | 'multi';
   animated?: boolean;
   collapsible?: boolean;
-  orientation?: 'vertical' | 'horizontal';
   onSelectedIndexChange$?: (index: number) => void;
   onFocusIndexChange$?: (index: number) => void;
 } & QwikIntrinsicElements['div'];
@@ -29,7 +25,6 @@ export const AccordionRoot = component$(
     collapsible = true,
     behavior = 'single',
     animated = false,
-    orientation = 'vertical',
     ...props
   }: AccordionRootProps) => {
     const rootRef = useSignal<HTMLDivElement | undefined>();
@@ -94,7 +89,7 @@ export const AccordionRoot = component$(
       triggerStore,
       collapsible,
       behavior,
-      animated,
+      animated
     };
 
     useContextProvider(accordionRootContextId, contextService);

packages/kit-headless/src/components/accordion/accordion-trigger.tsx

@@ -7,24 +7,20 @@ import {
   useVisibleTask$,
   $,
   type QwikIntrinsicElements,
-  type QwikKeyboardEvent,
+  type QwikKeyboardEvent
 } from '@builder.io/qwik';
 
-import {
-  accordionItemContextId,
-  accordionRootContextId,
-} from './accordion-context-id';
+import { accordionItemContextId, accordionRootContextId } from './accordion-context-id';
 
 import { KeyCode } from '../../utils/key-code.type';
-import { cleanup } from 'axe-core';
 
 export const accordionPreventedKeys = [
   KeyCode.Home,
   KeyCode.End,
   KeyCode.PageDown,
   KeyCode.PageUp,
   KeyCode.ArrowDown,
-  KeyCode.ArrowUp,
+  KeyCode.ArrowUp
 ];
 
 export type AccordionTriggerProps = QwikIntrinsicElements['button'];
@@ -48,24 +44,20 @@ export const AccordionTrigger = component$(
     const contentId = `${itemContext.itemId}-content`;
 
     const selectedTriggerIdSig = contextService.selectedTriggerIdSig;
-    const currFocusedTriggerIndexSig =
-      contextService.currFocusedTriggerIndexSig;
-    const currSelectedTriggerIndexSig =
-      contextService.currSelectedTriggerIndexSig;
+    const currFocusedTriggerIndexSig = contextService.currFocusedTriggerIndexSig;
+    const currSelectedTriggerIndexSig = contextService.currSelectedTriggerIndexSig;
 
     const isTriggerExpandedSig = itemContext.isTriggerExpandedSig;
     const isDefaultValueOpenedSig = itemContext.isDefaultValueOpenedSig;
 
-    const setSelectedTriggerIndex$ = $(() => {
-      if (behavior === 'single') {
-        currSelectedTriggerIndexSig.value = triggerStore.indexOf(
-          triggerElement!
-        );
+    const setSelectedTriggerIndexSig$ = $(() => {
+      if (behavior === 'single' && triggerElement) {
+        currSelectedTriggerIndexSig.value = triggerStore.indexOf(triggerElement);
       }
     });
 
     /* selectedTriggerIdSig is updated when getSelectedTriggerId$ runs */
-    useTask$(function resetTriggersTask({ track, cleanup }) {
+    useTask$(function resetTriggersTask({ track }) {
       track(() => selectedTriggerIdSig.value);
 
       if (behavior === 'single' && triggerId !== selectedTriggerIdSig.value) {
@@ -101,7 +93,9 @@ export const AccordionTrigger = component$(
     useVisibleTask$(
       function cleanupTriggersTask({ cleanup }) {
         cleanup(() => {
-          triggerStore.splice(triggerStore.indexOf(triggerElement!), 1);
+          if (triggerElement) {
+            triggerStore.splice(triggerStore.indexOf(triggerElement), 1);
+          }
         });
       },
       { strategy: 'document-idle' }
@@ -118,13 +112,13 @@ export const AccordionTrigger = component$(
           $(() => {
             selectedTriggerIdSig.value = triggerId;
 
-            setSelectedTriggerIndex$();
+            setSelectedTriggerIndexSig$();
 
             collapsible
               ? (isTriggerExpandedSig.value = !isTriggerExpandedSig.value)
               : (isTriggerExpandedSig.value = true);
           }),
-          props.onClick$,
+          props.onClick$
         ]}
         aria-expanded={isTriggerExpandedSig.value}
         aria-controls={contentId}
@@ -146,12 +140,12 @@ export const AccordionTrigger = component$(
               await contextService.focusLastTrigger$();
             }
           }),
-          props.onKeyDown$,
+          props.onKeyDown$
         ]}
         onFocus$={() => {
-          currFocusedTriggerIndexSig.value = triggerStore.indexOf(
-            triggerElement!
-          );
+          if (triggerElement) {
+            currFocusedTriggerIndexSig.value = triggerStore.indexOf(triggerElement);
+          }
         }}
         {...props}
       >

packages/kit-headless/src/components/accordion/accordion.spec.tsx

@@ -4,7 +4,7 @@ import {
   AccordionItem,
   AccordionContent,
   AccordionTrigger,
-  AccordionHeader,
+  AccordionHeader
 } from './index';
 
 import './accordion-cypress.css';
@@ -17,7 +17,7 @@ interface AccordionProps {
 const ThreeItemAccordion = component$(
   ({ behavior, collapsible, ...props }: AccordionProps) => {
     return (
-      <AccordionRoot behavior={behavior} collapsible={collapsible}>
+      <AccordionRoot behavior={behavior} collapsible={collapsible} {...props}>
         <AccordionItem>
           <AccordionTrigger>Trigger 1</AccordionTrigger>
           <AccordionContent>
@@ -286,7 +286,7 @@ describe('Disabled', () => {
   const FourItemDisabledAccordion = component$(
     ({ behavior, collapsible, ...props }: AccordionProps) => {
       return (
-        <AccordionRoot behavior={behavior} collapsible={collapsible}>
+        <AccordionRoot behavior={behavior} collapsible={collapsible} {...props}>
           <AccordionItem>
             <AccordionTrigger>Trigger 1</AccordionTrigger>
             <AccordionContent>
@@ -367,7 +367,7 @@ describe('Dynamic', () => {
     ({
       itemIndexToDelete = 0,
       itemIndexToAdd = 0,
-      itemsLength,
+      itemsLength
     }: DynamicAccordionProps) => {
       const itemNames = Array(itemsLength)
         .fill(1)
@@ -420,11 +420,7 @@ describe('Dynamic', () => {
       THEN only 2 should remain
   `, () => {
     cy.mount(
-      <DynamicAccordion
-        itemsLength={3}
-        itemIndexToDelete={2}
-        itemIndexToAdd={0}
-      />
+      <DynamicAccordion itemsLength={3} itemIndexToDelete={2} itemIndexToAdd={0} />
     );
 
     cy.findByRole('button', { name: /remove item/i }).click();