Foldable Banner

// foldable-banner.js
(() => {
  document.addEventListener('DOMContentLoaded', () => {
    const BANNER_SELECTOR = '.c-foldable-banner';
    const banners = document.querySelectorAll(BANNER_SELECTOR);

    if (!banners.length) return; // nessun banner → esce subito

    const getFocusable = (root) =>
      root.querySelectorAll(
        'a[href], button, input, select, textarea, details summary, [tabindex]:not([tabindex="-1"])'
      );

    banners.forEach((banner) => {
      const wrapper  = banner.querySelector('.c-foldable-banner__wrapper');
      const btnClose = banner.querySelector('.js-foldable-banner-close-btn');
      const btnOpen  = banner.querySelector('.js-foldable-banner-open-btn');

      if (!wrapper || !btnClose || !btnOpen) return;

      let isOpen = true; // stato iniziale: aperto

      const setFocusability = (enabled) => {
        const focusables = Array.from(getFocusable(wrapper));
        focusables.forEach((el) => {
          if (el === btnClose) return;
          if (!enabled) {
            if (el.hasAttribute('tabindex')) el.dataset.prevTabindex = el.getAttribute('tabindex');
            el.setAttribute('tabindex', '-1');
          } else {
            if (el.dataset.prevTabindex != null) {
              el.setAttribute('tabindex', el.dataset.prevTabindex);
              delete el.dataset.prevTabindex;
            } else {
              el.removeAttribute('tabindex');
            }
          }
        });
      };

      const applyState = () => {
        banner.classList.toggle('is-collapsed', !isOpen);
        wrapper.setAttribute('aria-hidden', String(!isOpen));
        // entrambi i pulsanti devono avere aria-expanded uguale
        btnClose.setAttribute('aria-expanded', String(isOpen));
        btnOpen.setAttribute('aria-expanded', String(isOpen));
        setFocusability(isOpen);
      };

      const open = () => {
        if (isOpen) return;
        isOpen = true;
        applyState();
        btnClose.focus();
      };

      const close = () => {
        if (!isOpen) return;
        isOpen = false;
        applyState();
        btnOpen.focus();
      };

      btnClose.addEventListener('click', (e) => {
        e.preventDefault();
        close();
      });

      btnOpen.addEventListener('click', (e) => {
        e.preventDefault();
        open();
      });

      banner.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && isOpen) {
          e.stopPropagation();
          close();
        }
      });

      // inizializza stato coerente con HTML (aperto)
      applyState();
    });
  });
})();