Merge pull request #375 from thejackshelton/accordion-improvements

Accordion improvements

Author: thejackshelton

apps/website/src/routes/docs/headless/(components)/accordion/index.mdx

@@ -343,7 +343,7 @@ Any disabled elements will be skipped over when using tab or the `Up Arrow` and
 
 <DefaultValueAccordion>
   ```tsx
-  <AccordionRoot class="accordion-wrapper" animate>
+  <AccordionRoot class="accordion-wrapper">
     <AccordionItem>
       <AccordionHeader>
         <AccordionTrigger class="accordion-trigger">
@@ -398,7 +398,7 @@ You can make the accordion items uncontrolled by adding the **defaultValue** pro
 
 <PolymorphicHeadingAccordion>
   ```tsx
-  <AccordionRoot class="accordion-wrapper" animate>
+  <AccordionRoot class="accordion-wrapper">
     <AccordionItem>
       <AccordionHeader as="h4">
         <AccordionTrigger class="accordion-trigger">

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

@@ -44,17 +44,24 @@ export const AccordionTrigger = component$(
     const contentId = `${itemContext.itemId}-content`;
 
     const selectedTriggerIdSig = contextService.selectedTriggerIdSig;
+    const isTriggerExpandedSig = itemContext.isTriggerExpandedSig;
+
+    /* The consumer can use these two signals. */
     const currFocusedTriggerIndexSig = contextService.currFocusedTriggerIndexSig;
     const currSelectedTriggerIndexSig = contextService.currSelectedTriggerIndexSig;
 
-    const isTriggerExpandedSig = itemContext.isTriggerExpandedSig;
-
     const setSelectedTriggerIndexSig$ = $(() => {
       if (behavior === 'single' && triggerElement) {
         currSelectedTriggerIndexSig.value = triggerStore.indexOf(triggerElement);
       }
     });
 
+    const setCurrFocusedIndexSig$ = $(() => {
+      if (triggerElement) {
+        currFocusedTriggerIndexSig.value = triggerStore.indexOf(triggerElement);
+      }
+    });
+
     useTask$(function resetTriggersTask({ track }) {
       track(() => selectedTriggerIdSig.value);
 
@@ -138,11 +145,7 @@ export const AccordionTrigger = component$(
           }),
           props.onKeyDown$
         ]}
-        onFocus$={() => {
-          if (triggerElement) {
-            currFocusedTriggerIndexSig.value = triggerStore.indexOf(triggerElement);
-          }
-        }}
+        onFocus$={[setCurrFocusedIndexSig$, props.onFocus$]}
         {...props}
       >
         <Slot />