Accordion

---
/**
 * APG Accordion Pattern - Astro Implementation
 *
 * A vertically stacked set of interactive headings that each reveal a section of content.
 * Uses Web Components for client-side keyboard navigation and state management.
 *
 * @see https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
 */

export interface AccordionItem {
  id: string;
  header: string;
  content: string;
  disabled?: boolean;
  defaultExpanded?: boolean;
}

export interface Props {
  /** Array of accordion items */
  items: AccordionItem[];
  /** Allow multiple panels to be expanded simultaneously */
  allowMultiple?: boolean;
  /** Heading level for accessibility (2-6) */
  headingLevel?: 2 | 3 | 4 | 5 | 6;
  /** Enable arrow key navigation between headers */
  enableArrowKeys?: boolean;
  /** Additional CSS class */
  class?: string;
}

const {
  items,
  allowMultiple = false,
  headingLevel = 3,
  enableArrowKeys = true,
  class: className = '',
} = Astro.props;

// Generate unique ID for this instance
const instanceId = `accordion-${Math.random().toString(36).substring(2, 11)}`;

// Determine initially expanded items
const initialExpanded = items
  .filter((item) => item.defaultExpanded && !item.disabled)
  .map((item) => item.id);

// Use role="region" only for 6 or fewer panels (APG recommendation)
const useRegion = items.length <= 6;

// Dynamic heading tag
const HeadingTag = `h${headingLevel}`;
---

<apg-accordion
  class={`apg-accordion ${className}`.trim()}
  data-allow-multiple={allowMultiple}
  data-enable-arrow-keys={enableArrowKeys}
  data-expanded={JSON.stringify(initialExpanded)}
>
  {
    items.map((item) => {
      const headerId = `${instanceId}-header-${item.id}`;
      const panelId = `${instanceId}-panel-${item.id}`;
      const isExpanded = initialExpanded.includes(item.id);

      const itemClass = `apg-accordion-item ${
        isExpanded ? 'apg-accordion-item--expanded' : ''
      } ${item.disabled ? 'apg-accordion-item--disabled' : ''}`.trim();

      const triggerClass = `apg-accordion-trigger ${
        isExpanded ? 'apg-accordion-trigger--expanded' : ''
      }`.trim();

      const iconClass = `apg-accordion-icon ${
        isExpanded ? 'apg-accordion-icon--expanded' : ''
      }`.trim();

      const panelClass = `apg-accordion-panel ${
        isExpanded ? 'apg-accordion-panel--expanded' : 'apg-accordion-panel--collapsed'
      }`.trim();

      return (
        <div class={itemClass} data-item-id={item.id}>
          <Fragment set:html={`<${HeadingTag} class="apg-accordion-header">`} />
          <button
            type="button"
            id={headerId}
            aria-expanded={isExpanded}
            aria-controls={panelId}
            aria-disabled={item.disabled || undefined}
            disabled={item.disabled}
            class={triggerClass}
            data-item-id={item.id}
          >
            <span class="apg-accordion-trigger-content">{item.header}</span>
            <span class={iconClass} aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="6 9 12 15 18 9" />
              </svg>
            </span>
          </button>
          <Fragment set:html={`</${HeadingTag}>`} />
          <div
            role={useRegion ? 'region' : undefined}
            id={panelId}
            aria-labelledby={useRegion ? headerId : undefined}
            class={panelClass}
            data-panel-id={item.id}
          >
            <div class="apg-accordion-panel-content">
              <Fragment set:html={item.content} />
            </div>
          </div>
        </div>
      );
    })
  }
</apg-accordion>

