Merge pull request #157 from unoforge/changes

refactor(accordion): improve keyboard navigation and trigger handling

Author: Johnkat-Mj

packages/accordion/src/accordion.ts

@@ -25,6 +25,8 @@ export default class Accordion {
     private eventListeners: Array<{ element: HTMLElement; type: string; listener: EventListener }> = [];
     private cleanupObserver: (() => void) | null = null;
 
+
+
     /**
      * Creates an instance of Accordion
      * @param {string | HTMLElement} accordion - Selector string or HTMLElement for the accordion container
@@ -71,11 +73,9 @@ export default class Accordion {
             }
         }
         this.addEventListeners();
-        const handleKeyEvents = (e: KeyboardEvent) => {
-            initKeyEvents(e, this.accordionEl)
-        }
-        this.accordionEl.addEventListener("keydown", handleKeyEvents);
-        this.eventListeners.push({ element: this.accordionEl, type: "keydown", listener: handleKeyEvents as EventListener });
+
+        this.accordionEl.addEventListener("keydown", this.handleKeyEvents);
+        this.eventListeners.push({ element: this.accordionEl, type: "keydown", listener: this.handleKeyEvents as EventListener });
 
         FlexillaManager.register("accordion", this.accordionEl, this)
 
@@ -86,6 +86,10 @@ export default class Accordion {
         });
     }
 
+    private handleKeyEvents = (e: KeyboardEvent) => {
+        initKeyEvents(e, this.accordionEl)
+    }
+
     reload = () => {
         this.cleanup()
         this.items = $$("[data-accordion-item]", this.accordionEl).filter((item: HTMLElement) => item.parentElement && item.parentElement === this.accordionEl);

packages/accordion/src/helpers.ts

@@ -2,26 +2,49 @@ import { expandElement, collapseElement, initCollapsible } from "./../../collaps
 import { $d, $$ } from "@flexilla/utilities/selector"
 
 const getAdjacentTrigger = (currentTrigger: HTMLElement, goUp: boolean, accordionElement: HTMLElement) => {
-    const allAccordionItems = $$("[data-accordion-item]", accordionElement)
-    const accordionItems = allAccordionItems.filter((item) => item.parentElement === accordionElement);
-    const currentTriggerIndex = Array.from(accordionItems).indexOf(currentTrigger.closest('[data-accordion-item]')!);
-    const nextIndex = goUp ? currentTriggerIndex - 1 : currentTriggerIndex + 1;
-    const nextTrigger = $d("[data-accordion-trigger]", accordionItems[nextIndex]) as HTMLElement
+    // Get all direct children [data-accordion-item] of accordionElement
+    const accordionItems = $$(`:scope > [data-accordion-item]`, accordionElement) as HTMLElement[];
 
-    return nextTrigger ?? (goUp ? $d("[data-accordion-trigger]", accordionItems[accordionItems.length - 1]) : $d("[data-accordion-trigger]", accordionItems[0]))
-}
+    // Find the current accordion item (direct parent of the trigger)
+    const currentItem = currentTrigger.parentElement;
+    if (!accordionItems.includes(currentItem as HTMLElement)) return null; // Not a valid direct child item
+
+    const currentIndex = accordionItems.indexOf(currentItem as HTMLElement);
+    const nextIndex = goUp ? currentIndex - 1 : currentIndex + 1;
+
+    // Determine the next item, looping to last/first if out of bounds
+    const nextItem =
+        accordionItems[nextIndex] ??
+        (goUp ? accordionItems[accordionItems.length - 1] : accordionItems[0]);
+
+    // Select trigger that is a direct child of the next item
+    const nextTrigger = $d(`:scope > [data-accordion-trigger]`, nextItem);
+    return nextTrigger instanceof HTMLElement ? nextTrigger : null;
+};
 
 const initKeyEvents = (event: KeyboardEvent, accordionElement: HTMLElement) => {
+    if (!(document.activeElement instanceof HTMLElement)) return;
+
     const focusedTrigger = document.activeElement;
-    if (!(focusedTrigger instanceof HTMLElement)) return
 
-    const isTriggerFocused = focusedTrigger.matches('[data-accordion-trigger]');
-    if (isTriggerFocused && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
-        event.preventDefault(); // Prevent default scrolling behavior
+    // Ensure it's the right trigger in the correct structure
+    const parentItem = focusedTrigger.parentElement;
+    if (
+        !focusedTrigger.matches('[data-accordion-trigger]') ||
+        !parentItem?.matches('[data-accordion-item]') ||
+        parentItem.parentElement !== accordionElement
+    ) {
+        return;
+    }
+
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        event.preventDefault(); // Prevent default scrolling
         const nextTrigger = getAdjacentTrigger(focusedTrigger, event.key === 'ArrowUp', accordionElement);
-        nextTrigger.focus();
+        if (nextTrigger) {
+            nextTrigger.focus();
+        }
     }
-}
+};
 
 const changeTriggerState = (trigger: HTMLElement, state: "open" | "close") => {
     trigger.ariaExpanded = state === "open" ? "true" : "false";