Akkordeon

import randomId from '../../../javascripts/utils/random-id';

// Add accessibility attributes
document.querySelectorAll('.accordion__title').forEach(($title) => {
  const id = randomId();
  const $content = $title.nextElementSibling;

  // Set IDs
  $title.setAttribute('id', `accordion-title-${id}`);
  $content.setAttribute('id', `accordion-content-${id}`);

  // Set roles
  $title.setAttribute('role', 'tab');
  $content.setAttribute('role', 'tabpanel');

  // Setup relationship
  $title.setAttribute('aria-controls', `accordion-content-${id}`);
  $content.setAttribute('aria-labelledby', `accordion-title-${id}`);

  // Other attributes
  $title.setAttribute('aria-expanded', 'false');
  $title.setAttribute('aria-selected', 'false');
  $title.setAttribute('tabindex', '-1');
  $content.setAttribute('aria-hidden', 'true');
});

// Init accordion
document.querySelectorAll('.accordion').forEach(($accordion) => {
  // Add accessibility attributes
  $accordion.setAttribute('role', 'tablist');
  $accordion.setAttribute('aria-multiselectable', 'true');

  // Add events
  $accordion.querySelectorAll('.accordion__title').forEach(($title, index, $titles) => {
    // Make first tab clickable
    if (index === 0) $title.setAttribute('tabindex', '0');

    // Save focus
    const saveFocus = () => {
      // Reset other tab attributes
      $titles.forEach(($t) => {
        $t.setAttribute('tabindex', '-1');
        $t.setAttribute('aria-selected', 'true');
      });

      // Set this tab attributes
      $title.setAttribute('tabindex', '0');
      $title.setAttribute('aria-selected', 'true');
    };

    // Click event
    $title.addEventListener('click', () => {
      // States
      const $content = $title.nextElementSibling;
      const active = $content.matches('.accordion__content--active');

      // Save focus
      saveFocus();

      // Set this tab attributes
      $title.setAttribute('aria-expanded', active ? 'false' : 'true');
      $content.setAttribute('aria-hidden', active ? 'true' : 'false');
      $content.classList.toggle('accordion__content--active');
    });

    // Keydown event
    $title.addEventListener('keydown', (event) => {
      const $first =
        $accordion.querySelector('.accordion__title:first-of-type');
      const $last =
        $accordion.querySelector('.accordion__title:last-of-type');
      const $next =
        $last !== $title ? $title.nextElementSibling.nextElementSibling : false;
      const $prev =
        $first !== $title ? $title.previousElementSibling.previousElementSibling : false;

      // Prevent default event
      if ([13, 32, 35, 36, 37, 38, 39, 40].indexOf(event.which) >= 0) {
        event.preventDefault();
        event.stopPropagation();
      }

      // eslint-disable-next-line default-case
      switch (event.which) {
        // Left/Up
        case 37:
        case 38:
          // Check for previous question
          if (!$prev) { $last.focus(); } else { $prev.focus(); }
          break;

        // Right/Down
        case 39:
        case 40:
          // Check for next question
          if (!$next) { $first.focus(); } else { $next.focus(); }
          break;

        // Home
        case 36:
          // Set focus on first question
          $first.focus();
          break;

        // End
        case 35:
          // Set focus on last question
          $last.focus();
          break;

        // Enter/Space
        case 13:
        case 32:
          // Show content
          $title.click();
          break;
      }
    });

    // Focus event
    $title.addEventListener('focus', saveFocus);
  });
});