tractatus/public/js/leader-page.js

/**
 * Leader Page - Accordion Functionality
 * Handles expandable/collapsible sections for leadership content
 * Implements WAI-ARIA Authoring Practices for accordions
 */

document.addEventListener('DOMContentLoaded', function() {
  // Get all accordion buttons
  const accordionButtons = document.querySelectorAll('[data-accordion]');

  accordionButtons.forEach(button => {
    // Click handler
    button.addEventListener('click', function() {
      const accordionId = this.dataset.accordion;
      toggleAccordion(accordionId, this);
    });

    // Keyboard handler (Enter and Space)
    button.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        const accordionId = this.dataset.accordion;
        toggleAccordion(accordionId, this);
      }
    });
  });

  /**
   * Toggle accordion section open/closed
   * @param {string} id - Accordion section ID
   * @param {HTMLElement} button - The button element that triggered toggle
   */
  function toggleAccordion(id, button) {
    const content = document.getElementById(id + '-content');
    const icon = document.getElementById(id + '-icon');

    if (content && icon) {
      const isExpanded = content.classList.contains('active');

      // Toggle CSS classes for visual state
      content.classList.toggle('active');
      icon.classList.toggle('active');

      // Update ARIA state
      button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
    }
  }
});