Tabs

---
/**
 * APG Tabs Pattern - Astro Implementation
 *
 * A set of layered sections of content that display one panel at a time.
 * Uses Web Components for client-side keyboard navigation and state management.
 *
 * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
 */

export interface TabItem {
  id: string;
  label: string;
  content: string;
  disabled?: boolean;
}

export interface Props {
  /** Array of tab items */
  tabs: TabItem[];
  /** Initially selected tab ID */
  defaultSelectedId?: string;
  /** Orientation of the tabs */
  orientation?: 'horizontal' | 'vertical';
  /** Activation mode: 'automatic' selects on arrow key, 'manual' requires Enter/Space */
  activation?: 'automatic' | 'manual';
  /** Additional CSS class */
  class?: string;
}

const {
  tabs,
  defaultSelectedId,
  orientation = 'horizontal',
  activation = 'automatic',
  class: className = '',
} = Astro.props;

// Determine initial selected tab
const initialTab = defaultSelectedId
  ? tabs.find((tab) => tab.id === defaultSelectedId && !tab.disabled)
  : tabs.find((tab) => !tab.disabled);
const selectedId = initialTab?.id || tabs[0]?.id;

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

const containerClass = `apg-tabs ${
  orientation === 'vertical' ? 'apg-tabs--vertical' : 'apg-tabs--horizontal'
} ${className}`.trim();

const tablistClass = `apg-tablist ${
  orientation === 'vertical' ? 'apg-tablist--vertical' : 'apg-tablist--horizontal'
}`;
---

<apg-tabs class={containerClass} data-activation={activation} data-orientation={orientation}>
  <div role="tablist" aria-orientation={orientation} class={tablistClass}>
    {
      tabs.map((tab) => {
        const isSelected = tab.id === selectedId;
        const tabClass = `apg-tab ${
          orientation === 'vertical' ? 'apg-tab--vertical' : 'apg-tab--horizontal'
        } ${isSelected ? 'apg-tab--selected' : ''} ${
          tab.disabled ? 'apg-tab--disabled' : ''
        }`.trim();

        return (
          <button
            role="tab"
            type="button"
            id={`${instanceId}-tab-${tab.id}`}
            aria-selected={isSelected}
            aria-controls={isSelected ? `${instanceId}-panel-${tab.id}` : undefined}
            tabindex={tab.disabled ? -1 : isSelected ? 0 : -1}
            disabled={tab.disabled}
            class={tabClass}
            data-tab-id={tab.id}
          >
            <span class="apg-tab-label">{tab.label}</span>
          </button>
        );
      })
    }
  </div>

  <div class="apg-tabpanels">
    {
      tabs.map((tab) => {
        const isSelected = tab.id === selectedId;

        return (
          <div
            role="tabpanel"
            id={`${instanceId}-panel-${tab.id}`}
            aria-labelledby={`${instanceId}-tab-${tab.id}`}
            hidden={!isSelected}
            class={`apg-tabpanel ${isSelected ? 'apg-tabpanel--active' : 'apg-tabpanel--inactive'}`}
            tabindex={isSelected ? 0 : -1}
            data-panel-id={tab.id}
          >
            <Fragment set:html={tab.content} />
          </div>
        );
      })
    }
  </div>
</apg-tabs>