<script>
  class ApgAccordion extends HTMLElement {
    private buttons: HTMLButtonElement[] = [];
    private panels: HTMLElement[] = [];
    private availableButtons: HTMLButtonElement[] = [];
    private expandedIds: string[] = [];
    private allowMultiple = false;
    private enableArrowKeys = true;
    private rafId: number | null = null;

    connectedCallback() {
      // Use requestAnimationFrame to ensure DOM is fully constructed
      this.rafId = requestAnimationFrame(() => this.initialize());
    }

    private initialize() {
      this.rafId = null;
      this.buttons = Array.from(this.querySelectorAll('.apg-accordion-trigger'));
      this.panels = Array.from(this.querySelectorAll('.apg-accordion-panel'));

      if (this.buttons.length === 0 || this.panels.length === 0) {
        console.warn('apg-accordion: buttons or panels not found');
        return;
      }

      this.availableButtons = this.buttons.filter((btn) => !btn.disabled);
      this.allowMultiple = this.dataset.allowMultiple === 'true';
      this.enableArrowKeys = this.dataset.enableArrowKeys !== 'false';
      this.expandedIds = JSON.parse(this.dataset.expanded || '[]');

      // Attach event listeners
      this.buttons.forEach((button) => {
        button.addEventListener('click', this.handleClick);
      });

      if (this.enableArrowKeys) {
        this.addEventListener('keydown', this.handleKeyDown);
      }
    }

    disconnectedCallback() {
      // Cancel pending initialization
      if (this.rafId !== null) {
        cancelAnimationFrame(this.rafId);
        this.rafId = null;
      }
      // Remove event listeners
      this.buttons.forEach((button) => {
        button.removeEventListener('click', this.handleClick);
      });
      this.removeEventListener('keydown', this.handleKeyDown);
      // Clean up references
      this.buttons = [];
      this.panels = [];
      this.availableButtons = [];
    }

    private togglePanel(itemId: string) {
      const isCurrentlyExpanded = this.expandedIds.includes(itemId);

      if (isCurrentlyExpanded) {
        this.expandedIds = this.expandedIds.filter((id) => id !== itemId);
      } else {
        if (this.allowMultiple) {
          this.expandedIds = [...this.expandedIds, itemId];
        } else {
          this.expandedIds = [itemId];
        }
      }

      this.updateDOM();

      // Dispatch custom event
      this.dispatchEvent(
        new CustomEvent('expandedchange', {
          detail: { expandedIds: this.expandedIds },
          bubbles: true,
        })
      );
    }

    private updateDOM() {
      this.buttons.forEach((button) => {
        const itemId = button.dataset.itemId!;
        const isExpanded = this.expandedIds.includes(itemId);
        const panel = this.panels.find((p) => p.dataset.panelId === itemId);
        const item = button.closest('.apg-accordion-item');
        const icon = button.querySelector('.apg-accordion-icon');

        // Update button
        button.setAttribute('aria-expanded', String(isExpanded));
        button.classList.toggle('apg-accordion-trigger--expanded', isExpanded);

        // Update icon
        icon?.classList.toggle('apg-accordion-icon--expanded', isExpanded);

        // Update panel visibility via CSS classes (not hidden attribute)
        if (panel) {
          panel.classList.toggle('apg-accordion-panel--expanded', isExpanded);
          panel.classList.toggle('apg-accordion-panel--collapsed', !isExpanded);
        }

        // Update item
        item?.classList.toggle('apg-accordion-item--expanded', isExpanded);
      });
    }

    private handleClick = (e: Event) => {
      const button = e.currentTarget as HTMLButtonElement;
      if (button.disabled) return;
      this.togglePanel(button.dataset.itemId!);
    };

    private handleKeyDown = (e: KeyboardEvent) => {
      const target = e.target as HTMLElement;
      if (!target.classList.contains('apg-accordion-trigger')) return;

      const currentIndex = this.availableButtons.indexOf(target as HTMLButtonElement);
      if (currentIndex === -1) return;

      let newIndex = currentIndex;
      let shouldPreventDefault = false;

      switch (e.key) {
        case 'ArrowDown':
          // Move to next, but don't wrap (APG compliant)
          if (currentIndex < this.availableButtons.length - 1) {
            newIndex = currentIndex + 1;
          }
          shouldPreventDefault = true;
          break;

        case 'ArrowUp':
          // Move to previous, but don't wrap (APG compliant)
          if (currentIndex > 0) {
            newIndex = currentIndex - 1;
          }
          shouldPreventDefault = true;
          break;

        case 'Home':
          newIndex = 0;
          shouldPreventDefault = true;
          break;

        case 'End':
          newIndex = this.availableButtons.length - 1;
          shouldPreventDefault = true;
          break;
      }

      if (shouldPreventDefault) {
        e.preventDefault();
        if (newIndex !== currentIndex) {
          this.availableButtons[newIndex]?.focus();
        }
      }
    };
  }

  // Register the custom element
  if (!customElements.get('apg-accordion')) {
    customElements.define('apg-accordion', ApgAccordion);
  }
</script>

---
import Accordion from './Accordion.astro';

const items = [
  {
    id: 'section1',
    header: 'First Section',
    content: 'Content for the first section...',
    defaultExpanded: true,
  },
  {
    id: 'section2',
    header: 'Second Section',
    content: 'Content for the second section...',
  },
];
---

<Accordion
  items={items}
  headingLevel={3}
  allowMultiple={false}
/>

interface AccordionItem {
  id: string;
  header: string;
  content: string;
  disabled?: boolean;
  defaultExpanded?: boolean;
}