UI – Components

<script>
// Función para actualizar aria-expanded basado en el estado del elemento
function updateAriaExpanded(button, isOpen) {
  button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
}

// Función para observar cambios en el DOM y asignar aria-expanded y aria-controls
function observeAccordionItems() {
  const accordionItems = document.querySelectorAll('[fb-acc-item]');

  // Crea un nuevo observador
  const observer = new MutationObserver(mutationsList => {
    for (const mutation of mutationsList) {
      const item = mutation.target;
      const button = item.querySelector('[fb-acc-btn]');
      updateAriaExpanded(button, item.classList.contains('brx-open'));

      const content = item.querySelector('[fb-acc-content]');
      const title = item.querySelector('[fb-acc-title]');
      if (title && content) {
        content.setAttribute('aria-label', title.textContent.trim());
      }
    }
  });

  accordionItems.forEach((item, index) => {
    const button = item.querySelector('[fb-acc-btn]');
    const content = item.querySelector('[fb-acc-content]');
    const accordionParent = item.closest('[fb-acc]');
    
    // Busca el fb-acc-name directamente en el contenedor fb-acc
    const accordionName = accordionParent.querySelector('[fb-acc-name]');

    // Asigna el ID del contenido directamente a aria-controls
    if (!content.id) {
      // Si el contenido no tiene un ID, genera uno y asígnalo
      const generatedId = 'generated-id-' + index; // Puedes mejorar la lógica de generación según tus necesidades
      content.id = generatedId;
    }
    button.setAttribute('aria-controls', content.id);

    // Verifica si accordionName no es null antes de acceder a su textContent
    if (accordionName) {
      accordionParent.setAttribute('aria-label', accordionName.textContent.trim());
    }

    // Configura aria-expanded inicialmente y observa cambios
    updateAriaExpanded(button, item.classList.contains('brx-open'));
    observer.observe(item, { attributes: true, attributeFilter: ['class'] });
  });
}

observeAccordionItems();
</script>