01 – Accessible Tabs

<script>
// Obtener todos los conjuntos de elementos fb-a11y-tab
const tabSets = document.querySelectorAll('.fb-a11y-tab');

// Recorrer cada conjunto de elementos fb-a11y-tab
tabSets.forEach((tabSet) => {
  // Obtener el encabezado y las pestañas del conjunto actual
  const header = tabSet.querySelector('.fb-a11y-tab__menu');
  const tabs = tabSet.querySelectorAll('.fb-a11y-tab__item');
  const contents = tabSet.querySelectorAll('.fb-a11y-tab__pane');

  // Agregar el evento de clic a cada elemento de pestaña del conjunto actual
  
  // Agregar el evento a cada elemento de pestaña del conjunto actual
  
  tabs.forEach((tab, tabIndex) => {
    /*
    tab.addEventListener('mouseover', () => {
      activateTab(tabIndex);
    });
    */
    
    tab.addEventListener('click', () => {
      activateTab(tabIndex);
    });
    
    tab.addEventListener('focus', () => {
      header.addEventListener('keydown', handleTabNavigation);
    });
    tab.setAttribute('aria-controls', `tabpanel-${tabIndex + 1}`);
  });

  // Agregar el evento de enfoque al encabezado del conjunto actual
  header.addEventListener('focus', () => {
    header.addEventListener('keydown', handleTabNavigation);
  });

  // Agregar el evento de enfoque a cada elemento de pestaña del conjunto actual
  tabs.forEach((tab) => {
    tab.addEventListener('focus', () => {
      header.addEventListener('keydown', handleTabNavigation);
    });
  });

  // Agregar el evento de teclado para detectar las teclas "next" y "prev" del conjunto actual
  function handleTabNavigation(event) {
    const activeTabIndex = Array.from(tabs).findIndex((tab) => tab.classList.contains('brx-open'));
    const numTabs = tabs.length;

    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
      event.preventDefault();
      const offset = event.key === 'ArrowRight' ? 1 : -1;
      const nextTabIndex = (activeTabIndex + offset + numTabs) % numTabs;
      activateTab(nextTabIndex);
    } else if (event.key === 'Home') {
      event.preventDefault();
      activateTab(0);
    } else if (event.key === 'End') {
      event.preventDefault();
      activateTab(numTabs - 1);
    } else if (event.key === 'Tab' && !event.shiftKey && activeTabIndex !== -1) {
      const activeContent = tabSet.querySelector('.fb-a11y-tab__content.brx-open');
      if (activeContent) {
        activeContent.focus();
        event.preventDefault();
      }
    }
  }

  // Función para activar una pestaña específica del conjunto actual
  function activateTab(tabIndex) {
    tabs.forEach((tab, index) => {
      const isActive = index === tabIndex;
      tab.classList.toggle('brx-open', isActive);
      tab.setAttribute('aria-selected', isActive);
      
      tab.removeAttribute('tabindex');
      if (isActive) {
        tab.focus();
      } else {
       tab.setAttribute('tabindex', '-1');
      }
    });

    contents.forEach((content, index) => {
      const isActive = index === tabIndex;
      content.classList.toggle('brx-open', isActive);
      if (isActive) {
        content.setAttribute('aria-labelledby', `tab-${tabIndex + 1}`);
      }
    });
  }

  // Activar la primera pestaña y contenido del conjunto actual
  activateTab(0);
});
  
  
// Obtener todos los elementos con la clase "fb-a11y-tab__item"
var elements = document.getElementsByClassName("fb-a11y-tab__item");

// Recorrer los elementos y borrar el enfoque
for (var i = 0; i < elements.length; i++) {
  elements[i].blur();
}

</script>