<script>
  class ApgTabs extends HTMLElement {
    private tablist: HTMLElement | null = null;
    private tabs: HTMLButtonElement[] = [];
    private panels: HTMLElement[] = [];
    private availableTabs: HTMLButtonElement[] = [];
    private focusedIndex = 0;
    private activation: 'automatic' | 'manual' = 'automatic';
    private orientation: 'horizontal' | 'vertical' = 'horizontal';
    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.tablist = this.querySelector('[role="tablist"]');
      if (!this.tablist) {
        console.warn('apg-tabs: tablist element not found');
        return;
      }

      this.tabs = Array.from(this.querySelectorAll('[role="tab"]'));
      this.panels = Array.from(this.querySelectorAll('[role="tabpanel"]'));

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

      this.availableTabs = this.tabs.filter((tab) => !tab.disabled);
      this.activation = (this.dataset.activation as 'automatic' | 'manual') || 'automatic';
      this.orientation = (this.dataset.orientation as 'horizontal' | 'vertical') || 'horizontal';

      // Find initial focused index
      this.focusedIndex = this.availableTabs.findIndex(
        (tab) => tab.getAttribute('aria-selected') === 'true'
      );
      if (this.focusedIndex === -1) this.focusedIndex = 0;

      // Attach event listeners
      this.tablist.addEventListener('click', this.handleClick);
      this.tablist.addEventListener('keydown', this.handleKeyDown);
    }

    disconnectedCallback() {
      // Cancel pending initialization
      if (this.rafId !== null) {
        cancelAnimationFrame(this.rafId);
        this.rafId = null;
      }
      // Remove event listeners
      this.tablist?.removeEventListener('click', this.handleClick);
      this.tablist?.removeEventListener('keydown', this.handleKeyDown);
      // Clean up references
      this.tablist = null;
      this.tabs = [];
      this.panels = [];
      this.availableTabs = [];
    }

    private selectTab(tabId: string) {
      this.tabs.forEach((tab) => {
        const isSelected = tab.dataset.tabId === tabId;
        tab.setAttribute('aria-selected', String(isSelected));
        tab.tabIndex = isSelected ? 0 : -1;
        tab.classList.toggle('apg-tab--selected', isSelected);

        // Update aria-controls
        const panelId = tab.id.replace('-tab-', '-panel-');
        if (isSelected) {
          tab.setAttribute('aria-controls', panelId);
        } else {
          tab.removeAttribute('aria-controls');
        }
      });

      this.panels.forEach((panel) => {
        const isSelected = panel.dataset.panelId === tabId;
        panel.hidden = !isSelected;
        panel.tabIndex = isSelected ? 0 : -1;
        panel.classList.toggle('apg-tabpanel--active', isSelected);
        panel.classList.toggle('apg-tabpanel--inactive', !isSelected);
      });

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

    private focusTab(index: number) {
      this.focusedIndex = index;
      this.availableTabs[index]?.focus();
    }

    private handleClick = (e: Event) => {
      const target = (e.target as HTMLElement).closest<HTMLButtonElement>('[role="tab"]');
      if (target && !target.disabled) {
        this.selectTab(target.dataset.tabId!);
        // Update focused index
        this.focusedIndex = this.availableTabs.indexOf(target);
      }
    };

    private handleKeyDown = (e: KeyboardEvent) => {
      const target = e.target as HTMLElement;
      if (target.getAttribute('role') !== 'tab') return;

      let newIndex = this.focusedIndex;
      let shouldPreventDefault = false;

      // Determine navigation keys based on orientation
      const nextKey = this.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
      const prevKey = this.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';

      switch (e.key) {
        case nextKey:
        case 'ArrowRight':
        case 'ArrowDown':
          newIndex = (this.focusedIndex + 1) % this.availableTabs.length;
          shouldPreventDefault = true;
          break;

        case prevKey:
        case 'ArrowLeft':
        case 'ArrowUp':
          newIndex =
            (this.focusedIndex - 1 + this.availableTabs.length) % this.availableTabs.length;
          shouldPreventDefault = true;
          break;

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

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

        case 'Enter':
        case ' ':
          if (this.activation === 'manual') {
            const focusedTab = this.availableTabs[this.focusedIndex];
            if (focusedTab) {
              this.selectTab(focusedTab.dataset.tabId!);
            }
          }
          shouldPreventDefault = true;
          break;
      }

      if (shouldPreventDefault) {
        e.preventDefault();

        if (newIndex !== this.focusedIndex) {
          this.focusTab(newIndex);

          if (this.activation === 'automatic') {
            const newTab = this.availableTabs[newIndex];
            if (newTab) {
              this.selectTab(newTab.dataset.tabId!);
            }
          }
        }
      }
    };
  }

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

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

const tabs = [
  { id: 'tab1', label: 'First', content: 'First panel content' },
  { id: 'tab2', label: 'Second', content: 'Second panel content' },
  { id: 'tab3', label: 'Third', content: 'Third panel content' }
];
---

<Tabs
  tabs={tabs}
  defaultSelectedId="tab1"
/>

<script>
  // Listen for tab change events
  document.querySelector('apg-tabs')?.addEventListener('tabchange', (e) => {
    console.log('Tab changed:', e.detail.selectedId);
  });
</script>